/********************************************
**Banner Fade Software					   **
**Created by Matt                      	   **
********************************************/


function createShow(imgarray,width,height,delay,setting){
	this.pos = 0;
	this.paused = false;
	
	//create box for banner content
	this.divObj = document.createElement("div");
	this.divObj.style.position = "relative";
	this.divObj.style.width = width;
	this.divObj.style.height = height;
	
	//create box for top banner image
	this.topDiv = document.createElement("div");
	this.topDiv.style.position = "absolute";
	this.topLnk = document.createElement("a");
	this.topImg = document.createElement("img");
	this.topImg.width = width;
	this.topImg.height = height;
	this.topImg.style.border = "none";
	this.topImg.src = imgarray[0][0];
	this.topImg.zIndex = "1";
	this.topLnk.href = imgarray[0][1];
	this.topLnk.onmouseover = doPause(this,0);
	this.topLnk.onmouseout = doPause(this,1);
	this.topLnk.appendChild(this.topImg);
	this.topDiv.appendChild(this.topLnk);
	this.divObj.appendChild(this.topDiv);
	
	//create box for bottom banner image
	this.botDiv = document.createElement("div");
	this.botImg = document.createElement("img");
	this.botImg.width = width;
	this.botImg.height = height;
	this.botImg.src = imgarray[0][0];
	this.botImg.style.zIndex = "0";
	this.botDiv.appendChild(this.botImg);
	this.divObj.appendChild(this.botDiv);
	
	//create box for thumbnail buttons
	this.btnBox = document.createElement("div");
	this.btnBox.style.zIndex = "1";
	this.btnBox.style.height = height*.1;
	this.btnBox.style.position = "relative";
	this.btnBox.style.margin = "2px";
	this.btnBox.style.width=width;
	this.btnBox.style.cssFloat="right";
	
	//create buttons
	this.box = new Array();
	this.button = new Array();
//	this.previews = new Array();
	this.pbox = new Array();
	
	for(i=imgarray.length-1;i>=0;i--){
	
		//create individual boxes for buttons
		this.box[i] = document.createElement("a");
		this.box[i].href = "#";
		this.box[i].onclick = doClick(this, i);
		this.box[i].onmouseover = mouseOver(this, i);
		this.box[i].onmouseout = mouseOut(this, i);
		//this.box[i].style.position = "relative";
		//this.box[i].style.right = i*((width*.1)+6);
		this.box[i].style.border = "0";
		this.box[i].style.outline = "0";
this.box[i].style.cssFloat="right";
		this.box[i].style.styleFloat="right";
		
		//create individual buttons
		this.button[i] = document.createElement("img");
		this.button[i].src = imgarray[i][0];
		this.button[i].width = width*.1;
		this.button[i].height = height*.1;
		this.button[i].style.opacity = ".3";
		this.button[i].style.filter = "alpha(opacity=30)";
		this.button[i].border = "2px";
		this.button[i].style.borderColor = "white";
		this.button[i].className='slidethumb';

		//create preview buttons
		this.pbox[i] = document.createElement("div");
		this.pbox[i].style.position = "absolute";
		this.pbox[i].style.bottom = "0";
		this.pbox[i].style.zIndex = "2";
		this.pbox[i].style.display = "none";
		this.pbox[i].style.cssFloat="right";
		this.pbox[i].style.styleFloat="right";
		this.pbox[i].style.right = i*((width*.1)+6);
		
	/*	this.previews[i] = document.createElement("img");
		this.previews[i].src = imgarray[i][0];
		this.previews[i].width = width*.3;
		this.previews[i].height = height*.3;
	*/	
		
		//apply elements to their parents
	//	this.pbox[i].appendChild(this.previews[i]);
		this.divObj.appendChild(this.pbox[i]);
		this.box[i].appendChild(this.button[i]);
		this.btnBox.appendChild(this.box[i]);
	}

	this.button[0].style.opacity = "1";
	this.button[0].style.filter = "alpha(opacity=100)";
	this.button[0].style.borderColor = "blue";
	
	//apply banner and buttons to html body
	setting.appendChild(this.divObj);
	setting.appendChild(this.btnBox);
	

	this.fade = function (element,op){
		element.style.opacity=op/10.00;
		element.style.filter="alpha(opacity="+(op*10)+")";
	}
	this.fadeOut = function (offset){
		clearInterval(this.Timer);
		clearInterval(this.fx);
		if(offset==this.pos) return;
		var t = 10;
		this.button[this.pos].style.borderColor = "white";
		this.button[this.pos].style.opacity = ".3";
		this.button[this.pos].style.filter = "alpha(opacity=30)";
		if(offset==-1) ++this.pos;
		else this.pos=offset;
		if(this.pos>=imgarray.length) this.pos=0;
		this.botImg.src = imgarray[this.pos][0];
		thisObj = this;
		this.fx = setInterval(function(){thisObj.fade(thisObj.topImg,t);--t;if(t<0){clearInterval(thisObj.fx);thisObj.nextImage(thisObj.pos,thisObj.pos+1);thisObj.cycle();}},40);
	}
	this.nextImage = function (a,b){
		if(b==imgarray.length) b = 0;
		this.topLnk.href = imgarray[a][1];
		this.button[a].style.opacity = "1";
		this.button[a].style.filter = "alpha(opacity=100)";
		this.button[a].style.borderColor = "blue";
		thisObj = this;
		setTimeout(function(){thisObj.topImg.src=imgarray[a][0];},200);
		setTimeout(function(){thisObj.topImg.style.opacity=1;thisObj.topImg.style.filter="alpha(opacity=100)";},200);
		setTimeout(function(){thisObj.botImg.src=imgarray[b][0];},500);
	}
	this.cycle = function (){
		thisObj = this;
		this.Timer = setInterval(function(){thisObj.fadeOut(-1);},delay*1000);
	}
	this.cycle();
}

function doPause(e,i){
	return function(){if(i) e.cycle(); else clearInterval(e.Timer);}
}

function doClick(e,i){
	return function () { e.fadeOut(i); };
}

function mouseOver(e,i){
	return function () { if(e.pos==i) return;e.pbox[i].style.display = "block";e.button[i].style.opacity = "1";e.button[i].style.filter = "alpha(opacity=100)";e.button[i].style.borderColor = "LightBlue";}
}

function mouseOut(e,i){
	return function () { e.pbox[i].style.display = "none";if(e.pos==i) return; e.button[i].style.opacity = ".3";e.button[i].style.filter = "alpha(opacity=30)";e.button[i].style.borderColor = "white"; };
}