Hasbro.SlideNav = new Class({

	initialize : function (id) {

		this.container = $(id);

		this.thumbRow = this.container.getElement('ul');

		this.thumbRow.setStyle('left', 0);

		this.thumbs = this.container.getElements('li');

		this.rightArr = this.container.getElement('img.hsb_arr_right');

		this.leftArr = this.container.getElement('img.hsb_arr_left');

		this.rightBtnOff = false;

		this.leftBtnOff = true;

		

		this.visThumbCount = 3;

		this.thumbsLn = this.thumbs.length;

		

		// quit and remove arrows if thumb selection is less that or equal to viewport

		if(this.thumbsLn <= this.visThumbCount) {

			this.rightArr.remove();	

			this.leftArr.remove();

			this.thumbParentWidth = this.thumbRow.getParent().getStyle('width').toInt();

			this.thumbRow.getChildren().each(function (child, i) {

				this.thumbChildMarginWidth = child.getStyle('margin-right').toInt();

				this.thumbChildWidth = child.getStyle('width').toInt() + this.thumbChildMarginWidth;

				if(i > 0) this.thumbChildWidth += this.thumbChildWidth;

				this.thumbChildMarginWidth = this.thumbChildMarginWidth / 2;

				

				child.setStyles({

					'display' : 'inline',

					'margin-right' : this.thumbChildMarginWidth,

					'margin-left' : this.thumbChildMarginWidth

				});

			}.bind(this));

			this.thumbMargin = (this.thumbParentWidth - this.thumbChildWidth) / 2;

			this.thumbRow.setStyles({

				'width' : this.thumbChildWidth,

				'margin-right' : this.thumbMargin,

				'margin-left' : this.thumbMargin

			});

			return false;

		}

		

		this.thumbsOffset = this.thumbsLn - this.visThumbCount;

		this.thumbPositions = [];

		this.thumbPosition = 0;



		new Hasbro.NullAnchor(this.container);



		this.thumbs.each(function(thumb, i) {

			this.thumbWidth = -(thumb.getStyle('width').toInt() + thumb.getStyle('margin-right').toInt());

			if (i <= this.thumbsOffset) {

				this.thumbPositions.push(this.thumbPosition);

				this.thumbPosition += this.thumbWidth;

			}

		}.bind(this));



		this.clickCount = 0;

		

		this.rightArr.addEvent('click', function(event) {

			new Event(event).stop();

			this._doSlide.attempt(['right'], this);

		}.bind(this));

		

		this.leftArr.addEvent('click', function(event) {

			new Event(event).stop();

			this._doSlide.attempt(['left'], this);

		}.bind(this));

	},

	_doSlide : function (dir) {

		if (this.clickCount < (this.thumbPositions.length - 1) && dir == 'right') {

			this.rightBtnOff = false;

			this.leftBtnOff = false;

			this.clickCount++;

		} else if (this.clickCount > 0 &&  dir == 'left') {

			this.rightBtnOff = false;

			this.leftBtnOff = false;

			this.clickCount--;

		} else {

			this.leftBtnOff = false;

			this.rightBtnOff = false;

		}

		

		if (this.clickCount == (this.thumbPositions.length - 1)) {

			this.rightBtnOff = true;

		}

		if (this.clickCount == 0) {

			this.leftBtnOff = true;

		}

		

		this.slideAmt = this.thumbPositions[this.clickCount];

		

		this._slideEffects();

		this.slideFx.start({'left' : this.slideAmt});

	},

	_slideEffects : function () {

		this.slideFx = this.thumbRow.effects({

			wait: true,

			duration: 350,

			transition: Fx.Transitions.Cubic.easeIn,

			onComplete: function () {

				if (this.leftBtnOff) {

					this._replaceArrows(this.leftArr, 'off');

					this._replaceArrows(this.rightArr, 'on');

				} else if (this.rightBtnOff) {

					this._replaceArrows(this.rightArr, 'off');

					this._replaceArrows(this.leftArr, 'on');	

				} else {

					this._replaceArrows(this.rightArr, 'on');

					this._replaceArrows(this.leftArr, 'on');			

				}

			}.bind(this)

		});

	},

	_replaceArrows : function (btn, state) {

		if (state == 'off') btn.src = btn.src.replace('_on', '_off');

		else if (state == 'on') btn.src = btn.src.replace('_off', '_on');

	}

});