var SlideShow = Class.create({
	initialize : function (initial, container, contents, delay, options) {
		this.initial = initial;
		this.container = container;
		this.contents = contents;
		this.delay = delay;
		this.fadeDuration = 0.5;
		this.showOnly(this.contents[this.initial]);
		this.current = initial;
		this.show = null;
		this.hide = null;
		
		
		this.start();
	},
	start : function () {
		if (this.timer) { 
			return;
		}
		this.timer = setTimeout(this.next.bind(this), this.delay * 1000);
	},
	showOnly : function (el) {
		this.contents.invoke('hide');
		el.show();
	},
	pause : function () {
		if (this.timer) {
			clearTimeout(this.timer);
			this.timer = false;
		}
		if (this.hide) {
			this.hide.cancel();
		}
		else {
			return;
		}
	},
	back: function (ev) {
		if (this.show) {
			this.show.cancel();
			return;
		}	
		if (this.hide) {
			this.hide.cancel();
			return;
		}	

		this.pause(); 
		if (this.current === 0) {
			this.goTo(this.contents.length - 1);
		}
		else {
			this.goTo(this.current - 1);
		}
		ev.stop(); 
	},
	forward: function (ev) {
		if (this.show) {
			this.show.cancel();
			return;
		}	
		if (this.hide) {
			this.hide.cancel();
			return;
		}	
		
		this.pause();
		this.next();
		ev.stop(); 
	}, 
	next: function () {
		this.timer = false;
		if (this.current === this.contents.length - 1) {
			this.goTo(0);
		}
		else {
			this.goTo(this.current + 1);
		}
		this.start();
	},	
	goTo: function (idx, dur) {
		if (idx === this.current) { 
			return;
		}
		this.hide = new Effect.Fade(this.contents[this.current], { duration: this.fadeDuration || 2, afterFinish: function () {
			this.hide = null;
		}.bind(this)});
		
		if (this.buttons) {
			this.buttons[this.current].removeClassName('active');
		}
		
		this.current = idx;
		this.show = new Effect.Appear(this.contents[this.current], { duration: this.fadeDuration || 2, afterFinish: function () {
			this.show = null; 
		}.bind(this)});
		
		if (this.buttons) {
			this.buttons[this.current].addClassName('active');
			this.start();
		}
	}
});

var MegaDropControl = Class.create({
	initialize: function(container) {
		this.container = $(container);
		this.togglers  = this.container.select('li.level0');
		this.setup();
	},
	setup: function() {
		this.togglers.each(function(el, tab) {
			new HoverDelay(el,{
				delay   : 0.4,
				enterCb: this.show.bind(this, tab),
				leaveCb: this.hide.bind(this, tab)
			});
			

		}.bind(this));
	},
	
	show: function(tab) {
		this.togglers.invoke('removeClassName', 'over');
		
		this.togglers[tab].addClassName('over');
		
		this.dark_txt(tab);
	},
	hide: function(event, tab) {
		this.togglers.invoke('removeClassName', 'over');
		this.togglers.each(function(el, t) {
			this.white_txt(t);
		}.bind(this));
	},
	white_txt: function(tab) {
		Cufon.replace(this.togglers[tab].down('span'), {
			color: '#fff'
		});
	},
	dark_txt: function(tab) {
		Cufon.replace(this.togglers[tab].down('span'), {
			color: '#5d4120'
		});
	}
});

var Zoomify = Class.create({
	// Should support a product image, a zoom image and a view box of any size or position on page
	initialize: function(container) {
		// Identify containers
		this.container = container;
		this.productImage = this.container.down('.product-image'); 
		this.box = this.container.down('.zoom_box'); 
		this.zoomImage = this.box.down('.zoom_image');
		this.magnify_box = $('magnify');
		
		// Reusable Calculations
		
		var prodDim = {width: 265, height: 265};
		var zoomDim = {width: 800, height: 800};
		var boxDim = {width: 265, height: 265};
		var magboxDim = {width: 73, height: 68};
		
		this.widthRatio = zoomDim.width / prodDim.width;
		this.heightRatio = zoomDim.height / prodDim.height;
		this.zoomBoxOffsetY = boxDim.height / this.heightRatio * 0.5;
		this.zoomBoxOffsetX = boxDim.width / this.widthRatio * 0.5;
		this.wrapOffset = this.productImage.cumulativeOffset();
		this.rightConstraint = prodDim.width - magboxDim.width;
		this.bottomConstraint = prodDim.height - magboxDim.height;
		
		// Observe mousemove over our product image
		this.setup();
	},
	setup: function() {
		new HoverDelay(this.productImage,{
			delay   : 0.4,
			enterCb: this.show.bind(this),
			leaveCb: this.hide.bind(this)
		});
		
		this.productImage.observe('mousemove', this.onMouseOverProductImage.bind(this));
	},
	show: function(ev) {
		this.box.style.visibility = "visible";
		this.magnify_box.show();
	},
	hide: function(ev) {
		this.box.style.visibility = "hidden";
		this.magnify_box.hide();
	},
	magnify: function(pointer) {
		//Constrain the box
        var top = Math.min(
                    Math.max(pointer[1]-65, this.wrapOffset[1]), 
                    this.wrapOffset[1]+this.bottomConstraint);
		
        var left = Math.min(
                    Math.max(pointer[0]-60, this.wrapOffset[0]), 
                    this.wrapOffset[0]+this.rightConstraint);

		this.magnify_box.setStyle({'top':top+'px','left':left+'px'});
		return [left, top];
	},
	onMouseOverProductImage: function(ev) {
		var pointer = this.magnify([Event.pointerX(ev), Event.pointerY(ev)]);

		// Account for the position of the product image on the page, and the dimensions of the zoom view box
		xpos = pointer[0] - this.wrapOffset[0]; // - this.zoomBoxOffsetX;
		ypos = pointer[1] -  this.wrapOffset[1]; //  - this.zoomBoxOffsetY;
		
		// Move the zoom image into position within zoom view box according to the ratio of zoom to product image dimension
		leftOffset = -1 * this.widthRatio * xpos;
		topOffset = -1 * this.heightRatio * ypos;
		this.zoomImage.style.left = leftOffset + "px";
		this.zoomImage.style.top = topOffset + "px";
	}
});

var HoverDelay = Class.create({
	initialize : function(trigger, options){
		this.options = Object.extend({enterCb : function(){},	leaveCb : function(){},	delay : 0.5}, options || {});
		this.trigger = $(trigger);
		this.timeout = null; this.active = false;
		this.setup();
	},
	setup : function(){
		var eEvt = this.open.bindAsEventListener(this);
		var lEvt = this.close.bindAsEventListener(this);
		this.trigger.observe('mouseenter', eEvt);
		this.trigger.observe('mouseleave', lEvt);
		this.trigger.observe('hoverdelay:stop', function(){
			this.trigger.stopObserving('mouseenter', eEvt);
			this.trigger.stopObserving('mouseleave', lEvt);
		}.bind(this));
		/*
		document.observe('pop:active', function(){this.inactive=true;}.bind(this));
		document.observe('pop:inactive', function(){this.inactive=false;}.bind(this));
		*/
	}, 
	open : function(event){
		if (this.inactive) return;
		this.timeout = (function(){
			this.trigger.addClassName("active");
			this.options.enterCb.bind(this)();
			this.active = true;
		}).bind(this).delay(this.options.delay);
	},
	close : function(){
		if (this.inactive) return;
		if (this.timeout) {
			window.clearTimeout(this.timeout);
			this.timeout = null;
		}
		if (this.active){
			this.options.leaveCb.bind(this)();
			this.active = false;
			this.trigger.removeClassName("active");
		}
	}
});



document.observe('dom:loaded', function(){
	
	var megaDropNav = new MegaDropControl($('nav'));

	if($$('.banners')[0])
	{
		var slideShow = new SlideShow(0, $$('.banners')[0], $$('.banners .banner'), 6);
	}
	if($$('.product-img-box')[0])
	{
		// var zoomify = new Zoomify($$('.product-img-box')[0]);
	}
	
});