/*	* Javascript Document
/*	* Copyright 2008 Liberty Studio (http://liberty2k.com/), Spenser Lee (http://resume.liberty2k.com/). */

Element.implement({
	show: function() {
		this.removeClass("not-shown");
		return this;
	},
	hide: function() {
		this.addClass("not-shown");
		return this;
	}
});

var page = {
	status: {
		isIE: Browser.Engines.trident()
	},
	els: null,
	start: function() {
		animatedNav.preload();
		if(page.status.isIE) {
			$$("#main-nav .nav-item a").each(function(a){
				a.onfocus = function() {this.blur();};
			});
		}
		$("preload").hide();
		animatedNav.start();
	}
};

var creativeDesignIntro = {
	loaded: false,
	start: function() {
		if(!this.loaded) {
			$("content-1-4").getElements(".en .feature-icons a").each(function(a,i){
				a.addEvent('mouseover',this.showDesc.bind(this,[a,i]));
			}.bind(this));
			$("content-1-4").getElements(".zh .feature-icons a").each(function(a,i){
				a.addEvent('mouseover',this.showDesc.bind(this,[a,i]));
			}.bind(this));
			this.allLis = $("content-1-4").getElements(".feature-icons li");
			this.allDescs = $("content-1-4").getElements(".feature-descriptions li");
			this.loaded = true;
		}
	},
	showDesc: function(alink, at) {
		this.allLis.each(function(el){ el.removeClass("current"); });
		this.allDescs.each(function(el){ el.hide(); });
		$("content-1-4").getElements(".feature-icon-" + at).each(function(el){ el.addClass("current"); });
		$("content-1-4").getElements(".feature-" + at).each(function(el){ el.show(); });
		var featureShadow = $("textshadow").getElement(".features");
		if(featureShadow) {
			featureShadow.getElements(".feature-icons li").each(function(el){ el.removeClass("current"); });
			featureShadow.getElement(".feature-icon-" + at).addClass("current");
			featureShadow.getElements(".feature-descriptions li").each(function(el){ el.hide(); });
			featureShadow.getElement(".feature-" + at).show();
		}
	}
};

var artPortfolio = {
	loaded: false,
	thumbBase: "",
	fullBase: "",
	curAt: 0,
	imageData: [
		["http://brownkuma.liberty2k.com/images/thumbs/He_s_not_a_badass_I_suppose.jpg","http://brownkuma.liberty2k.com/images/gallery/decent/He_s_not_a_badass_I_suppose_by_brownkuma.jpg"],
		["http://brownkuma.liberty2k.com/images/thumbs/And_he_s_shy_by_brownkuma.jpg","http://brownkuma.liberty2k.com/images/gallery/decent/And_he_s_shy_by_brownkuma.jpg"],
		["http://brownkuma.liberty2k.com/images/thumbs/Ma_Liberte_Contre.jpg","http://brownkuma.liberty2k.com/images/gallery/decent/Ma_Liberte.jpg"],
		["http://brownkuma.liberty2k.com/images/thumbs/Charlie-full.jpg","http://brownkuma.liberty2k.com/images/gallery/decent/Charlie.jpg"],
		["http://brownkuma.liberty2k.com/images/thumbs/noirtheater_reillymccoy.jpg","http://brownkuma.liberty2k.com/images/gallery/decent/noirtheater_reillymccoy.jpg"],
		["http://brownkuma.liberty2k.com/images/thumbs/MM_Character_Sheet.jpg","http://brownkuma.liberty2k.com/images/gallery/decent/MM_Character_Sheet.jpg"],
		["http://brownkuma.liberty2k.com/images/thumbs/Stand-Your-Guard.jpg","http://brownkuma.liberty2k.com/images/gallery/decent/Stand-Your-Guard.jpg"],
		["http://brownkuma.liberty2k.com/images/thumbs/Quad-the-hyena-captain.jpg","http://brownkuma.liberty2k.com/images/gallery/decent/Quad-the-hyena-captain.jpg"],
		["http://brownkuma.liberty2k.com/images/thumbs/Mark-Wulfgar-Reading.jpg","http://brownkuma.liberty2k.com/images/gallery/scrap/Mark-Wulfgar-Reading.jpg"],
		["http://brownkuma.liberty2k.com/images/thumbs/Tora.jpg","http://brownkuma.liberty2k.com/images/gallery/scrap/Tora.jpg"],
		["http://brownkuma.liberty2k.com/images/thumbs/Metropolis-Hat.jpg","http://brownkuma.liberty2k.com/images/gallery/scrap/Metropolis-Hat.jpg"],
		["http://brownkuma.liberty2k.com/images/thumbs/Rolling-Blades.jpg","http://brownkuma.liberty2k.com/images/gallery/scrap/Rolling-Blades.jpg"]
	],
	animationProtect: false,
	template: "<table><tbody><tr><th><span class='up'>&nbsp;</span><div class='thumbs'><div class='thumbh'></div></div><span class='down'>&nbsp;</span></th><td class='small-img'></td></tr></tbody></table>",
	start: function() {
		if(!this.loaded) {
			this.containers = [$("content-3-1").getElement(".en .browse-works").empty().addClass("inload"), $("content-3-1").getElement(".zh .browse-works").empty().addClass("inload")];
			this.containers[0].removeClass("inload").set('html',this.template);
			this.containers[1].removeClass("inload").set('html',this.template);
			this.paging.start.apply(this);
			this.masking.start.apply(this);
			this.thumbH = [this.containers[0].getElement(".thumbh"),this.containers[1].getElement(".thumbh")];
			this.midH = [this.containers[0].getElement(".small-img"),this.containers[1].getElement(".small-img")];
			var images = [];
			this.thumbs = [];
			for(var i=0; i<this.imageData.length; i++) {
				var table = new Element("table");
				var tr = new Element("tr").inject(table);
				var td = new Element('td').addClass("inload").addClass("thumb-"+i).inject(tr);
				var a = new Element("a").addClass("thumb-a-"+i).setProperties({
					href: "#Art-Portfolio",
					onclick: "artPortfolio.loadMedium(" + i + ");return false"
				}).inject(td);
				table.inject(this.thumbH[0]);
				table.clone().inject(this.thumbH[1]);
				this.thumbs.push( new Asset.image(this.imageData[i][0],{onload: this.setSmall.bind(this,[i])}) );
			}
			this.midH[0].set("text","Click a thumbnail on the left");
			this.midH[1].set("text","请点击左面图标");
			this.loaded = true;
		}
	},
	setSmall: function(i) {
		this.thumbs[i].inject(this.containers[0].getElement(".thumb-a-"+i));
		this.thumbs[i].clone().inject(this.containers[1].getElement(".thumb-a-"+i));
	},
	loadMedium: function(i) {
		this.midH[0].empty().addClass("inload");
		this.midH[1].empty().addClass("inload");
		this.loadingImg = new Asset.image(this.imageData[i][1],{onload: this.setMedium.bind(this,[i])});
	},
	setMedium: function(i) {
		var img = this.loadingImg;
		var rato;
		this.loadingImgSize = {width: img.width, height: img.height};
		if(img.height > img.width) {
			if(img.height > 340) {
				img.setStyles({ width: img.width * (340 / img.height), height: 340 });
			}
		} else {
			if(img.width > 340) {
				img.setStyles({ width: 360, height: img.height * (360 / img.width) });
			}
		}
		var a = new Element("a").addClass("mid-a-"+i).setProperties({
			href: "#Art-Portfolio",
			onclick: "artPortfolio.loadLarge();return false"
		}).inject(this.midH[0].removeClass("inload"));
		var aClone = a.clone().inject(this.midH[1].removeClass("inload"));
		img.inject(a);
		img.clone().inject(aClone);
	},
	loadLarge: function() {
		var size = animatedNav.size;
		var heightLimit = size.y - 34;
		var img = this.loadingImg.clone().setProperties({
			onclick: "artPortfolio.closePopup();return false",
			alt: "Close (x)",
			title: "Close (x)"
		}).setStyles({width: "", height: "", display: "block"}).inject(this.popup.empty());
		img.setStyles( heightLimit < this.loadingImgSize.height ? { width: this.loadingImgSize.width * (heightLimit / this.loadingImgSize.height), height: heightLimit } : { width: this.loadingImgSize.width, height: this.loadingImgSize.height } );
		this.mask.setStyles({ width: size.x, height: size.y });
		var h = this.loadingImgSize.height;
		var w = this.loadingImgSize.width;
		this.popup.setStyles({ width: w, height: h.toInt() + 24, top: ( size.y - h.toInt() - 34 ) / 2, left: ( size.x - w.toInt() - 20 ) / 2 }).setStyles({display: '', opacity: 0}).fade('in');
		this.mask.setStyles({display: '', opacity: 0}).fade(0.8);
		this.popupClose = new Element("a").set('text', animatedNav.status.curLang == 'en' ? '[ CLOSE ]' : '[ 关闭 ]').setProperties({
			href: "#Art-Portfolio",
			onclick: "artPortfolio.closePopup();return false"
		}).inject(this.popup);
	},
	masking: {
		start: function() {
			this.mask = new Element("div").addClass('mask').setStyle('display','none').inject(document.body);
			this.popup = new Element("div").addClass('popup').setStyle('display','none').inject(document.body);
		}
	},
	paging: {
		start: function() {
			this.pageCount = ( this.imageData.length % 2 == 0 ? this.imageData.length / 2 : ( this.imageData.length + 1 ) / 2 ) - 1;
			this.ups = [this.containers[0].getElement(".up"),this.containers[1].getElement(".up")];
			this.downs = [this.containers[0].getElement(".down"),this.containers[1].getElement(".down")];
			this.ups[0].removeClass("up").addClass("up-disabled").addEvents({
				mouseover: function() {
					if(!this.hasClass("up-disabled")) {
						this.removeClass("up").addClass("up-hover");
					}
				},
				mouseout: function() {
					if(!this.hasClass("up-disabled")) {
						this.removeClass("up-hover").addClass("up");
					}
				},
				click: function() {
					if(!this.hasClass("up-disabled")) {
						artPortfolio.paging.prevPage.apply(artPortfolio);
					}
				}
			});
			this.ups[1].removeClass("up").addClass("up-disabled").addEvents({
				mouseover: function() {
					if(!this.hasClass("up-disabled")) {
						this.removeClass("up").addClass("up-hover");
					}
				},
				mouseout: function() {
					if(!this.hasClass("up-disabled")) {
						this.removeClass("up-hover").addClass("up");
					}
				},
				click: function() {
					if(!this.hasClass("up-disabled")) {
						artPortfolio.paging.prevPage.apply(artPortfolio);
					}
				}
			});
			this.downs[0].addEvents({
				mouseover: function() {
					if(!this.hasClass("down-disabled")) {
						this.removeClass("down").addClass("down-hover");
					}
				},
				mouseout: function() {
					if(!this.hasClass("down-disabled")) {
						this.removeClass("down-hover").addClass("down");
					}
				},
				click: function() {
					if(!this.hasClass("down-disabled")) {
						artPortfolio.paging.nextPage.apply(artPortfolio);
					}
				}
			});
			this.downs[1].addEvents({
				mouseover: function() {
					if(!this.hasClass("down-disabled")) {
						this.removeClass("down").addClass("down-hover");
					}
				},
				mouseout: function() {
					if(!this.hasClass("down-disabled")) {
						this.removeClass("down-hover").addClass("down");
					}
				},
				click: function() {
					if(!this.hasClass("down-disabled")) {
						artPortfolio.paging.nextPage.apply(artPortfolio);
					}
				}
			});
		},
		nextPage: function() {
			if(!this.animationProtect) {
				this.animationProtect = true;
				if(this.ups[0].hasClass("up-disabled") || this.ups[1].hasClass("up-disabled")) {
					this.ups[0].removeClass("up-disabled").addClass("up");
					this.ups[1].removeClass("up-disabled").addClass("up");
				}
				this.curAt++;
				if(this.curAt >= this.pageCount) {
					this.downs[0].removeClass("down").removeClass("down-hover").addClass("down-disabled");
					this.downs[1].removeClass("down").removeClass("down-hover").addClass("down-disabled");
				}
				this.thumbH[0].get('tween', {duration: 500, property: 'margin-top'}).start(-this.curAt * 300);
				this.thumbH[1].get('tween', {duration: 500, property: 'margin-top'}).start(-this.curAt * 300);
				this.deProtect.delay(500,this);
			}
		},
		prevPage: function() {
			if(!this.animationProtect) {
				this.animationProtect = true;
				if(this.downs[0].hasClass("down-disabled") || this.downs[1].hasClass("down-disabled")) {
					this.downs[0].removeClass("down-disabled").addClass("down");
					this.downs[1].removeClass("down-disabled").addClass("down");
				}
				this.curAt--;
				if(this.curAt <= 0) {
					this.ups[0].removeClass("up").removeClass("up-hover").addClass("up-disabled");
					this.ups[1].removeClass("up").removeClass("up-hover").addClass("up-disabled");
				}
				this.thumbH[0].get('tween', {duration: 500, property: 'margin-top'}).start(-this.curAt * 300);
				this.thumbH[1].get('tween', {duration: 500, property: 'margin-top'}).start(-this.curAt * 300);
				this.deProtect.delay(500,this);
			}
		}
	},
	closePopup: function() {
		this.mask.fade('out');
		this.popup.fade('out');
	},
	deProtect: function() {
		this.animationProtect = false;
	}
};

var animatedNav = {
	consts: {
		width: 950,
		height: 520,
		navSubOffset: 38,
		navSubFarOffset: 170,
		contentOffset: 240,
		contentOffsetOpend: 374,
		mainNavOffset: [12,48,108,144,180],
		anime: {
			menuDropSpeed: 300,
			menuHighLightSpeed: 300,
			submenuShowSpeed: 500,
			submenuMoveSpeed: 1000,
			submenuPuffSpeed: 500,
			menuLiStartColor: '#777',
			menuLiStopColor: '#fff'
		}
	},
	status: {
		curShown: 0,
		curTab: 0,
		curSubTab: 0,
		curLang: 'en'
	},
	size: window.getSize(),
	els: null,
	menuPos: null,
	mousePos: {
		isInMain: false,
		isInSub: false
	},
	preload: function() {
		textShadow.start();
		this.els = {
			navMain: $("main-nav"),
			navMainLis: $("main-nav").getElements("li"),
			navSub: $("sub-nav"),
			navSubLis: $("sub-nav").getElements(".nav-item"),
			contentHolder: $("contents"),
			navSubLiTabs: []
		};
		this.els.navSubLiTabs = this.els.navSubLis.map(function(li){ return li.getElements(".sub-nav li"); });
		$$('a[rel="navLink"]').each(function(a){
			a.addEvent('click',animatedNav.navTo.bind(animatedNav,a.getProperty("rev").split("-").map(function(argu){return eval(argu);})));
		});
		$('switchLang-en').addEvent('click',this.showLang.bindWithEvent(this,['en']));
		$('switchLang-zh').addEvent('click',this.showLang.bindWithEvent(this,['zh']));
		$('switchLang-'+this.status.curLang).setStyle("text-decoration",'underline');
		$$('a[rel="external"]').each(function(a){a.setProperty('target','_blank');});
		this.menuPos = this.setMenuPos();
		this.prepareAnimation(this.menuPos);
	},
	showLang: function(e,lang) {
		e.stop();
		if(lang != this.status.curLang) {
			var prevLang = this.status.curLang;
			$('switchLang-'+prevLang).setStyle("text-decoration",'none');
			this.status.curLang = lang;
			$('switchLang-'+lang).setStyle("text-decoration",'underline');
			textShadow.clean();
			$$("." + prevLang).each(function(el){el.hide();});
			$$("." + lang).each(function(el){
				el.show();
			});
			textShadow.add(this.status.curTab,this.status.curSubTab,$("content-" + this.status.curTab + "-" + this.status.curSubTab).getElement("."+this.status.curLang).get('html'));
		}
	},
	start: function() {
		this.startAnimation();
	},
	resize: function() {
		this.size = window.getSize();
		this.menuPos = this.setMenuPos();
		if(this.status.curShown) {
			this.setMainLisPos(this.menuPos);
		} else {
			this.menuPos = this.setMenuPos();
			this.prepareAnimation(this.menuPos);
			this.startAnimation();
		}
	},
	setMenuPos: function() {
		var trueLeft;
		if(page.status.isIE) {
			trueLeft = $("m").getCoordinates().left;
		} else {
			trueLeft = (this.size.x-this.consts.width)/2;
		}
		this.els.navMain.setStyle('left',trueLeft);
		var navsub = this.els.navSub;
		navsub.setStyle('left',trueLeft+this.consts.navSubOffset);
		var trueTop = (this.size.y-this.consts.height)/2;
		if(page.status.isIE && trueTop < 0) {
			trueTop = 0;
		}
		navsub.getElement('ul.sub-nav-h').setStyle('padding-top',trueTop);
		return {
			t: trueTop,
			l: trueLeft
		};
	},
	setMainLisPos: function(menuPos) {
		var offsets = this.consts.mainNavOffset;
		this.els.navMainLis.each(function(li,at){
			li.setStyle('top',menuPos.t + offsets[at]);
		});
	},
	prepareAnimation: function(menuPos) {
		var offsets = this.consts.mainNavOffset;
		this.els.navMainLis.each(function(li,at){
			li.setStyle('top',-50).set('tween',{duration:animatedNav.consts.anime.menuDropSpeed,property:'top'}).addEvents({
				mouseenter: animatedNav.highlightNav.bind(animatedNav,[li,animatedNav.consts.anime.menuLiStopColor]),
				mouseleave: animatedNav.highlightNav.bind(animatedNav,[li,animatedNav.consts.anime.menuLiStartColor])
			});
			li.getElement(".marker").set('tween',{duration:animatedNav.consts.anime.menuHighLightSpeed,property:'color'});
			li.getElement(".nav-item a").set('tween',{duration:animatedNav.consts.anime.menuHighLightSpeed,property:'color'});
		});
		this.els.navSub.set({
			opacity: 0,
			styles: {left: animatedNav.consts.navSubFarOffset+menuPos.l},
			tween: {
				duration: animatedNav.consts.anime.submenuShowSpeed,
				property: 'opacity'
			}
		}).removeClass("hide-when-loading");
	},
	startAnimation: function(prevTab,curTab) {
		if(this.status.curShown == 0) {
			this.els.navMain.removeClass("hide-when-loading");
			var offsets = this.consts.mainNavOffset;
			var menuTop = (this.size.y-this.consts.height)/2;
			var l = this.els.navMainLis.length;
			this.els.navMainLis.each(function(li,at){
				var tw = li.get('tween');
				var delayTime = animatedNav.consts.anime.menuDropSpeed*(l-at);
				tw.start.delay(delayTime,tw,[offsets[at]+menuTop]);
				if(animatedNav.status.curTab == at) {
					li.addClass('current');
					animatedNav.highlightNav.delay(animatedNav.consts.anime.menuDropSpeed*(l+2),animatedNav,[li,animatedNav.consts.anime.menuLiStopColor,true]);
					animatedNav.els.navSubLis[at].show();
				}
			});
			var subNavTween = this.els.navSub.get('tween');
			subNavTween.start.delay(animatedNav.consts.anime.menuDropSpeed*l+1000,subNavTween,[1]);
			animatedNav.firstCloseNav.delay(animatedNav.consts.anime.menuDropSpeed*l+2000,animatedNav);
		} else {
			this.highlightNav(this.els.navMainLis[prevTab].removeClass('current'),this.consts.anime.menuLiStartColor);
			this.els.navSubLis[prevTab].hide();
			this.highlightNav(this.els.navMainLis[curTab].addClass('current'),this.consts.anime.menuLiStopColor,true);
			this.showSubTabAnimation(this.els.navSubLis[curTab]);
		}
	},
	firstCloseNav: function() {
		var duration = animatedNav.consts.anime.submenuMoveSpeed;
		this.moveSubMenu(false);
		this.setStatus.delay(duration,this,2);
		this.els.navMain.addEvents({
			mouseenter: this.setMouseStatus.bind(this,["isInMain",true]),
			mouseleave: this.setMouseStatus.bind(this,["isInMain",false])
		});
		this.els.navSub.addEvents({
			mouseenter: this.setMouseStatus.bind(this,["isInSub",true]),
			mouseleave: this.setMouseStatus.bind(this,["isInSub",false])
		});
		this.showContent.delay(duration+200,this);
		$("f").show.delay(duration+200,$("f"));
		this.setStatus(1);
	},
	setStatus: function(status) {
		this.status.curShown = status;
	},
	setMouseStatus: function(menu,isIn) {
		this.mousePos[menu] = isIn;
		if(this.status.curShown != 0) {
			this.checkMemuMove.delay(10,this);
		}
	},
	checkMemuMove: function() {
		if(this.mousePos.isInMain) {
			this.moveSubMenu(true);
			this.setStatus(2);
		} else if(!this.mousePos.isInSub) {
			this.moveSubMenu(false);
			this.setStatus(1);
		}
	},
	highlightNav: function(nav,color,isInit) {
		if(isInit || !nav.hasClass('current')) {
			nav.getElement(".marker").get('tween').start(color);
			nav.getElement(".nav-item a").get('tween').start(color);
		}
	},
	moveSubMenu: function(isOpening) {
		var duration = animatedNav.consts.anime.submenuMoveSpeed;
		this.els.navSub.get('tween',{duration: duration, property: 'left', link: 'cancel'}).start((isOpening ? this.consts.navSubFarOffset : this.consts.navSubOffset) + this.menuPos.l);
		this.els.contentHolder.get('tween',{duration: duration, property: "left"}).start(isOpening ? this.consts.contentOffsetOpend : this.consts.contentOffset);
		textShadow.move(isOpening);
		return duration;
	},
	navTo: function(tab,subtab,showAnimation) {
		if(this.status.curShown) {
			var changed = false;
			var prevTabs;
			if(this.status.curTab != tab) {
				var previousTab = this.status.curTab;
				if(showAnimation) {
					var delay = this.moveSubMenu(true);
					this.startAnimation.delay(delay,this,[previousTab,tab]);
					delay += animatedNav.consts.anime.menuHighLightSpeed * 2 + 300;
					this.moveSubMenu.delay(delay,this);
				} else {
					this.startAnimation(previousTab,tab);
				}
				prevTabs = this.processSubTab(tab,subtab,previousTab);
				this.status.curTab = tab;
				changed = true;
			} else {
				if(this.status.curSubTab != subtab) {
					prevTabs = this.processSubTab(tab,subtab,tab);
					changed = true;
				}
			}
			if(changed) {
				if(showAnimation) {
					this.loadTab.delay(delay,this,[prevTabs[0],prevTabs[1]]);
				} else {
					this.loadTab(prevTabs[0],prevTabs[1]);
				}
				if(tab == 1 && subtab == 4) {
					creativeDesignIntro.start();
				} else if (tab == 3 && subtab == 1) {
					artPortfolio.start();
				}
			}
		}
	},
	showSubTabAnimation: function(subtab) {
		subtab.show().getElement(".sub-nav").get("tween",{duration: this.consts.anime.submenuPuffSpeed, property: "padding-top", transition: Fx.Transitions.Sine.easeOut}).set(this.size.y).start(0);
	},
	processSubTab: function(tab,subtab,previousTab) {
		var prevSubTab = this.status.curSubTab;
		var prevTabEl = this.els.navSubLiTabs[previousTab][prevSubTab];
		prevTabEl.removeClass("current");
		this.status.curSubTab = subtab;
		this.els.navSubLiTabs[tab][subtab].addClass("current");
		return [previousTab,prevSubTab]
	},
	showContent: function() {
		var contentTab = $("content-" + this.status.curTab + "-" + this.status.curSubTab).show();
		textShadow.clean().add(this.status.curTab,this.status.curSubTab,contentTab.getElement("."+this.status.curLang).get('html'));
	},
	loadTab: function(prevTab,prevSubTab) {
		$("content-" + prevTab + "-" + prevSubTab).hide();
		this.showContent();
	}
};

var textShadow = {
	consts: {
		contentOffset: animatedNav.consts.contentOffset + 3,
		contentOffsetOpend: animatedNav.consts.contentOffsetOpend + 3,
		animeDuration: animatedNav.consts.anime.submenuMoveSpeed
	},
	start: function() {
		this.el = $("textshadow").set('tweeen');
		return this;
	},
	clean: function() {
		this.el.empty();
		return this;
	},
	add: function(curTab,curSubTab,content) {
		this.el.set('html',content);
		return this;
	},
	move: function(isOpening) {
		this.el.get('tween',{duration: this.consts.animeDuration, property: 'left', link: 'cancel'}).start(isOpening ? this.consts.contentOffsetOpend : this.consts.contentOffset);
		return this;
	}
};

window.addEvents({
	domready: page.start.bind(page),
	resize: animatedNav.resize.bind(animatedNav)
});