Hasbro.ImageView = new Class ({
	options : {
		startIdx : 0,
		duration : 700,
		transition : Fx.Transitions.Cubic.easeIn,
		hasSlide : {
			enabled : false,
			loop : false
		},
		hasArrowTrigger : false,
		loop : false,
		autoPlay : {
			enabled : false,
			duration : 5500,
			loop : false
		}
	},
	initialize : function (el, options) {
		this.container = $(el);
		this.setOptions(options);
		this.images = this.container.getElements('.hsb_iv_img');
		this.triggers = this.container.getElements('.hsb_iv_trg');
		this.currentImg = this.images[this.options.startIdx];
		this.currentTrg = this.triggers[this.options.startIdx];
		this.rightTrg = this.container.getElement('#hsb_iv_trg_right');
		this.leftTrg = this.container.getElement('#hsb_iv_trg_left');
		this.idx = this.options.startIdx;
		this.inProgress = false;
		this.atBeginning = true;
		this.atEnd = false;
		
		if (this.options.hasSlide.enabled) new Hasbro.ImageView.Slide('hsb_looks_iv_thumb');
		
		this.images.each(function (img, i) {			
			if (i != this.options.startIdx) img.setStyle('opacity', 0);
		}.bind(this));
		
		if (this.options.autoPlay.enabled) {
			this.periodical = this.autoplay.bind(this).periodical(this.options.autoPlay.duration);
		}
		
		new Hasbro.NullAnchor(this.container);
		if (this.triggers.length > 0) this.triggers[this.idx].getParent().setStyle('cursor', 'default');
		this.triggers.each(function (trg, i) {
			trg.addEvent('click', function (e) {
				if (this.options.autoPlay.enabled) $clear(this.periodical);
				e = new Event(e);
				e.stop();
				if (!this.inProgress) this.show(i);
			}.bind(this));
		}.bind(this));

		if (this.options.hasArrowTrigger) {
			this.rightTrg.addEvent('click', function (e) {
				if (this.options.autoPlay.enabled) $clear(this.periodical);
				e = new Event(e);
				e.stop();
				if (!this.inProgress) {
					this.increment();
					this.show(this.idx);
				}
			}.bind(this));
			if (!this.options.loop) this.leftTrg.getParent().setStyle('cursor', 'default');
			this.leftTrg.addEvent('click', function (e) {
				if (this.options.autoPlay.enabled) $clear(this.periodical);
				e = new Event(e);
				e.stop();
				if (!this.inProgress) {
					this.decrement();
					this.show(this.idx);
				}
			}.bind(this));
		}
	},
	increment : function () {
		this.currentImg = this.images[this.idx];
		this.currentTrg = this.triggers[this.idx];
		if (this.idx < this.images.length - 1) {
			this.idx++;
		} else {
			if (this.options.loop) this.idx = 0;
		}
	},
	decrement : function () {
		this.currentImg = this.images[this.idx];
		this.currentTrg = this.triggers[this.idx];
		if (this.idx > 0) {
			this.idx--;
		} else {
			if (this.options.loop) this.idx = this.images.length - 1;
		}
	},
	show : function (i) {
		this.previousImg = this.currentImg || this.images[i];
		this.currentImg = this.images[i];
		this.idx = i;

		if (this.idx == this.images.length - 1) {
			this.atBeginning = false;
			this.atEnd = true;
		}
		else 
			if (this.idx == 0) {
				this.atBeginning = true;
				this.atEnd = false;
			}
			else {
				this.atBeginning = false;
				this.atEnd = false;
			}
		
		if (this.currentImg != this.previousImg) {
			this.updateTrigger(this.idx);
			this.fxHide = this.crossfade(this.previousImg);
			this.fxHide.addEvent('onStart', function () {
				this.inProgress = true;
			}.bind(this));
			this.fxHide.start({ 'opacity': 0.0 });
			this.fxShow = this.crossfade(this.currentImg);
			this.fxShow.addEvent('onComplete', function () {
				this.inProgress = false;
				this.fireEvent('slideComplete');
			}.bind(this));
			this.fxShow.start({ 'opacity': 1.0 });
		}
	},
	crossfade : function (img) {
		return img.effects({
			wait: false,
			duration: this.options.duration,
			transition: this.options.transition
		});
	},
	updateTrigger : function (idx) {
		this.previousTrg = this.currentTrg || this.triggers[idx];
		this.currentTrg = this.triggers[idx];
		($defined(this.rightTrg) || $defined(this.leftTrg)) ? isArrowTrigger = true : isArrowTrigger = false;
		
		if (isArrowTrigger) {
			if (!this.options.loop) {
				if (this.atBeginning) {
					this.rightTrg.setProperty('src', this.rightTrg.src.replace('_off.', '_on.'));
					this.rightTrg.getParent().setStyle('cursor', 'pointer');
					this.leftTrg.setProperty('src', this.leftTrg.src.replace('_on.', '_off.'));
					this.leftTrg.getParent().setStyle('cursor', 'default');
				}
				else 
					if (this.atEnd) {
						this.leftTrg.setProperty('src', this.leftTrg.src.replace('_off.', '_on.'));
						this.leftTrg.getParent().setStyle('cursor', 'pointer');
						this.rightTrg.setProperty('src', this.rightTrg.src.replace('_on.', '_off.'));
						this.rightTrg.getParent().setStyle('cursor', 'default');
					}
					else {
						this.rightTrg.setProperty('src', this.rightTrg.src.replace('_off.', '_on.'));
						this.rightTrg.getParent().setStyle('cursor', 'pointer');
						this.leftTrg.setProperty('src', this.leftTrg.src.replace('_off.', '_on.'));
						this.leftTrg.getParent().setStyle('cursor', 'pointer');
					}
			} else {
				this.leftTrg.getParent().setStyle('cursor', 'pointer');
			}
		}
		
		if (this.previousTrg || this.currentTrg) {
			this.previousTrg.removeClass('hsb_iv_trg_on');
			this.previousTrg.getParent().setStyle('cursor', 'pointer');
			this.currentTrg.addClass('hsb_iv_trg_on');
			this.currentTrg.getParent().setStyle('cursor', 'default');
			
			if (this.previousTrg.getTag() == 'img') 
				this.previousTrg.setProperty('src', this.previousTrg.src.replace('_on.', '_off.'));
			if (this.currentTrg.getTag() == 'img') 
				this.currentTrg.setProperty('src', this.currentTrg.src.replace('_off.', '_on.'));
		}
	},
	autoplay : function () {
		if (this.atEnd && !this.options.autoPlay.loop) return false;
		this.increment();
		this.show(this.idx);
	}
});
Hasbro.ImageView.implement(new Options);
Hasbro.ImageView.implement(new Events);

Hasbro.ImageView.Slide = new Class ({
	initialize : function (el) {
		this.container = $(el);
		this.slide = this.container.getElement('ul');
		this.items = this.container.getElements('li');
		this.rightArrow = this.container.getElement('.hsb_iv_right_arr');
		this.leftArrow = this.container.getElement('.hsb_iv_left_arr');
		this.displayAmount = 5;
		this.startIdx = 0;
		this.endIdx = this.items.length - this.displayAmount;
		this.currentIdx = this.startIdx;
		this.position = this.slide.getStyle('left').toInt();
		this.inProgress = false;
		
		
		this.slideAmount = this.items[0].getStyle('width').toInt();
		this.slideAmount += this.items[0].getStyle('margin-right').toInt();
		
		this.leftArrow.getParent().setStyle('cursor', 'default');
		
		this.rightArrow.addEvent('click', function() {
			if (this.inProgress == false) this._moveRight();
		}.bind(this));
		this.leftArrow.addEvent('click', function() {
			if (this.inProgress == false) this._moveLeft();
		}.bind(this));
	},
	_moveRight : function () {
		this.position = this.slide.getStyle('left').toInt();
		if (this.currentIdx != this.endIdx) {
			this.effect = this._doEffect(this.slide);
			this.effect.start({
				'left': this.position - this.slideAmount
			});
			this.currentIdx++;
			if (this.currentIdx == this.endIdx) 
				this.rightArrow.getParent().setStyle('cursor', 'default');
			else {
				this.rightArrow.getParent().setStyle('cursor', 'pointer');
				this.leftArrow.getParent().setStyle('cursor', 'pointer');
			}
		}
	},
	_moveLeft : function () {
		this.position = this.slide.getStyle('left').toInt();
		if (this.currentIdx != this.startIdx) {
			this.effect = this._doEffect(this.slide);
			this.effect.start({'left' : this.position + this.slideAmount});
			this.currentIdx--;
			if (this.currentIdx == this.startIdx) 
				this.leftArrow.getParent().setStyle('cursor', 'default');
			else {
				this.rightArrow.getParent().setStyle('cursor', 'pointer');
				this.leftArrow.getParent().setStyle('cursor', 'pointer');
			}
		}
	},
	_doEffect : function (slide) {
		return slide.effects({ wait: true, duration: 500, transition: Fx.Transitions.Cubic.easeInOut,
			onStart : function () {
				this.inProgress = true;
			}.bind(this),
			onComplete : function () {
				this.inProgress = false;
			}.bind(this)
		});
	}
});
Hasbro.ImageView.Slide.implement(new Events);