/*
 * 	sunKING.Sliding.Gallery - Sliding with jQuery
 *  http://www.sunkingdigital.com
 *
 * Dual licensed under the MIT (MIT-LICENSE.txt)
 * and GPL (GPL-LICENSE.txt) licenses.
 *
 * Built on top of the jQuery library with the interface plugin for animation
 * http://jquery.com
 *
 *
 */
this.catagory = "ks";
this.displayAmt = "3";

var xmlhttp;
var xmlDoc;
function loadXMLDoc(theFile) {
  xmlhttp=null;
  if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } 
  else if (window.ActiveXObject) { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }

  if (xmlhttp!=null) {
    xmlhttp.onreadystatechange=loaded;
    xmlhttp.open("GET",theFile,true);
    xmlhttp.send(null);
  } else { alert('Sorry, your browser can\'t handle this script'); return; }
}

function checkReadyState(obj) {
  if(obj.readyState == 4) {
    if(obj.status == 200) { return true; }
    else { alert("Problem retrieving XML data"); }
  }
}

function loaded() {	
  if(checkReadyState(xmlhttp)) {
    xmlDoc=xmlhttp.responseXML.documentElement;
	removeAllElement();
  }
}

function removeAllElement() {
		var mainDiv = document.getElementById("burner");
		var childDiv =  document.getElementById("buttonToggle");
		mainDiv.removeChild(childDiv);
		
		var ni = document.getElementById('burner');

		var newdiv = document.createElement('div');
		newdiv.setAttribute('id','buttonToggle');
		newdiv.className="slidingGalleryContainer";
		ni.appendChild(newdiv);
		
		var ni2 = document.getElementById('buttonToggle');
		
		var newdiv2 = document.createElement('div');
		newdiv2.setAttribute('id','productSort');
		newdiv2.className="panels";
		ni2.appendChild(newdiv2);
		
		this.showTags('product','productSort');
}

function showTags(theTag,thePlace) {
  function getTag(tag) { 
    var tmp='';
    xx=x[i].getElementsByTagName(tag);
	
    try { tmp=xx[0].firstChild.data; } 
    catch(er) { tmp=''; }    
    return(tmp); 
  }

  var xx; var x; var txt;
  x = xmlDoc.getElementsByTagName(theTag);
  txt='<div id="poop">'; 
  for (i=0; i<x.length; i++) { 
  
  	productName=xmlDoc.getElementsByTagName("product")[i].getAttribute("name");
	heinzUrl=xmlDoc.getElementsByTagName("product")[i].getAttribute("url");
	productCatagory=xmlDoc.getElementsByTagName("product")[i].getAttribute("cat");
	image=xmlDoc.getElementsByTagName("product")[i].getAttribute("globalimage"); 
	
	runProductHome=xmlDoc.getElementsByTagName("product")[i].getAttribute("popular");
	if(runProductHome == "yes") {
	switch (catagory) {
		case "ks":
			if(productCatagory == "KetchupAndSauces") {
			txt+='<div id="panel" class="panel" style="background-image:url(' + image + ');background-position:0px 0px;">';
			//txt+='<img src="' + image + '" class="productImg" align="left" alt="" />';
			txt+='<h2>' + productName + '</h2>';
			txt+='<p>'+getTag("description")+'</p>';
			txt+='<a class="productLink" href="/our-food/products/' + heinzUrl +'"></a>';
			txt+='</div>';
			};
			break;
		case "ms":
			if(productCatagory == "MealsAndSnacks" || productCatagory == "SoupsBeansAndPasta") {
			txt+='<div id="panel" class="panel" style="background-image:url(' + image + ');background-position:0px 0px;">';
			//txt+='<img src="' + image + '" class="productImg" align="left" alt="" />';
			txt+='<h2>' + productName + '</h2>';
			txt+='<p>'+getTag("description")+'</p>';
			txt+='<a class="productLink" href="/our-food/products/' + heinzUrl +'"></a>';
			txt+='</div>';
			};
			break;
		/*case "sbp":
			if(productCatagory == "SoupsBeansAndPasta") {
			txt+='<div id="panel" class="panel" style="background-image:url(' + image + ');background-position:0px 0px;">';
			//txt+='<img src="' + image + '" class="productImg" align="left" alt="" />';
			txt+='<h2>' + productName + '</h2>';
			txt+='<p>'+getTag("description")+'</p>';
			txt+='<a class="productLink" href="/our-food/products/' + heinzUrl +'"></a>';
			txt+='</div>';
			};
			break;*/
		case "inf":
			if(productCatagory == "InfantFoods") {
			txt+='<div id="panel" class="panel" style="background-image:url(' + image + ');background-position:0px 0px;">';
			//txt+='<img src="' + image + '" class="productImg" align="left" alt="" />';
			txt+='<h2>' + productName + '</h2>';
			txt+='<p>'+getTag("description")+'</p>';
			if(heinzUrl.match("http://")) {
				txt+='<a class="productLink" href="' + heinzUrl +'" target="_blank"></a>';
				}
				else {
				txt+='<a class="productLink" href="/our-food/products/' + heinzUrl +'"></a>';	
				}
			txt+='</div>';
			};
	}
  }
  }
  txt+="</div>";

  document.getElementById(thePlace).innerHTML=txt;
  this.slidingGallery.init();
}

var slidingGallery={
	init:function(){
		slidingGallery.Features.init();
	},
	Features:{
		init:function(){
			if(smartContent.panels.length > 0) {
				smartContent.panels.length = 0;
				smartContent.init($(".panels"));
			}
			else {smartContent.init($(".panels"));}
		}
	}
}

var smartContent={
	container:null,
	panels:Array(),
	init:function(container){
		smartContent.container=$(container);
		$('.panel',smartContent.container).each(
			function(i){
				var newPanel={};
				newPanel.element=this;
				newPanel.id=this.id;
				newPanel.index=i;
				smartContent.panels[i]=newPanel;
			}
		)
		smartContent.createToggles();
		smartContent.showPanel(smartContent.panels[0]);
	},
	removeElement:function(){
		var d = document.getElementById('productSort');
		var d_nested = document.getElementById('toggle');
		if (d_nested.parentNode == d) { d.removeChild(d_nested)};
		
		smartContent.createToggles();
		smartContent.showPanel(smartContent.panels[0]);
	},
		createToggles:function(){
		var smartContentParent=$(".slidingGalleryContainer")[0];
		var toggleBtnBarLeft=document.createElement("div");
		toggleBtnBarLeft.className="toggleButtonsLeft";
		toggleBtnBarLeft.setAttribute('id',"toggle");
		smartContentParent.appendChild(toggleBtnBarLeft);
		
		var toggleBtnBarRight=document.createElement("div");
		toggleBtnBarRight.className="toggleButtonsRight";
		toggleBtnBarRight.setAttribute('id',"toggle");
		smartContentParent.appendChild(toggleBtnBarRight);
		
		if (smartContent.panels.length <= displayAmt) {
			next=document.createElement("a");
			next.className="next";
	
			previous=document.createElement("a");
			previous.className="previous";
		}
		else {
			next=document.createElement("a");
			next.className="next";
			next.href="#next";
			$(next).click(function() {smartContent.showNextPanel(); return false;})
	
			previous=document.createElement("a");
			previous.className="previous";
			previous.href="#previous";
			$(previous).click(function() {smartContent.showPreviousPanel(); return false;})
	
			toggleBtnBarRight.appendChild(next);
			toggleBtnBarLeft.appendChild(previous);
		} // end else
	},
	showPanel:function(panel){
		var panelWidth = ($(".panel")[0].clientWidth);
		var panelIndex = panel.index;
		var l =panelWidth*panelIndex;
		
		smartContent.container.animate({left:"-"+l+"px"},'slow',"easeboth");
		smartContent.activePanelIndex=panel.index;
	},
	
	showNextPanel:function(){
		var bigContainer = ($(".slidingGalleryContainer")[0].clientWidth); //915
		var individualContainers = ($(".panel")[0].clientWidth); //275
		var traceEnd = bigContainer/individualContainers;
		if (smartContent.activePanelIndex<(smartContent.panels.length-[traceEnd])){
			nextIndex=smartContent.activePanelIndex+1;
		}
		else{
			nextIndex=0;
		}
		smartContent.showPanel(smartContent.panels[nextIndex]);
	},
	
	showPreviousPanel:function(panel){
		var traceStart = ($(".slidingGalleryContainer")[0].clientWidth)/($(".panel")[0].clientWidth);
		if (smartContent.activePanelIndex>(0)){
			nextIndex=smartContent.activePanelIndex-1;
		}else{
			nextIndex=smartContent.panels.length-displayAmt;
		}
		smartContent.showPanel(smartContent.panels[nextIndex]);
	}	
}

function setcatagory(val)
	{
		this.catagory = val;
		this.toggleDivs();
	};
	
	function toggleDivs()
	{
		$(".active").each(function(){$(this).removeClass("active")});
		this.removeAllElement();
		switch (catagory)
		{
			case "ks":
				document.getElementById('1').className = 'active';
				break;
			case "ms":
				document.getElementById('2').className = 'active';
				break;
			case "sbp":
				document.getElementById('3').className = 'active';
				break;
			case "inf":
				document.getElementById('4').className = 'active';
		}
	}
this.xmlFile = "../../data/products.xml";
window.onload=function(){
 loadXMLDoc(xmlFile);
}