// scrip para la galeria tipo iphone
//<![CDDA[
$(document).ready(function() {

	$('#album, #album4, #album5').iphoneSlide({
		handler: ".paging",
		pageHandler: ".page"
	});
	
	$('#album2').iphoneSlide({
		handler: ".paging",
		pageHandler: ".page",
		direction: "matrix"
	});
	
	$('#album3').iphoneSlide({
		handler: ".paging",
		pageHandler: ".page",
		direction: "vertical"
	});
	
	$('#album6').iphoneSlide({
		maxShiftPage : 4,
		handler: ".paging",
		pageHandler: ".page",
		onShiftComplete: function(elem, page) {
			var centerPage = 4, handler = $(elem).parent(), ahead, behind;
			
			if(page!=centerPage) {
				for(var i=1; i<=Math.abs(centerPage-page); i++) {
					ahead = handler.children(':first');
					behind = handler.children(':last');
					
					if(centerPage-page>0) {
						ahead.before(behind);
					} else if(centerPage-page<0) {
						behind.after(ahead);
					}
				}
				handler.css( 'left' , $(this).width()*(1-centerPage));
				$(this).data('nowPage', centerPage);
			}
		}
	}, function() {
		var page = $(this).data('nowPage'), centerPage = 4, totalPages = $(this).data('totalPages'), handler = $(".paging", $(this)), ahead, behind;
		if(page != centerPage) {
			ahead = handler.children(':first');
			behind = handler.children().eq(totalPages-Math.abs(centerPage-page)-1).nextAll();
			ahead.before(behind);
			
			handler.css( 'left' , $(this).width()*(1-centerPage));
			$(this).data('nowPage', centerPage);
		}
	});
	
	$('#album7').iphoneSlide({
		handler: ".paging",
		pageHandler: ".page",
		direction: "matrix",
		easing: "easeOutBounce"
	});
	
	$('#slidetopage4').click(function() {
		if($('#album4').data("initIphoneSlide")) {
			var element = $('#album4');
			var handler = ".paging";
			var nowPage = parseInt(element.data('nowPage'), 10), 
				totalPages = parseInt(element.data('totalPages'), 10), 
				matrixSqrt = parseInt(element.data('matrixSqrt'), 10);
			
			// The number of page which I want to go to.
			var page = 4;
			// The direction you setup in the plugin's options.
			var direction = "horizontal"; 
			
			if(page>totalPages) {
				alert('Page cannot over '+totalPages+' page(s).');
			} else {
				if(Math.abs(nowPage-page) > 0) {
					var moveTargetX, moveTargetY, __beshift = Math.abs(nowPage-page);
					
					switch(direction) {
						case "matrix":
							var nowPageX = (nowPage % matrixSqrt==0) ? matrixSqrt : (nowPage % matrixSqrt);
							var nowPageY = Math.ceil(nowPage / matrixSqrt);
							
							var pageX = (page % matrixSqrt==0) ? matrixSqrt : (page % matrixSqrt);
							var pageY = Math.ceil(page / matrixSqrt);
							
							if(nowPageX-pageX>0) {
								moveTargetX = "+=";
							} else if(nowPageX-pageX<0) {
								moveTargetX = "-=";
							}
							moveTargetX += Math.abs(nowPageX-pageX)*element.width()+"px";
							
							if(nowPageY-pageY>0) {
								moveTargetY = "+=";
							} else if(nowPageY-pageY<0) {
								moveTargetY = "-=";
							}
							moveTargetY += Math.abs(nowPageY-pageY)*element.height()+"px";
							
							$(handler, element).animate({ 'top': moveTargetY, 'left': moveTargetX }, function() {
								// You can call function here.
							});
						break;
						
						case "vertical":
							moveTargetY = (nowPage-page > 0) ? "+="+__beshift*element.height()+"px" : "-="+__beshift*element.height()+"px";
							$(handler, element).animate({ 'top': moveTargetY, 'left' : 0 }, function() {
								// You can call function here.
							});
						break;
						
						case "horizontal":
							moveTargetX = (nowPage-page > 0) ? "+="+__beshift*element.width()+"px" : "-="+__beshift*element.width()+"px";
							$(handler, element).animate({ 'left': moveTargetX, 'top' : 0 }, function() {
								// You can call function here.
							});
						break;
					}
					
					// refresh nowPage data.
					element.data('nowPage', page);
				}
			}
		}
	});
	
	$('#addpages').click(function() {
		if($('#album5').data("initIphoneSlide")) {
			var element = $('#album5');
			var handler = ".paging";
			var pageHandler = ".page";
			var direction = "horizontal"; 
			var pageshowfilter = false;
			
			$(handler, element).css({ 'left':'0px', 'top':'0px' });
			element.data("nowPage", 1);
			
			var lastitem = $(handler, element).children(pageHandler).filter(':last');
			
			var addPages = 5;
			
			if(direction=="matrix") {
				$(handler, element).children(".matrix-break-point").remove();
				$(handler, element).children(".matrix-blank-page").remove();
			}
			
			for(var i=0; i < addPages; i++) {
				lastitem.clone().removeAttr("class").removeAttr("id").removeAttr("style")
				.addClass("page single").css("display", "block").appendTo($(handler, element));
			}
			
			var pageItem;
			if(!pageshowfilter) {
				pageItem = $(handler, element).children(pageHandler);
			} else {
				pageItem = $(handler, element).children(pageHandler).filter(':visible');
			}
			
			var totalPages = pageItem.length;			
			switch(direction) {
				case "matrix":
					var matrixSqrt = Math.ceil(Math.sqrt(totalPages));
					var matrixColumn = Math.ceil(totalPages / matrixSqrt);
					
					if(matrixColumn*matrixSqrt > totalPages) {
						for(var i=0; i<(matrixColumn*matrixSqrt - totalPages); i++) {
							pageItem.filter(":last").clone().removeAttr("id").removeAttr('class')
							.addClass("page matrix-blank-page").empty().css('display' , 'block')
							.insertAfter(pageItem.filter(':last'));
						}
						totalPages = matrixColumn*matrixSqrt;
					}
					for(var i=matrixColumn; i>1; i--) {
						$('<br class="matrix-break-point" style="clear:both;" />')
						.insertAfter(pageItem.eq((i-1)*matrixSqrt-1));
					}
					
					$(handler, element)
						.width(matrixSqrt*element.width())
						.height(matrixColumn*element.height());
					
					element.data('matrixSqrt', matrixSqrt);
					element.data('matrixColumn', matrixColumn);
				break;
				case "vertical":
					$(handler, element).height(totalPages*element.height());
				break;
				case "horizontal":
				default:
					$(handler, element).width(totalPages*element.width());
			}
			element.data('totalPages', totalPages);
		}
	});
	
});
//]]>