///////////////////////////////////// Functions used on posters page /////////////////////////////////////////
//Poster object
function poster(title, webURL){
	this.title=title;
	this.src=webURL;
}

function nextPoster(currID){
	var nextID = 0;
	if(currID == posterArray.length - 1){ // at the end of the line, loop to front
		nextID = 1;
	}
	else{ // keep going forward
		nextID = parseInt(currID)+1; 
	}
	 
	changePosterElements(nextID);
	//set current tracker as inactive:
	setInactiveTracker(currID);
}

function prevPoster(currID){
	var nextID = 0;
	if (currID == 1) { //wrap around to last poster
		nextID = posterArray.length-1;
	}
	else{ //go backward
		nextID = parseInt(currID)-1; 
	}
	changePosterElements(nextID);
	//set current tracker as inactive:
	setInactiveTracker(currID);
}

function changePosterElements(nextID){
	//Change both links,
	changeLinkIds(nextID);
	//Change img reference
	document.getElementById("posterImg").src=posterArray[nextID].src;
	
	//change the product info
	setProductInfo(nextID);
	
	//set tracker as active
	setActiveTracker(nextID);
}

function changeLinkIds(nextID){
	var arrowLinks=document.getElementsByName("arrowLink");
	arrowLinks[0].id = nextID;
	arrowLinks[1].id = nextID;
}

//Changes the value of the product for Google Cart
function setProductInfo(id){
	if (posterArray[id].title == "SOLD_OUT"){
		document.getElementById("posters-button").style.display="none";
		document.getElementById("price").style.display="none";
		document.getElementById("soldOut").style.display="block";
	}
	else { 
		document.getElementById("posters-button").style.display="block";
		document.getElementById("price").style.display="block";
		document.getElementById("soldOut").style.display="none";
	} 
	document.getElementById("posterName").value=posterArray[id].title;
}

function setActiveTracker(id){
    //buttons = document.getElementsByName("tracker-button");
	buttons = getElementsByName_iefix("li","tracker-button");
    buttons[id-1].className = "active";
}
function setInactiveTracker(id){
    //buttons = document.getElementsByName("tracker-button");
	buttons = getElementsByName_iefix("li","tracker-button");
	buttons[id-1].className = "inactive";
}

function setImage(id){
	setInactive = -1;
	//buttons = document.getElementsByName("tracker-button");
	buttons = getElementsByName_iefix("li","tracker-button");
	for (i in buttons){
		if (buttons[i].className == "active"){
		  setInactive = parseInt(i) + 1;
		}
	}
	
	setInactiveTracker(setInactive);
	changePosterElements(id);
}

function getElementsByName_iefix(tag, name) {
     
     var elem = document.getElementsByTagName(tag);
     var arr = new Array();
     for(i = 0,iarr = 0; i < elem.length; i++) {
          att = elem[i].getAttribute("name");
          if(att == name) {
               arr[iarr] = elem[i];
               iarr++;
          }
     }
     return arr;
}

////////////////////////////////////////// Functions used on shirts page

function next(scrollerObj, currentId){
	var next = 0;
	if(currentId == scrollerObj.thumbnails.length - 1){ // at the end of the line, loop to front
		next = 1;
	}
	else{ // keep going forward
		next = parseInt(currentId)+1; 
	}
	 
	changeScrollerElements(scrollerObj, next);
}


function prev(scrollerObj, currentId){
	var next = 0;
	if (currentId == 1) { //wrap around to last poster
		next = (scrollerObj.thumbnails.length) - 1;
	}
	else{ //go backward
		next = parseInt(currentId)-1; 
	}
	
	changeScrollerElements(scrollerObj, next);
	}
	
function changeScrollerElements(scrollerObj, nextID){
	//change shirt pic
	var scroller = document.getElementById(scrollerObj.id);
	var picTag = scroller.getElementsByTagName("img")[0];	
	picTag.src = scrollerObj.thumbnails[nextID];//next img "images/store/shirtsThumbnail.jpg";
	picTag.onclick = function(){popupSrc(scrollerObj.popups[nextID]);} // set popup img

	//change both scroll arrow Ids
	var divs = scroller.getElementsByTagName("div")
	divs[1].getElementsByTagName("a")[0].id=nextID;//set left arrow
	divs[1].getElementsByTagName("a")[1].id=nextID;//set right arrow
	
	//Change title
	var title = scrollerObj.titles[nextID];
	divs[0].innerHTML=title;
	
	//change name of product for google cart button
	//This is silly and fragile, requires the frist div in the <product> div to be the button.
	googleTitle = divs[2].getElementsByTagName("input")[0];
	googleTitle.value = title;


	//Remove old out sizes
	adjustSizes(scrollerObj, scroller, nextID);

}

function adjustSizes(scrollerObj, scroller, nextID){

	//Set the options based on shirt sizes.
	var sizes = scrollerObj.sizes[nextID].split(",");
	var select = scroller.getElementsByTagName("div")[2].getElementsByTagName("div")[1]; //stupid IE - the select div might change :((((

	select.innerHTML = ""; //empty current options
	var currentOptions = select.innerHTML;
	var options = "";
	for (s in sizes){
		var opt = "<option value=\""+sizes[s]+"\">"+ sizes[s]+"</option>";//alert("adding"+setOptions);
		options = options+opt;
	}
	select.innerHTML = "<select class=\"product-attr-custom\">"+options+"</select>";

}

function showWhy(){
	document.getElementById("why-blurb").style.visibility="visible";
}

function hideWhy(){
	document.getElementById("why-blurb").style.visibility="hidden";
}



/////////////////////////////////////functions used on multiple pages
//Loads img src into light box. 
function popupSrc(imgSrc){
		document.getElementById("popup").style.height="75%";
		document.getElementById("popup").style.width="40%"; //width set to 40% until image loads
		document.getElementById("popup-img").style.height="100%";
		document.getElementById("popup-img").style.width="100%"; //set width until image loads
		document.getElementById("popup-img").innerHTML="<img id=\"popup-img-tag\" onload=showPopup(); style=\"height:100%; width:auto; display:none;\" src=\""+imgSrc+"\"><div id=\"loading\" \">Loading ....</div>";
		document.getElementById("popup").style.display="block";
		document.getElementById("fade").style.display="block";
	}

function showPopup(){	
	document.getElementById("popup-img-tag").style.display="block";
		
	var imgWidth = document.getElementById("popup-img-tag").offsetWidth;
	document.getElementById("popup").style.width="";
	document.getElementById("popup-img").style.width=imgWidth+"px";
	document.getElementById("loading").style.display="none";

}

function closePopup(){
	document.getElementById("popup").style.display="none";
	document.getElementById("fade").style.display="none";
}