/*PORTFOLIO VIEWER SCRIPT*/
/*Original Script by Jeremy Sosnick, www.jeremysosnick.com. Copyright 2011.*/

/*INSTRUCTIONS*/
//1.) When setting up your images, place them all in a single div container, one <img> tag after another with no other content. Place these in your HTML in the order they should appear in the portfolio slideshow. Each image should have the exact same dimensions (height and width). The Image # text should be placed in a different area, outside of the slideshow div container.

//2.) The div container for the slideshow should have an id and explicit dimensions (in pixels). Please note that this slideshow uses the following CSS properties established in the Javascript: overflow:hidden and cursor:pointer for the div, z-index and relative positioning for the image tags inside the div. No formatting is applied to the Image # text.

//3.) Link to this Javascript file right before the end of the closing </html> tag. This is typically after the closing </body> tag.

//4.) Before the slideshow can function, you'll need to identify some things first (the three variables). Each one has the word "var" in front of it (don't delete that word) - each variable statement below should end with a semicolon. Only change the values that appear after the "=" in each variable statement:

//The Variables

var show_id = "showbox"; //Div id of the container where the slideshow is to show up
var number_id = "numberbox"; //Div or span id of the HTML element where the 'Image # of #' text will appear. Please note that anything in this div or span will be replaced by the image # text. 
var fadespeed = 10; //Speed of the fading effect. The lower the number, the faster the fading effect. I recommend "10".
var image_height = 225; //This is the height of the div of where the slideshow will appear. This number (in pixels) should also match the height of each image in the slideshow.



/*--------------------------------------*/
/*Don't Change Anything below this point*/
/*--------------------------------------*/

var portfolio = document.getElementById(show_id);
var img_number = document.getElementById(number_id);
var items = portfolio.getElementsByTagName("img");
var first = items[0];
var backbg = first.src;
var fadelevel = 10;
var fademodifier = .2;
var i = -1;
var n = 1;
var action = false;
window.onload = Startup;
portfolio.onclick = Cycle;

function Startup(){
	portfolio.style.overflow = "hidden";
	portfolio.style.cursor = "pointer";
	img_number.innerHTML = "Image 1 of " + items.length;
	for (var m = 0; m<items.length; m++)
	{items[m].style.position = "relative";
	items[m].style.zIndex = 999 - m;
	items[m].style.bottom = (m * image_height) + "px";}
}

function Cycle(){
	if (action == false)
	{i = i + 1;
	NumberChange();}
	if (action == false && i == items.length-1)
	{portfolio.style.backgroundImage = "url(" + backbg + ")";
	portfolio.style.backgroundRepeat = "no-repeat";}
	if (action == false && i >= items.length && i !== items.length-1)
	{Reset();
	portfolio.style.backgroundImage = "none";
	portfolio.style.backgroundRepeat = "repeat";}
	if (action == false && i !== items.length)
	{Fadeout();
	return i;}
}

function NumberChange(){
	n = n + 1;
	if (n <= items.length)
	{img_number.innerHTML = "Image " + n + " of " + items.length;}
	if (n > items.length)
	{n = 1;
	img_number.innerHTML = "Image " + n + " of " + items.length;}
}

function Reset(){
	for (var m = 0; m<items.length; m++)
	{items[m].style.opacity = "1.0";
	items[m].style.filter = "filter:alpha(opacity=100)";
	action = true;}
	fadelevel = 10;
	action = false;
	return i = 0;
}

function SetOpacity(value){
	items[i].style.opacity = value/10;
	items[i].style.filter = 'alpha(opacity=' + value*10 + ')';
}

function Fadeout(){
action = true;
fadelevel = fadelevel - fademodifier;
SetOpacity(fadelevel);
if (fadelevel > 0)
window.setTimeout("Fadeout()",fadespeed);
if (fadelevel < 0)
{action = false;
return fadelevel = 10;}
}