﻿/*
 * Author:EDGESUN <edgesun@126.com> - 20100418
 * Call: NewEdgesunImgSlider(imgW, imgH, titlePos, indexFlag, imgDirection, waitTime, images, titles)
 * imgW：        图片宽度
 * imgH：        图片高度
 * titlePos：    标题位置 0, 1, 2, 3
 * indexFlag：   索引开关 0关, 1开
 * imgDirection：滑动方向 0上下, 1左右
 * waitTime：    每张图片显示时间 1000为1秒钟
 * images：      图片列表用|分隔，可带链接，例：<a href="http://www.126.com/"><img src="126.gif" /></a>|<img src="163.gif" />
 * titles：      图片标题用|分隔 
 */
var EdgesunBind = function(object, fun) {
	var args = Array.prototype.slice.call(arguments).slice(2);
	return function() {return fun.apply(object, args.concat(Array.prototype.slice.call(arguments)));}
}
 
function EdgesunImgSlider(imgW, imgH, titlePos, indexFlag, imgDirection, waitTime, images, titles){
	if(!images)return;
	this._count = images.split("|").length;
	this._x = this._tmp_index = 0;
	while(this.$("EdgesunImgSlider-container"+this._x)){this._x++};
	this._titles = titles ? titles.split("|") : false;
	if(this._titles && this._titles.length<this._count){this._titles=null}
	if(this._titles){for(x=0; x<this._titles.length; x++)this._titles[x]=unescape(this._titles[x])}
	titlePos = !!this._titles ? ((titlePos==0||titlePos==1||titlePos==2) ? titlePos : 3) : null;
	this.InitHTML(imgW, imgH, images, !!this._titles, titlePos);
	this._title = this._titles ? this.$("EdgesunImgSlider-container"+this._x).getElementsByTagName("span")[0] : null;
	this._titleTimer = 0;
	this._titleI = 0;
	var ulImg = this.$("EdgesunImgSlider-ul"+this._x);
	var li = ulImg.getElementsByTagName('li');
	imgDirection = !!imgDirection;
	this._scroll = imgDirection ? 'scrollLeft' : 'scrollTop';
	this._waitTime = waitTime;
	this._container = ulImg.parentNode;
	this._index = 0;
	this._scrollDelay = 0;
	this._tmp = 0;
	this._single = imgDirection ? imgW : imgH;
	this._timer = 0;
	this._endPosition = 0;
	this._pause = 0;
	var tmp = this.$("EdgesunImgSlider-num"+this._x);
	//if(indexFlag){for(var i=0; i<this._count; i++){tmp.innerHTML += '<li>'+(i+1).toString()+'</li>';}}
	if(indexFlag){for(var i=0; i<this._count; i++){tmp.innerHTML += '<li id="li'+i+'"></li>';}}
	this._liNum = indexFlag ? (tmp.getElementsByTagName('li').length ? tmp.getElementsByTagName('li') : 0) : 0;
	if(imgDirection){ulImg.style.width  = imgW * this._count + 'px'; ulImg.style.height = imgH + 'px';}else{ulImg.style.width  = imgW + 'px'; ulImg.style.height = imgH * this._count + 'px';}
	this.InitData();
}
EdgesunImgSlider.prototype.$ = function(id){return document.getElementById(id)?document.getElementById(id):null;}
EdgesunImgSlider.prototype.InitData = function(){
	this._tmp = 0;
	this._index = (++this._index > this._count) ? 1 : this._index;
	this._endPosition = this._single * (this._index-1);
	this._scrollDelay = parseInt(this._endPosition - this._container[this._scroll]);
	var img = new Image();
	img.src = this._container.getElementsByTagName('img')[this._index-1].src;
	if(img.complete){this.PreMove(); return;}
	try{if(img.readyState == "complete"){this.PreMove();return;}}catch(e){};
	img.onload = EdgesunBind(this, this.PreMove);
}
EdgesunImgSlider.prototype.PreMove = function(){
	if(this._liNum){for(var i=0; i<this._count; i++){this._liNum[i].className = (i==this._index-1)?'on':'';}}
	this.Move();
	if(this._titles){this._titleI=0;this.ChangeTitle();}
}
EdgesunImgSlider.prototype.Move = function(){
	clearTimeout(this._timer);
	var tmp = 0;
	if(this._container[this._scroll] == this._endPosition){if(!this._pause)this._timer=setTimeout(EdgesunBind(this, this.InitData), this._waitTime); return;}
	tmp = parseInt((this._scrollDelay - this._tmp)/2 + ((this._scrollDelay>=0) ? 1 : -1));
	this._container[this._scroll] += tmp;
	this._tmp += tmp;
	this._timer=setTimeout(EdgesunBind(this, this.Move), 20);
}
EdgesunImgSlider.prototype.ChangeTitle = function(){
	clearTimeout(this._titleTimer);
	var t=this._titles[this._index-1];
	if(!this._titleI)this._title.innerHTML='';
	if(this._titleI==t.length)return;
	this._title.innerHTML+=t.charAt(this._titleI++);
	this._titleTimer = setTimeout(EdgesunBind(this, this.ChangeTitle), 50);
}
EdgesunImgSlider.prototype.SetIndex = function(pause,i){if(!!pause){this._index=i;this._pause=1;this.InitData();}else{this._pause = 0; this._timer=setTimeout(EdgesunBind(this, this.InitData), this._waitTime)}}
EdgesunImgSlider.prototype.InitHTML = function(w, h, images, titleFlag, titlePos){
	var containerH = titleT = divT = indexB = 0;
	var titleH = 20;
	var titleBg = 'background-color:#333333;';
	if(titlePos==null){
		containerH = h;
		divT = 0;
		indexB = 10;
		titleH = 0;
		titleBg = '';
	}else{
		switch(titlePos){
		case 0:
			titleT = 0;
			containerH = h+titleH;
			divT = titleH;
			indexB = 10;
			break;
		case 1:
			titleT = divT = 0;
			containerH = h;
			indexB = 10;
			titleBg = '';
			break;
		case 2:
			titleT = h-titleH;
			containerH = h;
			divT = 0;
			indexB = titleH+10;
			titleBg = '';
			break;
		default:
			titleT = h;
			containerH = h+titleH;
			divT = 0;
			indexB = titleH+10;
		}
	}
	var str = '<style type="text/css">';
	str += '#EdgesunImgSlider-container' + this._x + '{position: relative;width: '+w+'px;height: '+containerH+'px;overflow: hidden;}';
	str += '#EdgesunImgSlider-blank' + this._x + '{width:'+w+'px;height:'+titleH+'px;overflow:hidden;}';
	str += '#EdgesunImgSlider-div-back' + this._x + '{z-index:1;position:absolute;top:'+titleT+'px;left:0;width:'+w+'px;height:'+titleH+'px;overflow:hidden;background-color:#000000;-moz-opacity:0.65;opacity: 0.65;filter:Alpha(Opacity=65);}';
	str += '#EdgesunImgSlider-container' + this._x + ' span{z-index:1;display:block;position:absolute;top:'+titleT+'px;left:0;padding-left:10px;width:'+(w-10)+'px;height:'+titleH+'px;overflow:hidden;'+titleBg+'color:#FFFFFF;font-size:12px;line-height:20px;cursor:default;text-align:left;}';
	str += '#EdgesunImgSlider-div' + this._x + '{position: relative;width: '+w+'px;height: '+h+'px;overflow: hidden;}';
	str += '#EdgesunImgSlider-ul' + this._x + '{left: 0;top: 0;margin: 0;padding: 0;list-style: none;}';
	str += '#EdgesunImgSlider-ul' + this._x + ' li{float: left;display: inline-block;}';
	str += '#EdgesunImgSlider-ul' + this._x + ' li img{float: left;border: 0;width: '+w+'px;height: '+h+'px;}';
	str += '#EdgesunImgSlider-num' + this._x + '{position: absolute;margin: 0;padding: 0;bottom: '+indexB+'px;left: '+parseInt(w/2-(this._count/2)*18)+'px;list-style: none;}';
	str += '#EdgesunImgSlider-num' + this._x + ' li{float: left;margin: 3px;width: 13px;height: 13px;line-height: 13px;font-size: 13px;color: #FF7300;cursor: pointer;background:url(./images/li.png) 0 -13px no-repeat;_background:url(./images/li.gif) -13px 0 no-repeat;overflow: hidden;}';
	str += '#EdgesunImgSlider-num' + this._x + ' li.on{color: #FFFFFF;background:url(./images/li.png) 0 0px no-repeat;_background:url(./images/li.gif) 0 0px no-repeat;}';
	str += '</style>';
	str += '<div id="EdgesunImgSlider-container' + this._x + '">';
	str += titleFlag && !titlePos ? '<div id="EdgesunImgSlider-blank'+this._x+'"></div>' : '';
	str += '<div id="EdgesunImgSlider-div' + this._x + '"><ul id="EdgesunImgSlider-ul' + this._x + '">';
	str += '<li>'+images.split("|").join("</li><li>")+'</li>';
	str += '</ul></div><ul id="EdgesunImgSlider-num' + this._x + '"></ul>';
	str+= titleFlag ? '<div id="EdgesunImgSlider-div-back'+this._x+'"></div><span></span>' : '';
	str += '</div>';
	document.write(str);
}

function NewEdgesunImgSlider(imgW, imgH, titlePos, indexFlag, imgDirection, waitTime, images, titles){
	indexFlag = !!indexFlag;
	var slider = new EdgesunImgSlider(imgW, imgH, titlePos, indexFlag, imgDirection, waitTime, images, titles);
	if(indexFlag && images){
		var sliderNum = document.getElementById("EdgesunImgSlider-num"+slider._x).getElementsByTagName("li");
		for(var i=0; i<sliderNum.length; i++){
			sliderNum[i].onmouseover = function(){slider.SetIndex(1, parseInt(this.id.substring(2)))};
			sliderNum[i].onmouseout = function(){slider.SetIndex(0,0);}
		}
	}
}
