/**
 * 本組件提供了圖片滾動的功能。 可以根據用戶傳入的圖片地址、圖片描述信息，圖片寬度、高度等信息 將圖片列表生成到指定的容器上，並讓圖片列表中的圖片進行滾動。
 */

Ext.ns("com.trs.ScrollImage");
Ext.apply(String, {
	parse : function(_sTemplate, _oParameters){
		return _sTemplate.replace(/\{(\w+)\}/g, function(m, i){
			return _oParameters[i.toUpperCase()];
		});
	}
	
});
(function() {
	//緩沖新產生的對象，以便可以執行銷毀
	var cache = {};

	/*
	 * 每一個圖片的html結構模板
	 */

		var sTemplate = [
			'<div class="img-item">',
				'<div>', 
					'<a target="_blank" href="{LINKURL}">',
					'<img alt="" src="{IMGURL}" style="width:{WIDTH}px;height:{HEIGHT}px;"/>', 
					'</a>', 
				'</div>',
				'<div style="display:{SHOWDESC};" class="img-descs"><a target="_blank" href="{LINKURL}">{DESC}</a></div>', 
			'</div>'].join("");

	/**
	 *
	 * @this {Array} imgUrls :	需要顯示的圖片url地址的集合 <br>
	 * @this {String} container:	圖片列表將渲染在id為domId的容器中 <br>
	 * @this {Array} descs :	圖片描述
	 * @this {String}width:	渲染圖片的容器寬度
	 * @this {String}height:	渲染圖片的容器高度
	 * @this {String}speed:	圖片滾動的速度（值越大滾動的越慢）
	 * @this {String}space:	圖片每次滾動的像素（值越大圖片滾動一次移動的距離越大）
	 * @this {int}hasDescs:	是否顯示圖片描述
	 * @this {String}direction:	圖片滾動方向
	 * @this {String}canvasHeight:	畫布高度
	 * @this {int}page:	翻多少張圖片
	 * 
	 */
	com.trs.ScrollImage = function(cfg) {
		cache[cfg.container] = this;
		Ext.apply(this, cfg);
		this.speed = parseInt(this.speed, 10) || 60;
		this.space = parseInt(this.space, 10) || 2;
		this.hasDescs = !!parseInt(this.hasDescs, 10);
		var width = parseInt(this.width.substring(0,this.width.length-2),10);
		var page = parseInt(this.page, 10) || 0;
		this.pagesWidth = width * page;
	}

	/**
	*
	*/
	com.trs.ScrollImage.get = function(container){
		return cache[container];
	}

	com.trs.ScrollImage.prototype = {
		/**
		 * 根據傳入的配置信息，將滾動圖片列表渲染在指定的容器內
		 * 
		 */
		render : function() {
			var container = $(this.container);
			if (!container) {
				return;
			}

			// 產生一個比較長的容器，從而使內部的圖片元素在一行顯示，不出現折行
			var bigDiv = document.createElement("div");
			
			Element.addClassName(bigDiv, "ScrollImg"+(this.direction||"horizontal")+"Cls");
			bigDiv.style.zoom = 1;// 解決ie6下可能存在的不能正確顯示的bug

			/*
			 * 創建兩個相同的子div容器，每個div裡面包含了所有的圖片和描述信息
			 * 為什麼創建兩個相同的div，是為了解決圖片列表滾動到最尾部的時候再切換 到最初位置時的閃動現象
			 */
			this.div1 = this.appendList2Node(bigDiv);
			Element.addClassName(this.div1, "div1Cls");
			this.div2 = this.appendList2Node(bigDiv);
			Element.addClassName(this.div2, "div2Cls");

			// 將創建的大的div添加到指定的容器內
			container.innerHTML = "";
			container.appendChild(bigDiv);

			if(this.direction =="vertical"){
				container.style.height = (this.rollingHeight||300)+"px";
			}


			this.autoPlay();

		},

		autoPlay : function(){
			var context = this;
			
			if(this.pagesWidth>0){
				this.playTheadId = -1;
				clearInterval(this.playTheadId);
				this.playTheadId = setInterval(function(){
					context.play2(true);
				}, 7000);
			}else{
				var container = $(context.container);
				container.onmouseover = function() {
					context.stop();
				};
				container.onmouseout = function() {
					context.play()
				};
				this.play();
			}

		},
		play2 : function(bLeft){
			var context = this;
			clearInterval(this.intervalHandler);
			this.moveStopFlag = false;
			this.scrollSpace = 0;
			if(bLeft){
				context.scrollNext();
			}else{
				context.scrollLast();
			}
			this.intervalHandler = setInterval(function() {
				if(bLeft){
					context.scrollNext();
				}else{
					context.scrollLast();
				}
			}, this.speed);
		},

		// private
		play : function() {
			var context = this;
			clearInterval(this.intervalHandler);
			this.intervalHandler = setInterval(function() {
				context.scrollNext();
			}, this.speed);
		},

		// private
		stop : function() {
			clearInterval(this.intervalHandler);
		},

		// private
		scrollNext : function() {
			var container = $(this.container);
			try {
				if(this.pagesWidth>0 && this.scrollSpace>this.pagesWidth){
					this.moveStopFlag=true;
					clearInterval(this.intervalHandler);
				}
				this.scrollSpace += this.space;
				if(this.direction == "vertical"){
					container.scrollTop += this.space;
					if (container.scrollTop > this.div1.scrollHeight) {
						container.scrollTop = container.scrollTop
								- this.div1.scrollHeight;
					};
				}else{
					container.scrollLeft += this.space;
					// 如果第一個圖片列表已經滾到容器外面，說明需要重新初始化第一個圖片列表的位置
					if (container.scrollLeft > this.div1.scrollWidth) {
						container.scrollLeft = container.scrollLeft
								- this.div1.scrollWidth;
					};
				}
			} catch (e) {
				this.stop();
				return;
			}


			
		},

		// private
		scrollLast : function() {
			var container = $(this.container);
			try {
				if(this.pagesWidth>0 && this.scrollSpace>this.pagesWidth){
					this.moveStopFlag=true;
					clearInterval(this.intervalHandler);
				}
				this.scrollSpace += this.space;
				container.scrollLeft -= this.space;
			} catch (e) {
				this.stop();
				return;
			}


			// 如果第一個圖片列表已經滾到容器外面，說明需要重新初始化第一個圖片列表的位置
			if (container.scrollLeft <= 0) {
				container.scrollLeft = this.div1.scrollWidth;
			};
		},

		/*
		 * 構造圖片列表，添加到節點parent中
		 */
		// private
		appendList2Node : function(parent) {
			var dom = document.createElement("div");

			var aHtml = [];
			var imgUrls = this.imgUrls;
			var descs = this.descs;
			var linkUrls = this.linkUrls;
			for (var i = 0; i < imgUrls.length; i++) {
				var imgUrl = imgUrls[i];
				if(!imgUrl){
					continue;
				}
				if (imgUrl.toUpperCase().indexOf("HTTP") < 0) {
					imgUrl = wcm.Constant.ROOT_PATH + imgUrl;
				}
				aHtml.push(String.parse(sTemplate, {
								IMGURL : imgUrl, 
								LINKURL: linkUrls[i] || imgUrl,
								DESC : descs[i] || "",
								WIDTH : this.width,
								HEIGHT :this.height, 
								SHOWDESC : (this.hasDescs?"":"none")
							}));
			}
	
			dom.innerHTML = aHtml.join("");
			parent.appendChild(dom);
			return dom;
		},

		/**
		 * 清除掉滾動圖片綁定的關聯事件
		 */
		destroy : function() {
			this.stop();
			var container = $(this.container);
			container.onmouseover = null;
			container.onmouseout = null;
			delete this.div1;
			delete this.div2;
		}
	};
})();