/****************************************

	JavaScript Document:
	Hessler Design - Work Page
	
	(c) Copyright Anthony Hessler 2010
	
****************************************/


var leftArrow;
var rightArrow;
var images_arr = [];
var details_arr = [];
var imagesLoaded_arr = [];
var windowWidth_num = 864;
var totalImages_num;
var lastElement_num;
var currentElement_num = 0;
var nextElement_num = 1;
var easeMethod = "easeOutCubic";
var currentQuery_str;
var newQuery_str;
var workQueries_arr = ['stpaul', 'chesterlimbaugh', 'lighttable', 'racetowin', 'alkarsteel', 'tomlimbaugh', 'aladdinsteel', 'center-for-michigan', 'crossword', 'jeopardy', 'artsatmichigan', 'questar', 'thrivent'];
var imageTags_arr = ['<img src="images/work/stpaul.png" alt="St. Paul Lutheran Church and School Website" title="St. Paul Lutheran Church and School Website" />',
					 '<img src="images/work/chesterlimbaugh.png" alt="Chester Limbaugh Website" title="Chester Limbaugh Website" />',
						 '<img src="images/work/lighttable.png" alt="LightTable Image Viewing Application" title="LightTable Image Viewing Application" />',
						 '<img src="images/work/racetowincorvette.png" alt="Corvette Sweepstakes Website" title="Corvette Sweepstakes Website" />',
						 '<img src="images/work/alkarsteel.png" alt="Alkar Steel Website" title="Alkar Steel Website" />',
						 '<img src="images/work/tomlimbaugh.png" alt="Tom Limbaugh Website" title="Tom Limbaugh Website" />',
						 '<img src="images/work/aladdinsteel.png" alt="Aladdin Steel Website" title="Aladdin Steel Website" />',
						 '<div style="margin:20px 0px 0px 332px;"><object width="200" height="460"><param name="movie" value="http://www.brogansocialmedia.com/CFMwidget/cfm_widget.swf"></param><param name="allowFullScreen" value="false"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.brogansocialmedia.com/CFMwidget/cfm_widget.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="false" width="200" height="460"></embed></object></div>',
						 '<img src="images/work/crossword.png" alt="Crossword Puzzle Application" title="Crossword Puzzle Application" />',
						 '<img src="images/work/jeopardy.png" alt="Jeopardy Trivia Game Application" title="Jeopardy Trivia Game Application" />',
						 '<img src="images/work/aam.png" alt="Arts at Michigan Postcards" title="Arts at Michigan Postcards" />',
						 '<img src="images/work/questar.png" alt="Questar Capital Advertisements" title="Questar Capital Advertisements" />',
						 '<img src="images/work/thrivent.png" alt="Thrivent Financial for Lutherans Postcards" title="Thrivent Financial for Lutherans Postcards" />'];





/****************************************

 Setup

****************************************/

function initWork() {
	totalImages_num = workQueries_arr.length;
	checkQuery();
	setImageArray();
	setDetailsArray();
	setImageLoadedArray();
	setImagePositions();
	setDetailsVisibility();
	populateImage(currentElement_num);
	populateImage(lastElement_num);
	populateImage(nextElement_num);
	$(document).keyup(function() {
		if (window.event.keyCode == 37) {
			navigate("left");
		} else if (window.event.keyCode == 39) {
			navigate("right");
		}
	});
}




/****************************************

 Population

****************************************/

function populateImage(pNum_num) {
	if (imagesLoaded_arr[pNum_num] = 'n') {
		images_arr[pNum_num].innerHTML = imageTags_arr[pNum_num];
		imagesLoaded_arr[pNum_num] = 'y';
	}
}




/****************************************

 Mouse Events

****************************************/

function arrowOver(pDirection_str) {
	switch (pDirection_str) {
		case "left":
		leftArrow = getLeftArrow();
		leftArrow.setAttribute("class", "over");
		break;
		
		case "right":
		rightArrow = getRightArrow();
		rightArrow.setAttribute("class", "over");
		break;
		
		default:
		break;
	}
}

function arrowOff(pDirection_str) {
	switch (pDirection_str) {
		case "left":
		leftArrow = getLeftArrow();
		leftArrow.setAttribute("class", "off");
		break;
		
		case "right":
		rightArrow = getRightArrow();
		rightArrow.setAttribute("class", "off");
		break;
		
		default:
		break;
	}
}

function navigate(pDirection_str) {
	switch (pDirection_str) {
		case "left":
		$(images_arr[nextElement_num]).stop(true, true);
		$(images_arr[lastElement_num]).stop(true, true);
		$(images_arr[currentElement_num]).stop(true, true);
		images_arr[nextElement_num].style.left = ''+((-1) * windowWidth_num)+'px';
		images_arr[lastElement_num].style.left = ''+((-1) * windowWidth_num)+'px';
		$(images_arr[currentElement_num]).animate({ left: '+='+(windowWidth_num+50)+'' }, 675, easeMethod);
		$(images_arr[lastElement_num]).animate({ left: '+='+windowWidth_num+'' }, 750, easeMethod);
		details_arr[currentElement_num].style.display = "none";
		details_arr[lastElement_num].style.display = "block";
		$(details_arr[lastElement_num]).animate({ opacity:0 }, 0);
		$(details_arr[lastElement_num]).animate({ opacity:1 }, 750);
		updateCurrentAndNextSlots(pDirection_str);
		break;
		
		case "right":
		$(images_arr[nextElement_num]).stop(true, true);
		$(images_arr[lastElement_num]).stop(true, true);
		$(images_arr[currentElement_num]).stop(true, true);
		images_arr[lastElement_num].style.left = ''+(windowWidth_num)+'px';
		images_arr[nextElement_num].style.left = ''+(windowWidth_num)+'px';
		$(images_arr[currentElement_num]).animate({ left: '-='+(windowWidth_num+50)+'' }, 675, easeMethod);
		$(images_arr[nextElement_num]).animate({ left: '-='+windowWidth_num+'' }, 750, easeMethod);
		details_arr[currentElement_num].style.display = "none";
		details_arr[nextElement_num].style.display = "block";
		$(details_arr[nextElement_num]).animate({ opacity:0 }, 0);
		$(details_arr[nextElement_num]).animate({ opacity:1 }, 750);
		updateCurrentAndNextSlots(pDirection_str);
		break;
		
		default:
		break;
	}
}

function updateCurrentAndNextSlots(pDirection_str) {
	switch (pDirection_str) {
		case "left":
		if (currentElement_num > 0) {
			currentElement_num--;
		} else {
			currentElement_num = images_arr.length-1;
		}
		if (nextElement_num > 0) {
			nextElement_num--;
		} else {
			nextElement_num = images_arr.length-1;
		}
		if (lastElement_num > 0) {
			lastElement_num--;
		} else {
			lastElement_num = images_arr.length-1;
		}
		//alert(currentElement_num + ", " + nextElement_num + ", " + lastElement_num);
		break;
		
		case "right":
		if (currentElement_num < images_arr.length-1) {
			currentElement_num++;
		} else {
			currentElement_num = 0;
		}
		if (nextElement_num < images_arr.length-1) {
			nextElement_num++;
		} else {
			nextElement_num = 0;
		}
		if (lastElement_num < images_arr.length-1) {
			lastElement_num++;
		} else {
			lastElement_num = 0;
		}
		break;
		
		default:
		break;
	}
	populateImage(currentElement_num);
	populateImage(lastElement_num);
	populateImage(nextElement_num);
	
	updateQuery(workQueries_arr[currentElement_num]);
}




/****************************************

 Setup

****************************************/

function updateQuery(pStr_str) {
	var lURL = window.location;
	if (window.location.hash == '') {
		//window.location = lURL + "#"+pStr_str;
		window.location.replace(lURL+"#"+pStr_str);
	} else {
		var lArray_arr = String(lURL).split("#");
		//window.location = lArray_arr[0] + "#"+pStr_str;
		window.location.replace(lArray_arr[0]+"#"+pStr_str);
	}
}
function checkQuery() {
	var lURL = window.location;
	var lArray_arr;
	var lWork_str;
	if (window.location.hash != '') {
		lArray_arr = String(lURL).split("#");
		lWork_str = lArray_arr[1];
		for (var i=0; i<workQueries_arr.length; i++) {
			if (lWork_str == workQueries_arr[i]) {
				currentElement_num = i;
				if (i < workQueries_arr.length-1) {
					nextElement_num = i+1;
				} else {
					nextElement_num = 0;
				}
				if (i > 0) {
					lastElement_num = i-1;
				} else {
					lastElement_num = totalImages_num-1;
				}
				break;
			}
		}
		if (currentElement_num == 0) {
			nextElement_num = 1;
			lastElement_num = totalImages_num-1;
			window.location.replace(lArray_arr[0]+"#"+workQueries_arr[currentElement_num]);
		}
	} else {
		currentElement = 0;
		nextElement_num = 1;
		lastElement_num = totalImages_num-1;
	}
}




/****************************************

 Get / Set

****************************************/

function getLeftArrow() {
	var lDiv = document.getElementById('arrow-left');
	if (!lDiv) {
		lDiv = window.getElementById('arrow-left');
	}
	return lDiv;
}
function getRightArrow() {
	var lDiv = document.getElementById('arrow-right');
	if (!lDiv) {
		lDiv = window.getElementById('arrow-right');
	}
	return lDiv;
}

function setImageArray() {
	for (var i=0; i<totalImages_num; i++) {
		images_arr[i] = getImageDiv(String('w:'+i));
	}
}
function setImageLoadedArray() {
	for (var i=0; i<totalImages_num; i++) {
		imagesLoaded_arr[i] = 'n';
	}
}
function setImagePositions() {
	for (var i=0; i<images_arr.length; i++) {
		if (i != currentElement_num) {
			$(images_arr[i]).animate({ left: '+='+windowWidth_num+'' }, 0, 'linear', function () {images_arr[i].style.left = ''+windowWidth_num+'px';});
		}
	}
}
function setDetailsArray() {
	for (var i=0; i<totalImages_num; i++) {
		details_arr[i] = getImageDiv(String('d:'+i));
	}
}
function setDetailsVisibility() {
	for (var i=0; i<details_arr.length; i++) {
		if (i != currentElement_num) {
			details_arr[i].style.display = "none";
		}
	}
}
function getImageDiv(pID_str) {
	var lDiv = document.getElementById(pID_str);
	if (!lDiv) {
		lDiv = window.getElementById(pID_str);
	}
	return lDiv;
}