<!--
//图片展示

function ImageSlide(imageHeight, thumbHeight) {
	this.id = "ImageSlide_" + (ImageSlide.count++);
	ImageSlide.instances[this.id] = this;
	
	this.imageHeight    = 280;
	this.thumbWidth     = 60;
	this.thumbHeight    = 40;
	this.speed     = 3;         //速度,秒
	this.autoPlay = true;
	this.loop      = true;        //是否循环
	
	this.selectSpeedNum = "2,4,6,8,10";  //速度秒数
	
	this.navBarMode = 0; //导航模式,0:下拉选单, 1:第一前一后一最后, 2:数字, 3:1+2, 4:画面内部数字	
	this.defaultKey = 0;
	
	this.mainContainerId = null; 
	this.thumbContainerId = null; 
	this.noteContainerId = null;
	this.navbarContainerId = null;       //导航容器
	this.speedContainerId = null;           //速度选单容器

	this._mainDivObj;
	this._loadingObj;
	this._imageWidth;
	this._thumbsDivObj;
	this._thumbsDivObj_c;
	this._actLeftObj;
	this._actRightObj;
	
	this.count = 0;
	this._thumbLoadedCount = 0;

    this._originalData = [];
	this._data     = []; 
    this._thumbData     = []; 
	this._noteData = [];
	this._currKey  = 0;
	this.objNavSelect = null;
	
	this.defaultText = "No Data!";
	this._lastKey = null;
	this._objItemSelect = null;        //下拉选单
	
	this._thumbsTotalWidth = 0;
	this._timerId = null;

	this._hasDisplay = false;

	this.callback = null;
	this.focusCallback = null;
}

ImageSlide.instances = {};
ImageSlide.count = 0;

ImageSlide.prototype.get_zoom_size = function (srcW, srcH, dstW, dstH, scale)
{ 
	var x = dstW > 0 ? srcW / dstW : 0;
	var y = dstH > 0 ? srcH / dstH : 0;
	var newsize = [];	
	if (((x == 0 || x == 1) && (y == 0 && y == 1)) || (x < 1 && y < 1 && !scale)) newsize = [srcW, srcH, srcW, srcH];
	else {
		if (x > y){
			if (scale){
				srcW = Math.floor(srcW/y);
				srcH = dstH;
			}
			else {
				dstW = Math.floor(srcW/x);
				dstH = Math.floor(srcH/x);			
			}
		}
		else {
			if (scale){
				srcW = dstW;
				srcH = Math.floor(srcH/x);
			}
			else {
				dstW = Math.floor(srcW/y);
				dstH = Math.floor(srcH/y);
			}
		}
		if (!scale){
			srcW = dstW;
			srcH = dstH;
		}
		newsize = [dstW, dstH, srcW, srcH];
		//alert(newsize)
	}

	return newsize;
}

ImageSlide.prototype.zoom_img = function (objDiv, img, dstW, dstH, cut, callback)
{
	var srcW = img.width;
	var srcH = img.height;
	var newsize = this.get_zoom_size(srcW, srcH, dstW, dstH, cut);

	var left = 0, top = 0;
	if (typeof objDiv == 'object') {
		if (newsize[2] <= newsize[0]) left = 0;
		else left = Math.floor((newsize[2] - newsize[0])/2);
		if (newsize[3] <= newsize[1]) top = 0;
		else top = Math.floor((newsize[3] - newsize[1])/2);
		objDiv.css({width:newsize[0], height:newsize[1]});
	}
	
	$(img).css({width:newsize[2], height:newsize[3], left:-left, top:-top});

	if (callback) callback(newsize[0], newsize[1]);
}

ImageSlide.prototype.addImage = function (imgUrl, thumbUrl, linkUrl, imgNote, params)
{
	if (!imgUrl || !thumbUrl) return false;
	this._originalData[this._originalData.length] = [imgUrl, thumbUrl, linkUrl, imgNote, params];
	this.count++;
}

ImageSlide.prototype.display = function (mainContainerId, thumbContainerId, noteContainerId, navbarContainerId, speedContainerId)
{
	if (this._hasDisplay)return true;
	this._hasDisplay = true;
	
	var str, t=this, cssH, cssW, actH, key;

	if (mainContainerId) this.mainContainerId = mainContainerId;
	if (thumbContainerId) this.thumbContainerId = thumbContainerId;
	if (noteContainerId) this.noteContainerId = noteContainerId;
	if (navbarContainerId) this.navbarContainerId = navbarContainerId;
	if (speedContainerId) this.speedContainerId = speedContainerId;
	
	var mainContainerObj = $("#"+this.mainContainerId);
	var thumbContainerObj = this.thumbContainerId ? $("#"+this.thumbContainerId) : this.mainContainerObj;
	
	cssH = 'height:'+this.imageHeight+'px; ';
	str  = '<div class="ImageSlide_main_p">';
	str += '	<div class="ImageSlide_main" id="ImageSlide_main_'+this.id+'" style="'+cssH+'">';
	str += '	 	<div class="ImageSlide_loading" id="ImageSlide_loading_'+this.id+'" style="'+cssH+'"></div>';
	str += '	</div>';
	str += '</div>';
	mainContainerObj.html(str);
	this._mainDivObj = $('#ImageSlide_main_'+this.id);
	this._loadingObj = $('#ImageSlide_loading_'+this.id);
	this._imageWidth = this._mainDivObj.width();
	this._mainDivObj.css({width:this._imageWidth});
	
	cssH = 'height:'+this.thumbHeight+'px; ';
	str  = '<div class="ImageSlide_thumbs_contaiter">';
	str += '	<div class="ImageSlide_thumbs_0">';
	str += '		<div class="ImageSlide_thumbs_0_c">';
	str += '			<div class="ImageSlide_thumbs_1">';
	str += '				<div class="ImageSlide_thumbs_1_c" id="ImageSlide_thumbs_'+this.id+'" style="'+cssH+'">';
	str += '					<div class="ImageSlide_thumbs_c" id="ImageSlide_thumbs_c_'+this.id+'" style="'+cssH+'"></div>';
	str += '				</div>';
	str += '			</div>';
	str += '			<div class="ImageSlide_act_right" style="'+cssH+'"><a id="ImageSlide_right_'+this.id+'" href="#"></a></div>';
	str += '		</div>';
	str += '	</div>';
	str += '	<div class="ImageSlide_act_left" style="'+cssH+'"><a id="ImageSlide_left_'+this.id+'" href="#"></a></div>';
	str += '</div>';
	thumbContainerObj.html(str);
	this._thumbsDivObj = $('#ImageSlide_thumbs_'+this.id);
	this._thumbsDivObj_c = $('#ImageSlide_thumbs_c_'+this.id);
	this._actLeftObj = $('#ImageSlide_left_'+this.id);
	this._actRightObj = $('#ImageSlide_right_'+this.id);
	actH = Math.floor((this.thumbHeight-this._actLeftObj.height())/2);
	this._actLeftObj.css("marginTop", actH);
	this._actRightObj.css("marginTop", actH);
	if (this.count > 1) {
		this._actLeftObj.bind("click", function(){ t.prev(); return false; });
		this._actRightObj.bind("click", function(){ t.next(); return false; });
	}
	else {
		this._actLeftObj.bind("click", function(){ return false; });
		this._actRightObj.bind("click", function(){ return false; });
		this._actLeftObj.addClass('ImageSlide_disabled');
		this._actRightObj.addClass('ImageSlide_disabled');
	}

	for (var i=0;i<this._originalData.length;i++) {
		this.writeThumb(i);
	}
	
	if (this.navbarContainerId) this.createNavbar();

	this.container_note_obj = $("#"+this.noteContainerId);

	//this.navbar();
	var ready_timer = setInterval(function(){
		if (t._thumbLoadedCount == t.count){
			clearInterval(ready_timer);
			t.change(t.defaultKey);
		}
	}, 100);
} 

ImageSlide.prototype.writeThumb = function (key)
{
	var objThumb, objCanvas, objStyle, objA, objImg, id, key, str, t=this, maxH = 0, thisH, actH, w, h, l;
	id = this.id+'_'+key;
	str  = '<div class="ImageSlide_thumb_contaiter" id="ImageSlide_div_thumb_'+id+'">';
	str += '	<div class="ImageSlide_thumb_canvas" id="ImageSlide_thumb_canvas_'+id+'">';
	str += '		<div class="ImageSlide_thumb_style" id="ImageSlide_thumb_style_'+id+'">';
	str += '			<a href="#" style="overflow:hidden; position:relative; display:block; width:'+t.thumbWidth+'px; height:'+t.thumbHeight+'px;" id="ImageSlide_thumb_a_'+id+'"><img id="ImageSlide_thumb_image_'+id+'" src="'+this._originalData[key][1]+'" style="border:0px; position:absolute"></a>';		
	str += '		</div>';
	str += '	</div>';
	str += '</div>';
	this._thumbsDivObj_c.append(str);
	objThumb = $("#ImageSlide_div_thumb_"+id);
	objCanvas = $("#ImageSlide_thumb_canvas_"+id);
	objStyle = $("#ImageSlide_thumb_style_"+id);
	w = objCanvas.width();
	h = objCanvas.height();
	l = t._thumbsTotalWidth;
	objThumb.css({width:w, height:h, left:t._thumbsTotalWidth, top:0});	
	t._thumbsTotalWidth += w; 			
	t._thumbsDivObj_c.css("width", t._thumbsTotalWidth); 
	if(t._thumbLoadedCount == 0) {
		t._thumbsDivObj.css("height", h);
		t._thumbsDivObj_c.css("height", h);
		actH = Math.floor((h-t._actLeftObj.height())/2);
		t._actLeftObj.css({marginTop:actH, marginBottom:actH});
		t._actRightObj.css({marginTop:actH, marginBottom:actH});
	}
	objA = $("#ImageSlide_thumb_a_"+id);
	objImg = $("#ImageSlide_thumb_image_"+id);	
	objImg.css({opacity:0.5});
	objImg.hover(
		function(){ if (key != t._currKey-1) { $(this).animate({opacity:1}, "fast"); objStyle.css("background", "#fc3"); } },
		function(){ if (key != t._currKey-1) { $(this).animate({opacity:0.5}, "fast"); objStyle.css("background", "#fff"); }}
	);
	objImg.bind('load', function(){ 
		t.zoom_img(objA, this, t.thumbWidth, t.thumbHeight, true, function(w, h){ 			
			t._thumbLoadedCount++;
		});
		objImg.unbind('load');
	});
	var callback = typeof this.callback == 'function' ? this.callback : null;	
	objA.bind('click', function(){ 
		if (key != t._currKey-1) t.change(key);
		if (callback) callback(key);
		return false;
	});
	
	this._thumbData[key] = {
		key : key,
		left : l,
		width : w,
		objThumb : objThumb,
		objStyle : objStyle,
		objImg : objImg
	};

}

ImageSlide.prototype.play = function ()
{
	this.autoPlay = true;
	this.change();
} 

ImageSlide.prototype.stop = function ()
{
	this.autoPlay = false;
	if (this._timerId) {
		clearTimeout(this._timerId);
		this._timerId = null;
	}
} 

ImageSlide.prototype.prev = function ()
{
	this.change(this._currKey-2);
} 

ImageSlide.prototype.next = function ()
{
	this.change();
} 


//创建下拉选单   
ImageSlide.prototype.createNavbar = function ()
{
	if (this._originalData.length == 0) return false;
	if (!this.navbarContainerId) return false;
	
	var t = this;

	var str = '<select id="ImageSlide_navbar_'+this.id+'">';
	for (var i=0; i < this._originalData.length; i++ ){
		str += '<option value="'+i+'">'+(i+1)+'</option>';
	}
	str += '</select>';
	$("#"+this.navbarContainerId).html(str);
	this.objNavSelect = $("#ImageSlide_navbar_"+this.id);
	this.objNavSelect.bind("change", function(){
		t.change(this.value);
	});
} 

ImageSlide.prototype.setNavbarSelected = function (key)
{
	if (!this.objNavSelect) return false;
	this.objNavSelect.val(key);
}

//创建速度下拉选单
ImageSlide.prototype._createSpeedSelect = function ()
{
	if (this._originalData.length == 0)return false;
	if (!this.speedContainerId)return false;
	if (!this.selectSpeedNum)return false;
	var speeds = this.selectSpeedNum.split(",");
	var sel = document.createElement("select");
	var last_i = 0;
	for (var n in speeds){
		var i = speeds[n];
		if (last_i < this.speed && this.speed < i){
			var op = document.createElement("option");
			op.appendChild(document.createTextNode(this.speed));
			op.value = this.speed;
			sel.appendChild(op);
		}
		last_i = i;
		var op = document.createElement("option");
		op.appendChild(document.createTextNode(i));
		op.value = i;
		sel.appendChild(op);
	}
	sel.value = this.speed;
	var s = this;
	js.Event.addEvent(sel, 'change', function (){s.speed = sel.value;s.play();});
	if (this.speedContainerId){
		if (typeof(this.speedContainerId) == "string")this.speedContainerId = js.Dom.findObj(this.speedContainerId);
		this.speedContainerId.appendChild(sel);
	}
} 

ImageSlide.prototype.change = function (key, noCallFocusCallback)
{
	if (this._timerId) {
		clearTimeout(this._timerId);
		this._timerId = null;
	}
	
	if (this._originalData.length == 0)return this.stop();

	if (!isNaN(key)) this._currKey = Math.round(key);
	
	if (this._currKey < 0){
		this._currKey = this._originalData.length - 1;
		if (!this.loop){
			this.stop();
			return false;
		}
	}
	else if (this._currKey >= this._originalData.length){
		this._currKey = 0;
		if (!this.loop){
			this.stop();
			return false;
		}
	}
	if (!this._originalData[this._currKey])return this.stop();
	
	this.loadImage();
	this.focusThumb();
	this.setNote();
	
	/*
	if (this._objItemSelect)this._objItemSelect.value = this._currKey;	
	*/
	this.setNavbarSelected(this._currKey);	

	if (!noCallFocusCallback && this.focusCallback)
	{
		var focusCallback = this.focusCallback;
		focusCallback(this._currKey);
	}
	
	this.setLastKey(this._currKey);
	
	this._currKey++;
}

ImageSlide.prototype.setLastKey = function (key)
{
	this._lastKey = key;
}

ImageSlide.prototype.loadImage = function ()
{
	var t = this;

	if (this._mainDivObj.size() == 0)
	{
		if (t.autoPlay)this.setNext();
		return false;
	}
	
	if (this._lastKey != null && this._data[this._lastKey]){
		this._data[this._lastKey].hide();
	}

	if (this._data[this._currKey]) {
		this._data[this._currKey].fadeIn();
		if (t.autoPlay)this.setNext();
	}
	else if (this._originalData[this._currKey])
	{
		this._loadingObj.show();
		
		var str='', imgUrl, imgNote, linkUrl, imgT, objA, imgObj;
		var id = this.id+'_'+this._currKey;
		imgUrl = this._originalData[this._currKey][0];
		linkUrl = this._originalData[this._currKey][2];
		
		str = '<div id="ImageSlide_div_image_'+id+'" style="">';
		str += '		<a id="ImageSlide_a_'+id+'" href="'+(linkUrl?linkUrl:"#")+'" ><img id="ImageSlide_image_'+id+'" src="'+imgUrl+'" style="border:0px; visibility:hidden;"></a>';
		str += '</div>';
		this._mainDivObj.append(str);
		this._data[this._currKey] = $("#ImageSlide_div_image_"+id);
		objA = $("#ImageSlide_a_"+id);
		imgObj = $("#ImageSlide_image_"+id);
		imgObj.bind('load', function(){ 
			imgT = this;
			t.zoom_img(objA, imgT, t._imageWidth, t.imageHeight, false, function(w, h){
				if (h < t.imageHeight) imgObj.css({marginTop:Math.floor((t.imageHeight-h)/2)});
			});
			$(this).css("visibility", "visible");
			$(this).hide();
			t._loadingObj.hide();
			$(this).fadeIn();
			if (t.autoPlay)t.setNext();
			imgObj.unbind('load');
		});
		
		if (!linkUrl && this.count > 1){
			objA.bind("click", function(){t.next(); return false;});
			imgObj.attr("title", "点击看下一张");
		}
	}
	else return false;
}

ImageSlide.prototype.setNext = function ()
{
	var t = this;
	if (t._originalData.length > 1){
		t._timerId = setTimeout(function (){t.change()}, t.speed * 1000);
	}
}

ImageSlide.prototype.focusThumb = function ()
{
	if (this._lastKey != null && this._thumbData[this._lastKey]){
		this._thumbData[this._lastKey].objImg.animate({opacity:0.5}, "fast");
		this._thumbData[this._lastKey].objStyle.css("background", "#fff");
	}
	
	if (this._thumbData[this._currKey]){
		this._thumbData[this._currKey].objImg.animate({opacity:1}, "fast");
		this._thumbData[this._currKey].objStyle.css("background", "#f90");
	}
	
	var this_left = this._thumbData[this._currKey].left || 0;
	var this_width = this._thumbData[this._currKey].width || Math.floor(this.thumbHeight/3*4);
	
	var container_left = this._thumbsDivObj.offset().left;
	var container_width = this._thumbsDivObj.width();
	var max_left = 0;
	var min_left = this._thumbsDivObj.width() - this._thumbsTotalWidth;
	
	var left = -(this_left - Math.floor((container_width - this_width) / 2));
	if (left < container_width - this._thumbsTotalWidth) left = container_width - this._thumbsTotalWidth
	left = Math.min(0, left);
	
	this._thumbsDivObj_c.animate({left: left});
}

ImageSlide.prototype.setNote = function ()
{
	if (this.container_note_obj.length == 0)return false;
	
	var html = '';
	if (typeof this._originalData[this._currKey][3] == 'object')
	{
		html = $(this._originalData[this._currKey][3]).html();
	}
	else {
		html = this._originalData[this._currKey][3];
	}
	this.container_note_obj.html(html);
}

//-->