window.YEN = window.YEN || {};
window.YEN.Portfolio = window.YEN.Portfolio || {};

(function() {
	var $yen = this;
	
	$yen.vars = {
		requestURL : "/request.php"
	};
	
	$yen.utils = {
		customFontSupport : function() {
			return !!(/WebKit/.test(navigator.userAgent) && document.querySelector);
		},
		scrollCalendar : function(percentage) {
			var calendar = document.getById("calendar");
			
			if (calendar) {
				if (!calendar.style.left) {
					calendar.style.left = 0;
				}
				
				var left = parseInt(calendar.style.left);
				calendar.style.left = left - ($yen.vars.scrollOffset * percentage) + "px";
			}
		},
		deepLink : function(link) {
			var reg = (/\/\d{4,}\/[a-z]+\/\d{1,2}\//).exec(link);
			
			if (reg && reg[0]) {
				location.hash = reg[0];
			}
		},
		highlightDate : function(hash) {
			var dates = hash.split("/");
			
			var year = dates[1],
			    month = dates[2],
			    day = dates[3];
			
			var calendar = document.getById("calendar");
			calendar.getByTag("*").removeClass("active");
			
			var parent = document.getById(month);
			if (parent) {
				parent.getByTag("dt")[0].addClass("active");
				
				var dd = parent.getByClass("day-" + day)[0];
				if (dd) {
					dd.addClass("active");
				}
			}
		},
		requestJSON : function(href) {
			var dates = href.split("/");
			
			var year = dates[1],
			    month = dates[2],
			    day = parseInt(dates[3]);
			
			day = (day < 10) ? ("0" + day) : day;
			var url = $yen.vars.requestURL + "?year=" + year + "&month=" + month + "&day=" + day;
			
			var content = document.getById("content");
			var image = content.getFirstChild("img");
			
			if (image) {
				var ani = Flow.Animate({
					node : image,
					to : {
						opacity : 0
					},
					tween : "Expo.easeInOut"
				}, 0.5);
				
				ani.addEventListener("complete", function() {
					var req = new HttpRequest();
					req.open("GET", url, true);
					req.onreadystatechange = function() {
						if (req.readyState == 4) {
							if (req.status == 200 || req.status == 304) {
								
								var dummy = document.createElement("div");
								dummy.setInnerHTML(req.responseText);
								
								var oImg = content.getFirstChild("img");
								content.replaceChild(dummy.getFirstChild(), oImg);
								
								image = content.getFirstChild("img");
								if (image) {
									$yen.utils.preloadImage(image);
									
									image.addEventListener("load", $yen.utils.resizeToFullScreen, false);
									
								}
							}
						}
					};
					req.send();
				}, false);
				
				ani.start();
			}
		},
		preloadImage : function(image) {
			Flow.Animate({
				node : image,
				to : {
					opacity : 100
				},
				tween : "Expo.easeOut"
			}, 0.5).start();
		},
		resizeToFullScreen : function() {
			var bounds = Flow.Viewport.getSize();
			
			var content = document.getById("content"),
			    image = content.getFirstChild("img");
			
			if (image && document.body.getAttribute("id")) {
				content.setStyle({
					"height" : bounds.h - (document.getById("header").offsetHeight) + "px"
				});
				
				var ratio = {
					w : image.width / bounds.w,
					h : image.height / bounds.h
				};
				
				if (ratio.h < ratio.w) {
					image.setStyle({
						"width" : "auto",
						"height" : "100%"
					});
				} else {
					image.setStyle({
						"width" : "100%",
						"height" : "auto"
					});
				}
			}
		}
	};
	
	$yen.onload = {
		preloadMainImage : function() {
			var parent = document.getById("content");
			if (parent) {
				var image = parent.getFirstChild("img");
				
				if (image) {
					$yen.utils.preloadImage(image);
				}
				
			}
		},
		checkHash : function() {
			if (location.hash) {
				var hash = location.hash.replace("#", "");
				if (hash) {
					$yen.utils.highlightDate(hash);
					$yen.utils.requestJSON(hash);
				}
			}
		},
		hijaxLinks : function() {
			var calendar = document.getById("calendar");
			
			if (calendar) {
				var links = calendar.getByTag("a");
				links.addEventListener("click", function(e) {
					e.preventDefault();
					
					if (!this.parentNode.hasClass("active")) {
						links.forEach(function(link) {
							link.parentNode.removeClass("active");
						});

						this.parentNode.addClass("active");
						this.getParentNode("dl").getFirstChild("dt").addClass("active");

						$yen.utils.requestJSON(this.getAttribute("href"));
						$yen.utils.deepLink(this.href);
					}
				}, false);
				
			}
		},
		scrollCalendarModule : function() {
			var header = document.getById("header");
			
			if (header) {
				header.addClass("active");
			}
			
			var calendar = document.getById("calendar");
			
			if (calendar) {
				calendar.style.left = calendar.style.left || 0;
				
				var dls = calendar.getByTag("dl");
				dls.addEventListener("mouseover", function(e) {
					
					var related = e.relatedTarget;
					if (related && (related == this)) {
						return;
					}
					
					while (related && related.parentNode) {
						if (related == this) {
							return;
						}
						related = related.parentNode;
					}
					
					var $this = this;
					
					if ($yen.vars.scrollTimeout) {
						clearTimeout($yen.vars.scrollTimeout);
					}
					
					$yen.vars.scrollTimeout = window.setTimeout(function() {
						var width = ($this.offsetWidth + 100),
						    oLeft = parseFloat(calendar.style.left),
						    left = $this.offsetLeft + oLeft;

						var diff, ani;
						if ((width + left) > header.offsetWidth) {
							diff = (width + left) - header.offsetWidth;

							ani = Flow.Animate({
								node : calendar,
								to : {
									left : oLeft - diff
								},
								tween : "Expo.easeOut"
							}, 0.5).start();
						} else if ($this.offsetLeft < -(oLeft)) {
							diff = -($this.offsetLeft + oLeft);

							var value = oLeft + diff + 50;
							value = (value > 0) ? 0 : value;

							ani = Flow.Animate({
								node : calendar,
								to : {
									left : value
								},
								tween : "Expo.easeOut"
							}, 0.5).start();
						}
					}, 500);
					
				}, false);
			}
		},
		enableCustomFonts : function() {
			if ($yen.utils.customFontSupport()) {
				var body = document.getByTag("body")[0];
				body.setStyle({
					"font-size" : "8px",
					"font-family" : "DT Libra"
				});
			}
		},
		fullscreenImage : function() {
			window.addEventListener("resize", $yen.utils.resizeToFullScreen, false);
			$yen.utils.resizeToFullScreen();
		}
	};
	
	$yen.init = function() {
		for (var key in $yen.onload) {
			$yen.onload[key]();
		}
	};
	
	window.addEventListener("DOMContentLoaded", this.init, false);
}).call(window.YEN.Portfolio);