// inserts HTML that looks like this:
//<div style="display:none; height:(image-height); overflow:hidden; position:absolute;">
//	<h1>text[n]</h1>
//	<img src="imagesdir + image[n]" height="image-height" width="image-width" />
//</div>


/* Slide show config */
var container = "slideshow";
var imagesdir = "content_graphics/";
var image = new Array("ig_firstforall.jpg", "ig_paperclips.jpg", "ig_plans.jpg", "ig_printbutton.jpg", "ig_easybutton.jpg", "ig_boxes.jpg");
var text  = new Array(new Text("For all your office needs", "left", 150), 
											new Text("Office Supplies", "right", 150), 
											new Text("Office Interiors", "right", 150), 
											new Text("Print Management", "left", 150), 
											new Text("Online Ordering", "left", 150),
											new Text("Next Day Delivery", "left", 150)
											);
// var pointer = 0;
var prevslide = 0;
var nextslide = 0;

window.onload = function(){
	slideShow();
}

// a text banner class
function Text(strText, strPosX, intWidth){
	this.text = strText;
	this.posX = strPosX;
	this.width = intWidth;
	
	this.getText = function(){return this.text;}
	this.getWidth = function(){return this.width;}
	this.getPos = function(){return this.posX;}
}

function slideShow(){

	// 1. Destroy container InnerHTML
	$('slideshow').innerHTML = '';
	// 2. Insert First frame [prevslide]
	var objSlideContainer = document.createElement("div");
	objSlideContainer.setAttribute("id", "slide" + prevslide);
	objSlideContainer.setAttribute("class", "slide");
	objSlideContainer.style.position = "absolute";
	var objSlideHead = document.createElement("h1");
	objSlideHead.innerHTML = text[prevslide].text;
	objSlideHead.style.width = text[prevslide].width + "px";
	objSlideHead.style.textAlign = "center";
	objSlideHead.style.position = "absolute";
	objSlideHead.style.left = "0";
	objSlideHead.style.top = "25px";
	objSlideContainer.appendChild(objSlideHead);
	objSlideContainer.innerHTML += "<p id='slideshow_image" + prevslide + "' class='illustration'><img width='615' height='247' src='" + imagesdir + image[prevslide] + "' alt='" + text[prevslide].text + "'/></p>";
	$(container).appendChild(objSlideContainer);
	
	setUpNextSlide();
}

 /*
	* inserts the next slide behind the current one	
	* then calls the fader function
	*/
function setUpNextSlide(){
	prevslide = nextslide;
	nextslide++;
	if(nextslide > (image.length - 1)){
		nextslide = 0;
	}
	
	// alert(nextslide);
	
	var objSlideShowContainer = document.createElement("div");
	objSlideShowContainer.setAttribute("id", "slide" + nextslide);
	objSlideShowContainer.setAttribute("class", "slide");
	var objSlideShowText = document.createElement("h1");
	objSlideShowText.setAttribute("id", "slideshow_text" + nextslide);
	objSlideShowText.innerHTML = text[nextslide].text;
	objSlideShowText.style.width = text[nextslide].width + "px";
	objSlideShowText.style.textAlign = "center";
	objSlideShowText.style.position = "absolute";
	if (text[nextslide].posX == "left"){
		objSlideShowText.style.left = "-180px"; // text width + padding?
	}
	else{
		objSlideShowText.style.left = "615px"; // container width?
	}
	objSlideShowText.style.top = "50px";
	objSlideShowContainer.appendChild(objSlideShowText);	
	objSlideShowContainer.innerHTML += "<p class='illustration'><img width='615' height='247' src='" + imagesdir + image[nextslide] + "' alt='" + text[nextslide] + "'/></p>";
	
	
	document.getElementById(container).appendChild(objSlideShowContainer);
	
	setTimeout("FadeImg()", 4000);
}

function FadeImg(){
	Effect.Fade($('slide' + (prevslide)), {	from: 1.0, 
																to: 0.0, 
																duration: 2.0, 
																transition:Effect.Transitions.sinoidal, 
																afterFinish: function end(){
																	$('slide' + nextslide).style.position = "absolute";
																	$('slide' + (prevslide)).remove();
																	if(text.length > 0){
																		SlideText();
																	}
																	else{
																		setUpNextSlide();
																	}
																}
															});
}

function SlideText(){
	if(text[nextslide].getPos() == "left"){
		new Effect.Move($('slideshow_text' + (nextslide)), {x: (text[nextslide].width + 20), y: 0, mode: 'relative', duration: 0.6});
	}
	else{
		new Effect.Move($('slideshow_text' + (nextslide)), {x: -(text[nextslide].width + 20), y: 0, mode: 'relative', duration: 0.6});
	}
	setUpNextSlide();
}