function getstyle(obj, name) {
	if (obj.currentstyle) {
		return obj.currentstyle[name];
	} else {
		return getcomputedstyle(obj, false)[name];
	}
}
//var alpha = 30;
function startmove(obj, arr, itarget) {
	clearinterval(obj.timer);

	obj.timer = setinterval(function() {
		var cur = 0;
		if (arr == 'opacity') {
			cur = math.round(parsefloat(getstyle(obj, arr)) * 100);
		} else {
			cur = parseint(getstyle(obj, arr));
		}
		var speed = (itarget - cur) / 6;
		speed = speed > 0 ? math.ceil(speed) : math.floor(speed);
		if (cur == itarget) {
			clearinterval(obj.timer);
		} else {
			if (arr == 'opacity') {
				obj.style.filter = 'alpha(opcity:' + (cur + speed) + ')';
				obj.style.opacity = (cur + speed) / 100;

				//	document.getelementbyid('tex1').value = obj.style.opacity;
			} else {
				obj.style[arr] = cur + speed + 'px';
			}
		}
	}, 30);
}

function getbyclass(oparent, sclass) {
	var aele = oparent.getelementsbytagname('*');
	var aresult = [];

	for (var i = 0; i < aele.length; i++) {
		if (aele[i].classname == sclass) {
			aresult.push(aele[i]);
		}
	}
	return aresult;
}


window.onload = function() {
	var odiv = document.getelementbyid('playimages');
	var obtnprev = getbyclass(odiv, 'prev')[0];
	var obtnnext = getbyclass(odiv, 'next')[0];
	var omarkleft = getbyclass(odiv, 'mark_left')[0];
	var omarkright = getbyclass(odiv, 'mark_right')[0];
	//var odivsmall=document.getelementbyid('small_pic');
	var odivsmall = getbyclass(odiv, 'small_pic')[0];
	var oulsmall = odivsmall.getelementsbytagname('ul')[0];
	var alismall = odivsmall.getelementsbytagname('li');


	var oulbig = getbyclass(odiv, 'big_pic')[0];
	var alibig = oulbig.getelementsbytagname('li');


	var nowzindex = 2;
	var now = 0;
	oulsmall.style.width = alismall.length * alismall[0].offsetwidth + 'px';

	//左右按钮
	obtnprev.onmouseover = omarkleft.onmouseover = function() {
		startmove(obtnprev, 'opacity', 100);

	};
	obtnprev.onmouseout = omarkleft.onmouseout = function() {
		startmove(obtnprev, 'opacity', 0);
	};
	obtnnext.onmouseover = omarkright.onmouseover = function() {
		startmove(obtnnext, 'opacity', 100);
	};
	obtnnext.onmouseout = omarkright.onmouseout = function() {
		startmove(obtnnext, 'opacity', 0);
	};
	//大图切换
	for (var i = 0; i < alismall.length; i++) {
		alismall[i].index = i;
		alismall[i].onclick = function() {
			//alert('222');	
			if (this.index == now) return;
			now = this.index;
			tab();


		}
		alismall[i].onmouseover = function() {
			startmove(this, 'opacity', 100);
		};
		alismall[i].onmouseout = function() {
			if (this.index != now) {
				startmove(this, 'opacity', 30);
			}
		};
	}

	function tab() {
		alibig[now].style.zindex = nowzindex++;

		for (var i = 0; i < alismall.length; i++) {
			startmove(alismall[i], 'opacity', 30);
		}

		alibig[now].style.height = 0;
		startmove(alibig[now], 'height', 320);
		startmove(alismall[now], 'opacity', 100);
		if (now == 0) {
			startmove(oulsmall, 'left', 0);
		} else if (now == alismall.length - 1) {
			startmove(oulsmall, 'left', -(now - 2) * alismall[0].offsetwidth);
		} else {
			startmove(oulsmall, 'left', -(now - 1) * alismall[0].offsetwidth);
		}
	}
	obtnprev.onclick = function() {
		now--;
		if (now == -1) {
			now = alismall.length - 1;
		}
		tab();
	}
	obtnnext.onclick = function() {
		now++;
		if (now == alismall.length) {
			now = 0;
		}
		tab();
	};
	var timer = setinterval(obtnnext.onclick, 2000);
	odiv.onmouseover = function() {
		clearinterval(timer);
	};
	odiv.onmouseout = function() {
		timer = setinterval(obtnnext.onclick, 2000);
	};
};
// javascript document