// 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(
                      "experts_in_office_interiors.jpg",
                      "desks_to_suit_any_task.jpg",   
                      "seating_for_every_occasion.jpg", 
                      "Executive_furniture_to_impr.jpg",                      
                      "space_saving_solutions.jpg"
                      );
var text  = new Array(
                      new Text("experts in office interiors", "left", 150), 
											new Text("desks to suit any task", "right", 150),
											new Text("seating for every occasion", "left", 150), 
											new Text("executive furniture to impress", "right", 150),  											
											new Text("space saving solutions", "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();
}