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.inProgress = false;
		
		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) {
			if (this.rightArr) {
				this.rightArr.remove();
			}
			if (this.leftArr) {
				this.leftArr.remove();
			}
			if (this.thumbsLn < this.visThumbCount) {
				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;
		
		if (this.rightArr) {
			this.rightArr.addEvent('click', function(event) {
				new Event(event).stop();
				if(this.inProgress == false) this._doSlide.attempt(['right'], this);
			}.bind(this));
		}
		if (this.leftArr) {
			this.leftArr.addEvent('click', function(event) {
				new Event(event).stop();
				if(this.inProgress == false) 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,
			onStart: function () {
				this.inProgress = true;
			}.bind(this),
			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');			
				}
				this.inProgress = false;
			}.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');
	}
});