﻿//这事js文件夹下的compressed.js
//注释：MaLulu 2009-03-11

// 第一个方法$(i)使得它和JQuery共用时失效，所以改名为getThis(i)

//prototype里的函数顺序已调整为调用顺序



var TINY = {};
function $(i) {
	return document.getElementById(i);
}
function $$(e, p) {
	p = p || document;
	return p.getElementsByTagName(e);
}
TINY.slideshow = function (n) {
	this.infoSpeed = this.imgSpeed = this.speed = 10;
	this.thumbOpacity = this.navHover = 70;
	this.navOpacity = 25;
	this.scrollSpeed = 5;
	this.letterbox = "#000";
	this.n = n;
	this.c = 0;
	this.a = [];
};
TINY.slideshow.prototype = {
	init:function (s, z, b, f, q) {
		//alert("######" +" s: "+  s +" z: "+ z +" b: "+ b +" f: "+ f +" q: "+ q);
		s = $(s); 			//获得ul "slideshow" 对象
		var m = $$("li", s), i = 0, w = 0;    //m获得 li 图片数组  i初始化0  w是slider的长度
		this.l = m.length;    //l代表图片个数
		this.q = $(q);		//q代表 imglink 的 div
		this.f = $(z);		//f代表 image 的div  图像将要放置的位置
		this.r = $(this.info);    //r就是infomation div this.info是在页面里赋值的
		this.o = parseInt(TINY.style.val(z, "width"));   //o代表image的宽度
		if (this.thumbs) {
			var u = $(this.left), r = $(this.right);    //u代表slideleft的div ; r 代表 slideright的div  都是在页面赋值的
			u.onmouseover = new Function("TINY.scroll.init(\"" + this.thumbs + "\",-1," + this.scrollSpeed + ")"); 		//slideleft图标  param1 = -1
			r.onmouseover = new Function("TINY.scroll.init(\"" + this.thumbs + "\",1," + this.scrollSpeed + ")");  		//slideright图标 param1 = 1
			u.onmouseout = r.onmouseout = new Function("TINY.scroll.cl(\"" + this.thumbs + "\")");    		//slideleft slideright两个图标 mouseout效果
			this.p = $(this.thumbs);     //p代表存放缩略图的slider div， this.thumbs是在页面定义的
		}
		for (i; i < this.l; i++) {
			this.a[i] = {};     //这是初始化么？
			var h = m[i], a = this.a[i];     //h是第i个“li”项目（从0开始） a是{}
			a.t = $$("h3", h)[0].innerHTML;    // a.t 存放 li中的h3 也就是照片title
			a.d = $$("p", h)[0].innerHTML;    	// a.d 存放li中的p  也就是照片Description
			a.l = $$("a", h)[0] ? $$("a", h)[0].href : "";   // a.l 存放li中的a的href 也就是连接地址 （没有则放“”）
			a.p = $$("span", h)[0].innerHTML; 	//a.p 存放li中的span 也就是照片的path 
	///////////// 自定义每个图片的长宽  --- added by MaLulu 2009-03-24
	//		a.width = $$("p", h)[1].innerHTML;
	//		a.height = $$("p", h)[2].innerHTML;
	////////////////MaLulu 2009-03-24 ////////////////////////////////
	
			///////////////////////////////////以上都有[0]是因为find得到的是elements 但是li中各项只有一个/////////////////////////////////
			if (this.thumbs) {
				var g = $$("img", h)[0];          //g存放缩略图的img对象
				this.p.appendChild(g);				//添加到slider的div下
				w += parseInt(g.offsetWidth);		//添加长度
				if (i != this.l - 1) {				//不是最后一张
					g.style.marginRight = this.spacing + "px";		//缩略图右侧空隙 this.spacing 在页面赋值
					w += this.spacing;      //长度也加上spacing 
				}
				this.p.style.width = w + "px";     //设置slider的总长度
				//alert("total width :: "+this.p.style.width);
				g.style.opacity = this.thumbOpacity / 100;    // alpha滤镜的透明度  this.thumbOpacity 在页面赋值
				g.style.filter = "alpha(opacity=" + this.thumbOpacity + ")";
				g.onmouseover = new Function("TINY.alpha.set(this,100,5)");   //缩略图mouseover时全显示
				g.onmouseout = new Function("TINY.alpha.set(this," + this.thumbOpacity + ",5)");
				g.onclick = new Function(this.n + ".pr(" + i + ",1)");     //点击缩略图时，调用pr方法 param2=1 表示停止自动播放
			}
		}
		if (b && f) {
			b = $(b);		//b代表imgpre 的div
			f = $(f);		//f代表imgnext 的div
			b.style.opacity = f.style.opacity = this.navOpacity / 100;
			b.style.filter = f.style.filter = "alpha(opacity=" + this.navOpacity + ")";
			b.onmouseover = f.onmouseover = new Function("TINY.alpha.set(this," + this.navHover + ",5)");
			b.onmouseout = f.onmouseout = new Function("TINY.alpha.set(this," + this.navOpacity + ",5)");
			b.onclick = new Function(this.n + ".mv(-1,1)");  	//pre调用mv(-1,1)
			f.onclick = new Function(this.n + ".mv(1,1)");		//next调用mv(1,1)
		}
		this.auto ? this.is(0, 0) : this.is(0, 1);       //然后视auto的初始值调用is函数  this.auto在页面赋值
	}, 
	is:function (s, c) {				//载入图片的函数  s为图片index c为是否auto播放的bool值
	//alert("######is:function "  +" s: "+  s +" c: "+ c);
		if (this.info) {
			TINY.height.set(this.r, 1, this.infoSpeed / 2, -1);
		}
		var i = new Image();
		i.style.opacity = 0; 
		i.style.filter = "alpha(opacity=0)";
		this.i = i;
	//alert("1###########"+c);
		i.onload = new Function(this.n + ".le(" + s + "," + c + ")");         	//onload  调用le函数   两个参数不变
	//alert("2###########"+s);
		i.src = this.a[s].p;			//设置fullsize图片地址
	//	i.width = this.a[s].width;			//设置fullsize图片宽高
	//	i.height = this.a[s].height;
		//alert("imgsrc:::::::"+i.src);
		//alert(this.thumbs == null);
		if (this.thumbs) {
			var a = $$("img", this.p), l = a.length, x = 0;   	//slider里的缩略图divs   
			for (x; x < l; x++) {
				a[x].style.borderColor = x != s ? "" : this.active;		//当前所显示图片的缩略图边框设为this.active(页面设置)，其他css控制
			}
		}
	}, 
	le:function (s, c) {				//大图切换
	//alert("######le:function "  +" s: "+ s +" c: "+ c);
		this.f.appendChild(this.i);				//image的div加入大图，this.i在is函数中被赋值
		var w = this.o - parseInt(this.i.offsetWidth);
		if (w > 0) {
			var l = Math.floor(w / 2);
			this.i.style.borderLeft = l + "px solid " + this.letterbox;
			this.i.style.borderRight = (w - l) + "px solid " + this.letterbox;
		}
		TINY.alpha.set(this.i, 100, this.imgSpeed);				//设置图片滤镜100
		var n = new Function(this.n + ".nf(" + s + ")");		//调用nf函数  参数s为图片的index
		//alert(this.imgSpeed);
		this.lt = setTimeout(n, this.imgSpeed * 100);			//重复完成？？？
		if (!c) {
			this.at = setTimeout(new Function(this.n + ".mv(1,0)"), this.speed * 1000);   //自动播放 则按时调用mv函数
		}
		var m = $$("img", this.f);			//m代表image div里的img元素
		if (m.length > 2) {			//原来是>2  意思是每两张清空一次。可是图片size若第二张盖不住第一张，就叠起来了，所以只能改为>1 。 删掉if就没图了。
			this.f.removeChild(m[0]);
		}
	}, 
	nf:function (s) {						//显示information的函数
	//alert("######nf:function " +" s: "+ s);
		if (this.info) {
			s = this.a[s];					//把s替换成了第s个li包装成的{}对象   				//为什么弄这样啊，直接this.a[s].t 这样用更易懂啊
			$$("h3", this.r)[0].innerHTML = s.t;					//添加图片title
			$$("p", this.r)[0].innerHTML = s.d;						//添加图片description
			this.r.style.height = "auto";							//height = auto
			var h = parseInt(this.r.offsetHeight);					
			this.r.style.height = 0;								
			TINY.height.set(this.r, h, this.infoSpeed, 0);			//设置info
		}
	},
	mv:function (d, c) {				//切换图片index计算   d为1或-1，表示向前向后  c是auto参数
	//alert("######mv:function "  +" d: "+  d +" c: "+ c);
		var t = this.c + d;				//this.c是当前图片的index  t表示目标图片index
		this.c = t = t < 0 ? this.l - 1 : t > this.l - 1 ? 0 : t;    //this.c 改成即将播放的图片index
		////  if(t<0)
		////	{ t = this.l - 1; }
		////  else if(t > this.l - 1 )
		////	{ t = 0; }
		////  this.c = t;
		this.pr(t, c);			//调用pr函数
	}, 
	pr:function (t, c) {
	//alert("######pr:function " +" t: "+   t +" c: "+  c);
		clearTimeout(this.lt); 						//information的timeout
		//alert("In pr:function ##### this.lt =="+ this.lt);
		if (c) {
			//alert("In pr:function ##### this.at =="+ this.at);				//照片播放的timeout
			clearTimeout(this.at);
		}
		this.c = t;		//这句在点击缩略图切换照片时有用，其他时候this.c已经在mv里面被赋值为t了
		this.is(t, c);				//重复is
	}
};
TINY.scroll = function () {
	return {init:function (e, d, s) {
		e = typeof e == "object" ? e : $(e);
		var p = e.style.left || TINY.style.val(e, "left");
		e.style.left = p;
		var l = d == 1 ? parseInt(e.offsetWidth) - parseInt(e.parentNode.offsetWidth) : 0;
		e.si = setInterval(function () {
			TINY.scroll.mv(e, l, d, s);
		}, 20);
	}, mv:function (e, l, d, s) {
		var c = parseInt(e.style.left);
		if (c == l) {
			TINY.scroll.cl(e);
		} else {
			var i = Math.abs(l + c);
			i = i < s ? i : s;
			var n = c - i * d;
			e.style.left = n + "px";
		}
	}, cl:function (e) {
		e = typeof e == "object" ? e : $(e);
		clearInterval(e.si);
	}};
}();
TINY.height = function () {
	return {set:function (e, h, s, d) {
		e = typeof e == "object" ? e : $(e);
		var oh = e.offsetHeight, ho = e.style.height || TINY.style.val(e, "height");
		ho = oh - parseInt(ho);
		var hd = oh - ho > h ? -1 : 1;
		clearInterval(e.si);
		e.si = setInterval(function () {
			TINY.height.tw(e, h, ho, hd, s);
		}, 20);
	}, tw:function (e, h, ho, hd, s) {
		var oh = e.offsetHeight - ho;
		if (oh == h) {
			clearInterval(e.si);
		} else {
			if (oh != h) {
				e.style.height = oh + (Math.ceil(Math.abs(h - oh) / s) * hd) + "px";
			}
		}
	}};
}();
TINY.alpha = function () {
	return {set:function (e, a, s) {
		e = typeof e == "object" ? e : $(e);
		var o = e.style.opacity || TINY.style.val(e, "opacity"), d = a > o * 100 ? 1 : -1;
		e.style.opacity = o;
		clearInterval(e.ai);
		e.ai = setInterval(function () {
			TINY.alpha.tw(e, a, d, s);
		}, 20);
	}, tw:function (e, a, d, s) {
		var o = Math.round(e.style.opacity * 100);
		if (o == a) {
			clearInterval(e.ai);
		} else {
			var n = o + Math.ceil(Math.abs(a - o) / s) * d;
			e.style.opacity = n / 100;
			e.style.filter = "alpha(opacity=" + n + ")";
		}
	}};
}();
TINY.style = function () {
	return {val:function (e, p) {
		e = typeof e == "object" ? e : $(e);
		return e.currentStyle ? e.currentStyle[p] : document.defaultView.getComputedStyle(e, null).getPropertyValue(p);
	}};
}();


		
		
		
		
