var flip;

/* loading
----------------------------------------------- */
var Flip = function() {
	flip = this;
	flip.intervalid;
	flip.current;
	flip.flag = true;
}

Flip.prototype = {
	FlipInitialize: function() {
		$("#control").hide();
		$("#control .previous").unbind("click", flip.FlipPrevious);
		$("#control .next").unbind("click", flip.FlipNext);
	},
	FlipSet: function(number) {

		// stage grid
		StageOb.StageDetailGrid();

		// item number
		flip.current = parseInt(number);		
		
		// initialize
		flip.FlipInitialize();		

		$("#control").show();
		$("#control .previous").stop();	
		$("#control .next").stop();
		$("#control .previous").css({ opacity:0, top:stage.previous_top, left:stage.previous_left-50 });
		$("#control .next").css({ opacity:0, top:stage.next_top, left:stage.next_left+50 });	
		
		$("#control .previous").delay(500).animate({ opacity:1, left:$("#control .previous").offset().left+50 }, 500, "easeInOutCirc");
		$("#control .next").delay(500).animate({ opacity:1, left:$("#control .next").offset().left-50 }, 500, "easeInOutCirc", function() {
		
			// bind
			$("#control .previous").bind("click", flip.FlipPrevious);
			$("#control .next").bind("click", flip.FlipNext);
			
			// detail control
			KeysOb.KeysDetailControl();
		});				
	},
	FlipPrevious: function() {
	
		flip.flag = true;
		flip.current--;
		
		if (flip.current < 0) {
			flip.current = list.items.length - 1;
		}
		
		// detail motion
		flip.FlipMotion();
	},
	FlipNext: function() {

		flip.flag = false;
		flip.current++;
		
		if (flip.current > list.items.length - 1) {
			flip.current = 0;
		}
		
		// detail motion
		flip.FlipMotion();
	},
	FlipMotion: function() {

		detail.item = list.items[flip.current];

		// initialize
		flip.FlipInitialize();		

		// detail info
		detail.DetailInfo();
	
		var start = 0;
		var end = 0;
		
		if (flip.flag) {
			start = 100;
			end = -100;
		}
		else {
			start = -100;
			end = 100;
		}

		$("#control").show();

		var src = $("img", list.items[flip.current]).attr("src");
		var img = $(document.createElement("img"));		
		img.attr({ src:src, width:itemlargesize, height:itemlargesize });

		$("#detail").stop();
		$("#detail").animate({ opacity:0, left:start }, 250, "easeInCirc", function() {

			$(".image", this).html("");
			$(".image", this).append(img);
			$(this).css({ left:end });
			$(this).animate({ opacity:1, left:0 }, 250, "easeOutCirc", function() {
			
				// detail large image
				detail.DetailLargeImage();

				// bind
				$("#control .previous").bind("click", flip.FlipPrevious);
				$("#control .next").bind("click", flip.FlipNext);

			});		
		});
		
		return false;
	}
}