﻿function slider(args){
	this._container = document.createElement("div");
	this._img1		= document.createElement("img");
	this._img2		= document.createElement("img");
	this._buttonbar = document.createElement("table");
	
	this._id		= args.id;
	this._parent 	= args.parent;
	this._data		= args.data;
	this._nclass	= args.nclass;
	this._sclass	= args.sclass;
	
	this._class		= args.cls;
	this._img1.style.position = this._img2.style.position = "absolute";
	this._img1.style.margin = this._img2.style.margin = 0;
	
	
	var isIE		 = window.navigator.appName == "Microsoft Internet Explorer"?true:false;
	
	var img1		= this._img1;
	var img2		= this._img2;
	
	var tbody		= document.createElement("tbody");
	var tr			= document.createElement("tr");
	var Container	= this._container;
	var data		= this._data;	
	var nclass		= args.nclass;
	var sclass		= args.sclass;
	var crtimg		= 0;
	var lastimg		= this._data.length-1;
	var showinterval	= 0;
	var sliderinterval	= 100;
	var sliderperiod	= args.period;
	
	this._buttonbar.setAttribute("cellPadding",0);
	this._buttonbar.setAttribute("cellSpacing",0);
	this._buttonbar.setAttribute("border",0);
	
	Container.style.cssText = "position:relative;width:" + args.width + "px;height:" + args.height + "px;";
	Container.className = this._class;
	
	if(isIE)
			this._buttonbar.style.filter= "alpha(opacity=" + args.alpha + ")";
		else
			this._buttonbar.style.opacity = "." + args.alpha;
			
	tbody.insertBefore(tr,null);
	
	this._buttonbar.insertBefore(tbody,null);
	
	Container.insertBefore(this._img2,null);
	Container.insertBefore(this._img1,null);
	Container.insertBefore(this._buttonbar,null);
	this._parent.insertBefore(Container,null);	
	
	this._createButtons = function(arr,nclass,sclass){
		var td = document.createElement("div");
		td.innerHTML = "&nbsp;"
		tr.insertBefore(td,null);
		for(var i=0;i<arr.length;i++){
			td = document.createElement("div");
			td.insertBefore(document.createTextNode(i+1),null);
			td.className = nclass;
			td.setAttribute("index",i);
			td.onclick = function(event){buttonClick(event)}
			tr.insertBefore(td,null);
		}
		tr.childNodes[1].className = sclass;	
	}
	var showImg = function(img,da,cover){
		img.src 	= da.src;
		img.alt		= da.alt;
		img.title	= da.alt;
		img.onclick = function(){window.location.href=da.href;};
		var aspeed  = 5;	
		var a		= 0;
		
		var show = function(){
			if(a<100-aspeed){
				a += aspeed;
			}else{
				a = 99;
				clearInterval(showinterval);
			}
			if(isIE){
				img.style.filter= "alpha(opacity=" + a + ")";
			}
			else{
				img.style.opacity = "." + a;
			}
		}
		if(cover){
			if(isIE){
				img.style.filter= "alpha(opacity=0)";
			}
			else{
				img.style.opacity = 0;
			}
			showinterval = setInterval(show,20);
		}

	}	
	
	var buttonClick = function(event){
		var e = event || window.event;
		var target = e.target || e.srcElement;
		var inc	= target.getAttribute("index");
		var p = target.parentNode;
		for(var i=1;i<p.childNodes.length;i++){
			p.childNodes[i].className = nclass;
		}
		target.className = sclass;
		lastimg	= crtimg;
		crtimg = parseInt(inc);
		//var lastimg = crtimg-1<0?data.length-1:crtimg-1;
		clearInterval(showinterval);
		clearInterval(sliderinterval);
		showImg(img1,data[crtimg],true);
		showImg(img2,data[lastimg],false);
		selfslide();
	}
	
	var selfslide = function(){		
		var sld = function(){
			crtimg ++;
			crtimg = crtimg>=data.length?0:crtimg;
			lastimg = crtimg-1<0?data.length-1:crtimg-1;
			showImg(img1,data[crtimg],true);
			showImg(img2,data[lastimg],false);
			var p = tbody.firstChild
			for(var i=1;i<p.childNodes.length;i++){
				p.childNodes[i].className = nclass;
			}
			p.childNodes[crtimg+1].className = sclass;
		}
		
		sliderinterval = setInterval(sld,sliderperiod);
	}
	
	this._createButtons(this._data,this._nclass,this._sclass);
	showImg(img1,data[crtimg],true);
	showImg(img2,data[data.length-1],false);	
	selfslide();
}