/*
	
	Thankyou to www.hesido.com
	
*/

//  ------------------------------------------------------------------ Vars

var navNumLinks   = new Array();  // array of references to numbered links in navigation
var currentPane   = 0;            // pane currently being displayed
var nextPane;
var direction     = "left";

// start and end positions for image
var offScreenRightXPos = 477;
var onScreenXPos       = 0;
var offScreenLeftXPos  = -477;

// references to the two gallery image containing divs
var imgHolder1;
var imgHolder2;
var activeHolder;
var inactiveHolder;

// animation vars
var animSteps = 15;
var animPower = 2;
var animInterval = 15;

var autoScroll;
var autoScrollInterval = 5000;

var baseURL = "http://www.santaenergy.com";
//var baseURL = "..";

var navContent = 	"<ul id='gallery_nav'>\
						<li><a id='prev_pane_link' href='#'>&nbsp;</a></li>\
						<li><a class='active' id='numlink_pane_0' href='#'>1</a></li>\
						<li><a id='numlink_pane_1' href='#'>2</a></li>\
						<li><a id='numlink_pane_2' href='#'>3</a></li>\
						<li><a id='numlink_pane_3' href='#'>4</a></li>\
						<li><a id='numlink_pane_4' href='#'>5</a></li>\
						<li><a id='next_pane_link' href='#'>&nbsp;</a></li>\
					</ul>"


// initialization
//------------------------------------------------------------------ 

window.onload = initPage;

function initPage() {
	
	document.getElementById("nav_wrap").innerHTML = navContent;
	
	// get refs to all of the gallery's navigational links
	var navLinks = document.getElementById("gallery_nav").getElementsByTagName("a");
	
	// process the links from the gallery navigation
	for(var i = 0; i < navLinks.length; i++) {
		
		var navLink = navLinks[i];
		var linkId = navLink.id;
		
		// if link id contains 'numlink', process it. Ignore all others
		if(linkId.search("numlink") != -1) {
			
			// store reference for later
			navNumLinks.push(navLink);
			
			// set handler
			navLink.onclick = numLinkHandler;
			
			// if browser supports image object, preload the image
			if(document.images) {
				
				var imgURL = baseURL + "/images/home_gallery/" + linkId.replace("numlink_", "") + ".jpg";
				var preloadImg = new Image(477, 294);
				preloadImg.src = imgURL;
				
			}
			
		}
		
	}
	
	// get refs to img_holders
	imgHolder1 = document.getElementById("img_holder_1");
	imgHolder2 = document.getElementById("img_holder_2");
	
	activeHolder   = imgHolder1;
	inactiveHolder = imgHolder2;
	
	// set prev and next handlers
	var prevLink = document.getElementById("prev_pane_link");
	prevLink.onclick = prevLinkHandler;
	
	var nextLink = document.getElementById("next_pane_link");
	nextLink.onclick = nextLinkHandler;
	
	resetAutoScroll();
	
}

// link handlers
//------------------------------------------------------------------ 

function numLinkHandler() {
	
	nextPane = linkIdToPane(this.id);
	
	if(nextPane > currentPane) {
		
		direction = "left";
		
	} else {
		
		direction = "right";
		
	}
	
	getDetails();
	
	// keeps page from jumping
	return false;

}

function prevLinkHandler() {
	
	if(currentPane - 1 < 0) {
		
		nextPane = navNumLinks.length - 1;
		
	} else {
		
		nextPane = currentPane - 1;
		
	}
	
	direction = "right";
	
	getDetails();
	
	// keeps page from jumping
	return false;
	
}

function nextLinkHandler() {
	
	if(currentPane + 1 > navNumLinks.length - 1) {
		
		nextPane = 0;
		
	} else {
		
		nextPane = currentPane + 1;
		
	}
	
	direction = "left";
	
	getDetails();
	
	// keeps page from jumping
	return false;
	
}

// Top level functions(accessed usually by the handlers directly)
//------------------------------------------------------------------ 

function scrollImages(linkId, direction) {
	
	if(currentPane != nextPane) {
		
		updateImg(linkId);
		
		var activeHolderStartX;
		var activeHolderEndX;
		var inactiveHolderStartX;
		var inactiveHolderEndY;
		
		if(direction == "left") {
			
			// slide left
			activeHolderStartX   = onScreenXPos;
			activeHolderEndX     = offScreenLeftXPos;
			inactiveHolderStartX = offScreenRightXPos;
			inactiveHolderEndX   = onScreenXPos;
			
		} else if (direction == "right") {
			
			// slide right
			activeHolderStartX   = onScreenXPos;
			activeHolderEndX     = offScreenRightXPos;
			inactiveHolderStartX = offScreenLeftXPos;
			inactiveHolderEndX   = onScreenXPos;
			
		}
		
		slide(activeHolder, activeHolderStartX, activeHolderEndX, animSteps, animInterval, animPower);
		slide(inactiveHolder, inactiveHolderStartX, inactiveHolderEndX, animSteps, animInterval, animPower);
		
		// switch active/inactive status
		var tempHolder = activeHolder;
		activeHolder   = inactiveHolder;
		inactiveHolder = tempHolder;
		
	}
	
}

function resetAutoScroll() {
	
	clearInterval(autoScroll);
	autoScroll = setInterval("nextLinkHandler()", autoScrollInterval);
	
}

// Second Level Functions(accessed usually by the top level functions
//------------------------------------------------------------------ 

function updateImg(linkId) {
	
	var imgURL = baseURL + "/images/home_gallery/" + linkId.replace("numlink_", "") + ".jpg";
	var img    = inactiveHolder.getElementsByTagName("img")[0].src = imgURL;

}

// updates the links that surround the gallery image and header
function updateImgLink() {
	
	var headerLink = document.getElementById("gallery_header").getElementsByTagName("a")[0];
	var imgLink    = activeHolder.getElementsByTagName("a")[0];
	imgLink.href   = headerLink.href;
	imgLink.target = headerLink.target;
	
}

function slide(elem, startX, endX, steps, intervals, powr) {
	
    // adapted from width changer with Memory by www.hesido.com
    if (elem.xChangeMemInt) {
		
		window.clearInterval(elem.xChangeMemInt);
		
	}
	
    var actStep = 0;
	
    elem.xChangeMemInt = window.setInterval(
		
		function() { 
			
			elem.currentX = easeInOut(startX, endX, steps, actStep, powr);
			elem.style.left = elem.currentX + "px"; 
			actStep++;
			
			if (actStep > steps) {
				
				window.clearInterval(elem.xChangeMemInt);
				
			}
			
		}, intervals
		
	);
	
}

// update the numbered link's active states
function markMenu() {
	
	for(var i = 0; i < navNumLinks.length; i++) {
		
		if(i == currentPane) {
			
			navNumLinks[i].className = "active";
			
		} else {
			
			navNumLinks[i].className = "";
			
		}
		
	}
	
}

// update the header that goes along with the picture using AJAX
function getDetails() {	
	
	linkId = paneToLinkId(nextPane);
	
	var request = createRequest();
	
	if(request == null) {
		
		alert("Unable to create request");
		
		return;
		
	}
	
	var url = baseURL + "/php/get_details.php?LinkId=" + escape(linkId);
	request.open("GET", url, true);
	
	request.onreadystatechange = displayDetails;
	request.send(null);

}

// use the info from the server to update the header in the gallery
function displayDetails() {
	
	if(request.readyState == 4) {
		
		if(request.status == 200) {
			
			galleryHeader = document.getElementById("gallery_header");
			galleryHeader.innerHTML = request.responseText;
			
			scrollImages(paneToLinkId(nextPane), direction);
			currentPane = nextPane;
			markMenu();
			resetAutoScroll();
			
			// update the link surrounding the main image with the href value of the header link
			updateImgLink();
			
		}
		
	}
	
}

// Utility Functions
//------------------------------------------------------------------ 

// Generic Animation Step Value Generator By www.hesido.com 
function easeInOut(minValue, maxValue, totalSteps, actualStep, powr) {
	
    var delta = maxValue - minValue; 
    var stepp = minValue + (Math.pow(((1 / totalSteps) * actualStep), powr) * delta);
	
    return Math.ceil(stepp);
	
}

// converts a link's id to the number that it ends with
function linkIdToPane(linkId) {
	
	var strSegs = linkId.split("_");
	
	return parseInt(strSegs[strSegs.length - 1]);
	
}

// converts a number to a string with the same formatting 
// as the ids of the numbered links in the navigation
function paneToLinkId(num) {
	
	return "numlink_pane_" + num;
	
}