/**
 * @fileoverview 游戏人像册
 * @author <a href="dron@qq.com">dron</a>
 * @version 0.9
 * @create-date 2008/12/1
 */
Ucren.onReady(function(){
	// 页面布局
	var layout = new Ucren.LayoutSet({ type: "tb", container: "layout" });
	layout.addPanel({ id: "top", height: 60, minHeight: 60 });
	layout.addBorder(false);
	layout.addPanel({ id: "left-main" });
	layout.render();

	var layout2 = new Ucren.LayoutSet({ type: "lr", container: layout.getPanelById("left-main") });
	layout2.addPanel({ id: "left", width: 240, minWidth: 240 });
	layout2.addBorder(true, "left");
	layout2.addPanel({ id: "main", minWidth: 300 });
	layout2.render();
	// 页面布局到此结束

	// 页眉部分
	layout.getPanelById("top").addDom("topZone");
	layout2.getPanelById("left").addDom("treeZone");
	layout2.getPanelById("main").addDom("mainZone");

	// 渲染树
	var treedata = new Ucren.DataVess({
		fields: ["id", "parentId", "icon", "name", "isFolder", "opened", "msg"],
		records: []
	});
	treedata.onLoad = function(){

		for(var i = 0, r; i < this.count; i ++){
			this.go(i);
			var msg = this.read("msg");
			if(msg == ""){
				this.edit("name", "<span style='color: #bbb;'>" + this.read("name") + "</span>");
			}else if(msg == "hs"){
				this.edit("name", "<span style='color: red;'>" + this.read("name") + "</span>");
			};
		}

		var tree = new Ucren.EditorTreeView({
			data: this,
			container: "tree",
			editable: false,
			moveable: false,
			pickable: false,
			onItemClick: function(){
				var locat = Ucren.get("locat");
				return function(msg){
					if(msg == "f:"){
						return ;
					};
					if(msg == ""){
						var photos = Ucren.get("photo-icons");
						photos.setHtml("<table cellspacing='0' cellpadding='0' width='100%' height='350'><tr><td align='center' style='color: #808080;'>该专辑尚没有照片，请选择其它专辑。</td></tr></table>");
						return ;
					};
					treedata.pos("msg", msg);
					locat.setHtml("(" + treedata.read("name") + ")");
					photoList.loadIcons("datas/icons/" + msg + "/data.xml");
				};
			}()
		});
		tree.onRender = function(){
			tree.focus(1);
		};
		tree.render();
	};
	treedata.loadFromXml("datas/menu.xml");

	// 定义 window.onresize 事件
	Ucren.addEvent(window, "resize", function(){
		BODY.refresh();

		var lay = Ucren.get("layout");
		lay.resizeTo(BODY.width, BODY.height);

		var photos = Ucren.get("photo-icons");
		photos.setHeight(BODY.height - 87);
	})();

	loading.hide();
});

// ==== loading
var loading = function(){
	var loading = Ucren.get("loading");
	var loadingBg = Ucren.get("loading-bg");
	var loader = Ucren.get("loading-loader");
	var loadingText = Ucren.get("loading-text");
	var loadingState = Ucren.get("loading-state");
	var lastdecimal;
	var tempdecimal;
	return {
		// 显示 loading
		show: function(text){
			var proc = 0;
			var time = 150;
			var intervFun = function(){
				var n = Math.max(Math.floor((100 - proc) / 4), 0);

				if(n == 0)lastdecimal = lastdecimal + Ucren.randomNumber(10);
				else lastdecimal = Ucren.randomNumber(1000);

				proc = Math.min(proc + n, 100);
				loader.setStyle({ width: proc + "%" });

				if(lastdecimal > 999){
					proc = Math.min(proc + 1, 99);
					lastdecimal -= 1000;
				};

				tempdecimal = lastdecimal / 1000;
				loadingState.setHtml((proc + tempdecimal) + "%");
				this.interv = setTimeout(intervFun, time);
			}.createDelegate(this);

			loadingText.setHtml(text + "...");
			loadingBg.setDisplay(true);
			loading.setDisplay(true);
			intervFun();
			clearTimeout(this.interv);

			time = 250;
			this.interv = setTimeout(intervFun, time);
			this.working = true;
		},

		// 隐藏 loading
		hide: function(){
			var close = function(){
				loading.setDisplay(false);
				loadingBg.setDisplay(false);
			};
			return function(){
				clearTimeout(this.interv);
				loadingText.setHtml("完成.");
				loader.setStyle({ width: "100%" });
				loadingState.setHtml("100%");
				setTimeout(close, 500);
				this.working = false;
			};
		}()
	};
}();
loading.show("正在加载页面");

// ==== photolist
var photoList = {
	// 加载收略图
	loadIcons: function(){
		var lastId;
		var temp = Ucren.String(
			"<div class='item' index='@{index}' onmouseover='this.style.backgroundColor=\"#ddd\"' onmouseout='this.style.backgroundColor=\"\"' onclick='photoList.zoom(this)'>",
				"<div class='icon'><img src='datas/icons/@{small}' alt='' width='@{width}' height='@{height}' onerror='this.src=this.src' /></div>",
				"<div class='text'>@{name}</div>",
			"</div>"
		);
		var temp2 = Ucren.String("<div class='photo-float' id='@{id}'>@{items}<div class='ucren-clear'></div></div>");
		var photos = Ucren.get("photo-icons");
		var rend = function(json){
			for(var i = 0, r, h = [], l = json.length; i < l; i ++){
				r = json[i];
				h[i] = temp.replace({
					index: i,
					small: r.small,
					width: r.width,
					height: r.height,
					name: r.name
				});
			};
			photos.setHtml(temp2.replace({
				id: lastId = Ucren.id(),
				items: h.join("")
			}));
			loading.hide();
		};
		var xo = new Ucren.XmlOperator;
		var onLoad = function(){
			rend(photoList.list = xo.toJSON());
		};
		return function(file){
			photos.setHtml("");
			loading.show("正在加载照片列表");
			xo.onLoad = onLoad;
			xo.load(file);
		};
	}(),

	// 放大缩略图
	zoom: function(){
		var curIndex;
		return function(item){
			curIndex = +item.getAttribute("index");
			photoViewer.load(this.list, curIndex);
		};
	}()
};

// ==== photoViewer
var photoViewer = function(){
	var viewer = Ucren.get("viewer");
	var viewerBg = Ucren.get("viewer-bg");
	var viewerPad = Ucren.get("viewer-pad");
	var curId, curImg;
	var viewerPadShowIn = function(){
		var n = 0;
		var play = function(){
			viewerPad.setAlpha(n);
			if(n < 100){
				n += 10;
				setTimeout(play, 10);
			}else{

			}
		}
		return function(){
			n = 0;
			play();
		};
	}();
	return {
		show: function(){
			viewer.setDisplay(true);
			viewerBg.setDisplay(true);
			viewerPadShowIn();
			this.working = true;
		},
		hide: function(){
			viewer.setDisplay(false);
			viewerBg.setDisplay(false);
			this.working = false;
		},
		prev: function(){
			if(this.index !== 0){
				this.load(this.list, this.index - 1);
			};
		},
		next: function(){
			if(this.index !== this.list.length - 1){
				this.load(this.list, this.index + 1);
			};
		},
		load: function(){
			var temp = Ucren.String("<img id='@{id}' src='@{src}' />");
			var disposeBtnState = function(list, index){
				this.prevBtn.setDisabled(index == 0);
				this.nextBtn.setDisabled(index == list.length - 1);
			};
			return function(list, index){
				disposeBtnState.apply(this, arguments);
				this.list = list;
				this.index = index;
				var item = list[index];

//				viewerPad.setHtml("");
				loading.show("正在打开照片");

				var big = item.big;

				Ucren.loadingImage(["datas/photos/" + big], function(){
					BODY.refresh();
					var img = new Image();
					img.src = "datas/photos/" + big;
					viewerPad.setHtml(temp.replace({
						src: img.src,
						id: curId = Ucren.id()
					}));
					curImg = Ucren.get(curId, true);
					viewerPad.setHeight(BODY.height - 30);
					loading.hide();
					this.show();
					viewerPad.dom().scrollLeft =
					viewerPad.dom().scrollTop = 0;
				}.createDelegate(this));
			}
		}(),
		init: function(){
			Ucren.addEvent(window, "resize", function(){
				BODY.refresh();
				viewerPad.setHeight(BODY.height - 30);
			});

			Ucren.addEvent(document, "keydown", function(e){
				var keycode = (e || event).keyCode;
				if(keycode == 27){
					photoViewer.hide();
				}else if(keycode == 37 || keycode == 38){ // left
					if(!loading.working && photoViewer.working){
						photoViewer.prev();
					};
				}else if(keycode == 39 || keycode == 40){ // right
					if(!loading.working && photoViewer.working){
						photoViewer.next();
					};
				}
			});

			new Ucren.Button({
				caption: "返回照片列表",
				width: 110,
				icon: "images/photo-folder.gif",
				handler: function(){
					photoViewer.hide();
				}
			}).applyTo("returnToList");

			this.prevBtn = new Ucren.Button({
				caption: "上一张",
				width: 70,
				icon: "images/viewer-prev.gif",
				handler: photoViewer.prev.createDelegate(photoViewer)
			});
			this.prevBtn.applyTo("prevPhoto");

			this.nextBtn = new Ucren.Button({
				caption: "下一张",
				width: 70,
				icon: "images/viewer-next.gif",
				handler: photoViewer.next.createDelegate(photoViewer)
			});
			this.nextBtn.applyTo("nextPhoto");
		}
	};
}();

photoViewer.init();