var Products = new Class({
	productArray:null,
	slider:null,
	sliderBg:null,
	sliderDirection:null,
	sliderInterval:null,
	categoryArray:null,
	categoryWidth:null,
	productBrowserWidth:null,
	dynamicID:null,
	dynamicCategory:null,
	dynamicProduct:null,
	dynamicIndex:null,
	loadTimer:null,
	productLoadTimer:null,
	newImageSrc:null,
	defaultCategory:true,
	animateBrowser:null,
	initialize:function(a) {
		Products.productArray = a;
		Products.productBrowserWidth = 0;
		Products.categoryArray = [];
		for (var i = 0; i < Products.productArray.length; i++) {
			var rel = Products.productArray[i].getAttribute("rel");
			var category = rel.split("|")[0];
			
			var dynamicItems = rel.split("|")[1];
			var shortCategory = dynamicItems.split("/")[0];
			var shortName = dynamicItems.split("/")[1];
			
			if (shortCategory == Products.dynamicCategory && shortName == Products.dynamicProduct) {
				Products.dynamicIndex = i;
				Products.productArray[i].getElement("a").onclick();
			}		
		}
		
		// set up a timer to check image loading completeness
		this.loadTimer = this.imageLoaded.periodical(1000, this);
		
		this.slider = $$("#allproducts div.bar div.slider")[0];
		this.sliderBg = $$("#allproducts div.bar div.sliderBg")[0];
		var container = $$("#allproducts div.bar")[0];
		var arrowLeft = $$("#allproducts div.bar a.left")[0];
		var arrowRight = $$("#allproducts div.bar a.right")[0];
		
		var d = new Drag.Move(this.slider, {container:container,onDrag:this.sliderDrag.bind(this)});
		
		arrowLeft.addEvent("mouseenter",this.arrowOver.bind(this));
		arrowLeft.addEvent("mouseleave",this.arrowOut.bind(this));
		arrowLeft.addEvent("mousedown",this.arrowPress.bind(this));
		arrowLeft.addEvent("mouseup",this.arrowRelease.bind(this));
		arrowLeft.setOpacity(0);
		arrowRight.addEvent("mouseenter",this.arrowOver.bind(this));
		arrowRight.addEvent("mouseleave",this.arrowOut.bind(this));
		arrowRight.addEvent("mousedown",this.arrowPress.bind(this));
		arrowRight.addEvent("mouseup",this.arrowRelease.bind(this));
		arrowRight.setOpacity(0);
	},
	imageLoaded:function() {
		var productImageLoadCount = 0;
		for (var i = 0; i < Products.productArray.length; i++) {
			if (Products.productArray[i].getElement("img").complete) {
				productImageLoadCount++;
			}
		}
		
		if (productImageLoadCount >= Products.productArray.length) {
			$clear(this.loadTimer);
			
			Products.categoryArray = [];
			Products.productBrowserWidth = 0;
			for (var i = 0; i < Products.productArray.length; i++) {
				var rel = Products.productArray[i].getAttribute("rel");
				var category = rel.split("|")[0];
				var img = Products.productArray[i].getElement("img");
				var imgWidth = (img.offsetWidth > 85) ? img.offsetWidth : 85;
				var imgHeight = img.offsetHeight;
				img.style.marginTop = (159 - imgHeight) + "px";
				Products.productArray[i].style.width = imgWidth + "px";				
				
				if (Products.categoryArray[category] == undefined) {
					Products.categoryArray[category] = 0;
				}
				Products.categoryArray[category] += imgWidth + 20;
				Products.productBrowserWidth += imgWidth + 20;
			}
			
			$$("#allproducts ul")[0].style.width = Products.productBrowserWidth + "px";
			
			while($$("#allproducts div.bar div.categories")[0].childNodes.length > 0) {
				$$("#allproducts div.bar div.categories")[0].removeChild($$("#allproducts div.bar div.categories")[0].childNodes[0]);
			}
			var defaultCategoryPosition = 0;
			var defaultCategoryWidth = 0;
			var defaultCategoryFound = false;
			for (var ele in Products.categoryArray) {
				if (Products.categoryArray[ele] > 0) {
  					var cWidth =  Math.floor((Products.categoryArray[ele] / Products.productBrowserWidth) * ($$("#allproducts div.bar div.slider")[0].parentNode.offsetWidth - 52));
					if (Products.dynamicCategory == ele.toLowerCase().split(" ").join("")) {
						defaultCategoryFound = true;
					}
					if (defaultCategoryFound == false) {
						defaultCategoryPosition += cWidth;
					}
					if (Products.dynamicCategory == ele.toLowerCase().split(" ").join("")) {
						defaultCategoryWidth = cWidth;
					}
					var categoryLabel = new Element( 'div', { 'class':'category' }).injectInside($$("#allproducts div.bar div.categories")[0]);
					categoryLabel.style.width = cWidth + "px";
					categoryLabel.innerHTML = ele;
				}
			}
			this.slider.style.left = (defaultCategoryPosition + parseInt((defaultCategoryWidth - this.slider.offsetWidth) / 2)) + "px";
			this.sliderDrag(this.slider);
		}	
	},
	sliderDrag:function(e) {
		var totalWidth = e.parentNode.offsetWidth - e.offsetWidth - 52;
		var currentPosition = parseInt(e.style.left);
		var percent = currentPosition / totalWidth;
	 	var newPosition = ((920 - $$("#allproducts ul")[0].offsetWidth) * percent) + "px";
		if (this.defaultCategory == true) {
			this.defaultCategory = false;
			var morphObject = new Fx.Morph($$("#allproducts ul")[0]);
			morphObject.start({
				'margin-left':newPosition,
				transition:'quad:in'
			});
		} else {
			$$("#allproducts ul")[0].style.marginLeft = newPosition;
		}
		this.sliderBg.style.left = this.slider.style.left;
	},
	arrowOver:function(e) {
		e.target.parentNode.setOpacity(1);
	},
	arrowOut:function(e) {
		this.sliderInterval = $clear(this.sliderInterval);
		e.target.parentNode.setOpacity(0);
	},
	arrowPress:function(e) {
		if (e.target.parentNode.hasClass("left")) {
			this.sliderDirection = -1;
		} else {
			this.sliderDirection = 1;
		}
		// start timer
		if (!$chk(this.sliderInterval)) {
			this.sliderInterval = this.sliderMove.periodical(20, this);
		}
	},
	arrowRelease:function(e) {
		// clear timer
		this.sliderInterval = $clear(this.sliderInterval);
	},
	sliderMove:function() {
		var maxLeft = (this.slider.parentNode.offsetWidth - this.slider.offsetWidth - 52);
		var sliderLeft = parseInt(this.slider.style.left);
		if (isNaN(sliderLeft)) sliderLeft = 0;
		sliderLeft = sliderLeft + (this.sliderDirection * 2);
		if (sliderLeft < 0) sliderLeft = 0;
		if (sliderLeft > maxLeft) sliderLeft = maxLeft;
		this.slider.style.left = sliderLeft + "px";
		this.sliderDrag(this.slider);
	}
});

function getProduct(id, category, shortname) {
	Products.dynamicID = id;
	
	for (var i = 0; i < Products.productArray.length; i++) {
		var rel = Products.productArray[i].getAttribute("rel");
		
		var dynamicItems = rel.split("|")[1];
		var shortCategory = dynamicItems.split("/")[0];
		var shortName = dynamicItems.split("/")[1];
		
		if (shortCategory == category && shortName == shortname) {
			Products.dynamicIndex = i;
			break;
		}
	}
	
	window.location.hash = "/" + category + "/" + shortname;
	
	// tracking
	urchinTracker("/products/" + category + "/" + shortname);
	
	// fade down value
	var morphObject2 = new Fx.Morph($("productimage"));

	morphObject2.start({
		'opacity':0
	});
	
	morphObject2.onComplete = function(){
		$("productimage").getElement("img").style.marginLeft = '920px';
		getProductData(Products.dynamicID);
	}

	return false;
}

function getProductData(id) {
	var req = new Request({
		method: 'get',
		url: "/product-lookup.php",
		data: { 'product' : id },
		onComplete:productLoaded
	}).send();
}

function productLoaded(response) {
	var productObject = JSON.decode(response);
	
	// replace image
	Products.newImageSrc = "/img/products/" + productObject.image;
	if ($$('body')[0].className.indexOf("ie") >= 0) {
		$("productimage").getElement("img").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + Products.newImageSrc + "',sizingMethod='scale')";
		if ($("productimage").getElement("img").src != "/img/blank.gif") {
			$("productimage").getElement("img").src = "/img/blank.gif";
		}
	} else {
		$("productimage").getElement("img").parentNode.removeChild($("productimage").getElement("img"));
		var imgEle = new Element('img').inject($("productimage"), 'top');
		$("productimage").getElement("img").src = Products.newImageSrc;
	}
	$clear(Products.productLoadTimer);
	Products.productLoadTimer = productImageLoaded.periodical(250);
	
	// replace other product content
	$("productinfo").getElement("h2").parentNode.removeChild($("productinfo").getElement("h2"));
	var h2Ele = new Element('h2').inject($("productinfo"), 'top');
	h2Ele.innerHTML = productObject.name;
	$("productinfo").getElement("span.info").innerHTML = productObject.blurb + "<br /><br />" + productObject.desc;
	if (productObject.nutrition != "") {
		$$("#productinfo div.button")[0].style.display = "block";
	} else {
		$$("#productinfo div.button")[0].style.display = "none";
	}
	$("productinfo").getElement("div#nutrition").innerHTML = "<h3>" + String(productObject.name).split("<br />").join(" ") + "</h3>" + productObject.nutrition;
	if (productObject.ingredients != "") {
		$$("#productinfo div.button")[1].style.display = "block";
	} else {
		$$("#productinfo div.button")[1].style.display = "none";
	}
	$("productinfo").getElement("div#ingredients").innerHTML = "<h3>" + String(productObject.name).split("<br />").join(" ") + "</h3><p><b>Ingredients:</b></p>" + productObject.ingredients;
	sIFR.replace(futura, {selector: 'h3', css:'.sIFR-root{color:#a07c4d;}',wmode:'transparent',selectable:'false'});    
	sIFR.replace(futura, {selector:'h2',css:'.sIFR-root{color:#ffffff;text-transform:uppercase;}',wmode:'transparent',selectable:'false',filters:{DropShadow:{distance:2,color:'#80561b',strength:2}}});
}

function productImageLoaded() {
	if ($("productimage").getElement("img").complete == true) {
		$clear(Products.productLoadTimer);
		var morphObject2 = new Fx.Morph($("productimage"));
	
		$("productinfo").set('opacity', 1);
		morphObject2.set({'opacity':0});
		$("productimage").getElement("img").style.marginLeft = "0px";
		morphObject2.start({
			'opacity':1
		});
	}
	
}


var ProductArrow = new Class({
	arrowElement:null,
	arrowImageElement:null,
	initialize:function(a) {
		this.arrowElement = a;
		if (!a.hasClass("active")) {
			this.arrowImageElement = a.getElement("img");
			a.addEvent("mouseenter",this.hoverOn.bind(this));
			a.addEvent("mouseleave",this.hoverOff.bind(this));
			a.addEvent("click",this.arrowClicked.bind(this));
		}
	},
	hoverOn:function() {
		PNGSrc.replace(this.arrowImageElement, "-off", "-on");
	},
	hoverOff:function() {
		PNGSrc.replace(this.arrowImageElement, "-on", "-off");
	},
	arrowClicked:function(e) {
		var parentClass = e.target.parentNode.parentNode.className;
		var index;
		if (parentClass.indexOf("left") >= 0) {
			index = Products.dynamicIndex - 1;
			if (index < 0) index = Products.productArray.length - 1;
		} else {
			index = Products.dynamicIndex + 1;
			if (index >= Products.productArray.length) index = 0;
		}
		Products.dynamicIndex = index;
		Products.productArray[index].getElement("a").onclick();
	}
});

var PageOverlay = new Class({
	overlayElement:null,
	overlayBox:null,
	overlayBg:null,
	initialize:function(a) {
		// create element, create background element, set bg alpha to 54%, add interface
		this.overlayElement = $$(a)[0];
		this.overlayBox = new Element( 'div', { 'id':'overlay' }).injectInside($$('body')[0]);
		this.overlayBg = new Element('div', {'class':'bg'}).injectInside(this.overlayBox);
		var d = detectMacXFF2();
		if (d) {
			this.overlayBg.style.background = "Transparent url(../img/bg-overlay.png) repeat";
		} else {
			this.overlayBg.set('opacity', 0.54);
		}
		this.overlayBg.addEvent("click",this.dismissOverlay.bind(this));
		this.overlayContent = new Element('div', {'class':'content'}).injectInside(this.overlayBox);
		this.overlayTop = new Element('div', {'class':'top'}).injectInside(this.overlayContent);
		this.overlayClose = new Element('div', {'class':'close'}).injectInside(this.overlayTop);
		this.overlayClose.addEvent("click",this.dismissOverlay.bind(this));
		this.overlayMain = new Element('div', {'class':'main'}).injectInside(this.overlayContent);
		this.overlayBottom = new Element('div', {'class':'bottom'}).injectInside(this.overlayContent);
		this.overlayMain.innerHTML = this.overlayElement.innerHTML;
		this.overlayContent.style.left = parseInt((Window.getWidth() - this.overlayContent.offsetWidth + 30) / 2) + "px";
		var otPosition = parseInt(($$('#content')[0].getHeight() - this.overlayContent.offsetHeight) / 2);
		otPosition = (otPosition < -65) ? -65 : otPosition;
		this.overlayContent.style.top = otPosition + "px";
		sIFR.replace(futura, {selector: 'h3', css:'.sIFR-root{color:#a07c4d;}',wmode:'transparent',selectable:'false'});
		window.addEvent("resize", this.repositionOverlay.bind(this));
	},
	dismissOverlay:function() {
		this.overlayBox.parentNode.removeChild(this.overlayBox);
	},
	repositionOverlay:function() {
		this.overlayContent.style.left = parseInt((Window.getWidth() - this.overlayContent.offsetWidth + 30) / 2) + "px";
		var otPosition = parseInt(($$('#content')[0].getHeight() - this.overlayContent.offsetHeight) / 2);
		otPosition = (otPosition < -65) ? -65 : otPosition;
		this.overlayContent.style.top = otPosition + "px";
	}
});

function detectMacXFF2() {
  var userAgent = navigator.userAgent.toLowerCase();
  if (/firefox[\/\s](\d+\.\d+)/.test(userAgent)) {
    var ffversion = new Number(RegExp.$1);
    if (ffversion < 3 && userAgent.indexOf('mac') != -1) {
      return true;
    }
  }
}

function initProducts() {
	var productArrows = $$("#productnav .arrow");
	for (var i = 0; i < productArrows.length; i++) {
		new ProductArrow(productArrows[i]);
	}

	$("productinfo").set('opacity', 0);
	$("productimage").set('opacity', 0);
	if (window.location.hash != "") {	
		Products.dynamicCategory = String(window.location.hash).split("/")[1];
		Products.dynamicProduct = String(window.location.hash).split("/")[2];
	} else {
		if ($("productinfo").getElement("h2").innerHTML == "") {
			Products.dynamicCategory = "minidelights";
			Products.dynamicProduct = "chocolatey";
		}
	}
	$("productinfo").style.visibility = "visible";
	$("productimage").style.visibility = "visible";

	new Products($$("#allproducts ul li"));
}

window.addEvent("domready", initProducts);