var detail;

/* detail
----------------------------------------------- */
var Detail = function() {
	detail = this;
	detail.intervalid;
	detail.item;
}

Detail.prototype = {
	DetailInitialize: function() {
		$(window).unbind("resize", detail.DetailRePosition);
		$("#detail .image").unbind("click", detail.DetailSite);
		$("#detail").hide();
		$("#detail").html("");
		$("#info").hide();
		$("#info").html("");
	},
	DetailOpen: function(item) {

		// initialize
		detail.DetailInitialize();
	
		detail.item = item;

		var src = $("img", detail.item).attr("src");
		var size = $("img", detail.item).attr("width");
		var left_pos = detail.item.offset().left + 7;
		var top_pos = detail.item.offset().top + 7;
		var img = $(document.createElement("img"));		
		img.attr({ src:src, width:size, height:size });

		$("#detail").show();		
		$("#detail").html('<p class="image"></p>');
		$("#detail .image").append(img);
		$("#detail .image").css({ width:size, height:size });
		$("#detail").css({ top:top_pos, left:left_pos, width:size, height:size });
		
		// zoom in
		detail.DetailZoomin();
	},
	DetailZoomin: function() {

		// stage grid
		StageOb.StageDetailGrid();

		var left_pos = Math.floor($(window).width() / 2 - $("#detail").width() / 2);
		var top_pos = Math.floor($(window).height() / 2 - $("#detail").height() / 2);

		$("#detail").delay(500).animate({ top:top_pos, left:left_pos }, 500, "easeInOutCirc", function() {
		
			$(".image", this).animate({ width:itemlargesize, height:itemlargesize }, 500, "easeInOutCirc");
			$(".image img", this).animate({ width:itemlargesize, height:itemlargesize }, 500, "easeInOutCirc");
			$(this).animate({ top:stage.detail_top, left:0, width:"100%", height:itemlargesize }, 500, "easeInOutCirc", function() {
			
				// detail large image
				detail.DetailLargeImage();
				
				// detail info
				detail.DetailInfo();
				
				// flip set
				FlipOb.FlipSet($(".number", detail.item).text());
				
				// detail site
				$("#detail .image").bind("click", detail.DetailSite);
			
			});		
		});
		
		// window resize
		$(window).bind("resize", detail.DetailRePosition);
	},
	DetailRePosition: function() {
		clearInterval(detail.intervalid);
		detail.intervalid = setInterval(detail.DetailReset, 500);
	},
	DetailReset: function() {

		// initialize
		clearInterval(detail.intervalid);

		// stage grid
		StageOb.StageDetailGrid();

		// flip set
		FlipOb.FlipSet($(".number", detail.item).text());

		$("#detail").animate({ top:stage.detail_top }, 500, "easeInOutCirc");
		$("#info").animate({ top:stage.detail_top + itemlargesize }, 500, "easeInOutCirc");
	},
	DetailInfo: function() {

		var html = "";
		var title = $("h2", detail.item).text();
		var review = $(".review", detail.item).text();
		var tag = $(".tag", detail.item).html();

		html = '<p class="title">' + title + '</p>';		
		if (review != "" && review != null) {
			html += '<p class="review">' + review + '</p>';
		}
		if (tag != "" && tag != null) {
			html += '<p class="tag">' + tag + '</p>';
		}
		
		$("#info").stop();
		$("#info").show();
		$("#info").html(html);
		$("#info").css({ opacity:0, top:stage.detail_top + itemlargesize });
		$("#info").delay(250).animate({ opacity:1 }, 250);
	},
	DetailLargeImage: function() {
		var largesrc = $("h3", detail.item).text();
		var img = $(document.createElement("img"));
		img.attr({ src:largesrc, width:itemlargesize, height:itemlargesize });
		img.css({ opacity:0 });
		img.bind("load", detail.DetailImageLoad);
		$("#detail .image").append(img);		
	},
	DetailImageLoad: function() {
		$(this).unbind("load", detail.DetailImageLoad);
		$(this).animate({ opacity:1 }, 250);
	},
	DetailSite: function() {
		var url = $("h2 a", detail.item).attr("href");
		var w = window.open(url);
		return false;
	}
}