/**
 * edit the font family of a div
 * 
 * @param divId
 * @param fontFamily
 * @return
 */
function editFontFamily(divId, fontFamily, id) {
	document.getElementById(divId).style.fontFamily = fontFamily;
	document.getElementById(id).innerHTML = "Font-family: <b/>"+ fontFamily + "</b>";
}

/**
 * edit the font size of a div
 * 
 * @param divId
 * @param fontSize
 * @return
 */
function editFontSize(divId, fontSize, id) {
	document.getElementById(divId).style.fontSize = fontSize;
	document.getElementById(id).innerHTML = "Font-size: <b/>"+ fontSize + "</b>";
}


/**
 * global variables
 */
var justClicked = "";
var loadTime = 0;

function onloadHandler() {
	
	/*positionMainMenu();
	
	var sub_menus = document.getElementById("num_submenus").value;
	var photos = document.getElementById("num_photos");
	
	if(sub_menus > 0) {
		
		//positionSubMenu();
		
		if(photos != null) {
			
			//positionThumbGrid("photos_thumbs_grid");
			
		} else {
			
			//positionThumbGrid("series_thumbs_grid");
		}
	}*/
	
	
	/**
	 * show all elements with effect
	 */
	showLogo();
	
	// show contact or about
	var page = document.getElementById("page").value;
	$("#content_info").animate({"left":"0px"}, 500);
	if(page.toLowerCase() == "") {
		showWelcome();
	} else {
		showLogo();
	}
	
	// get heights
	$contentHeight = $("#content").height();
	$thumbHeight =  $contentHeight/10;
	
	$thumbs = $("#thumbs_grid .thumbs [class^=thumb]");
	
	$("#thumbs_grid .thumbs").css('padding','0px '+$thumbHeight/20+'px '+$thumbHeight/10+'px 0px');
	
	if($thumbs.length == 0) {
		$thumbs = $("#serie_thumbs_grid .serie_thumbs .serie_thumb");
		$thumbHeight = ($contentHeight/4);
		if($thumbHeight > 150) {
			$thumbHeight = 150;
		}
	} else {
		justClicked = ($thumbs.eq(0).attr("id")).substring(($thumbs.eq(0).attr("id")).indexOf("_")+1);
		if($thumbHeight > 100) {
			$thumbHeight = 100;
		}
	}
	
	loadTime = 250 / $thumbs.length;
	
	// set med photos height
	var height = $thumbHeight * 7.3;
	if(height > 450) {
		height = 450;
	}
	$("#section .med .img").height(height);
	$("#section .med").css('padding','0px '+($thumbHeight/8)+'px '+($thumbHeight/8)+'px 0px');
	
	$("#serie_thumbs_grid .serie_thumbs").css('padding','0px '+($thumbHeight/8)+'px '+($thumbHeight/8)+'px 0px');
	
	/**
	 * edit section width to hold medium size photos
	 */
	$("div#section").width(($("#num_photos").attr("value")) * 15 * $thumbHeight);
	
	/**
	 * show all elements
	 */
	showAllElements($(".borders"), $thumbs, $thumbHeight +"px");
	
	/**
	 * hover for main_menu
	 */
	$("#menu_div div[class^=menu_a]").hover(function() {
		$(this).animate({"color": "#CCCABA"}, 300);
	},function(){
		$(this).animate({"color": "#595851"}, 300);
	});
	
	/**
	 * hover for the submenu's with thumbnails
	 */
	$("#serie_thumbs_grid .serie_thumbs").hover(function() {
		$("#"+$(this).attr("id").substring(4)).animate({"opacity":"0.5","borderBottomColor":"#CC1919","borderRightColor":"#CC1919","borderTopColor":"#CC1919","borderLeftColor":"#CC1919"},300);
		$("#l_"+$(this).attr("id").substring(4)).animate({"color": "#CCCABA"}, 300);
	},function(){
		$("#l_"+$(this).attr("id").substring(4)).animate({"color": "#595851"}, 300);
		$("#"+$(this).attr("id").substring(4)).animate({"opacity":"1.0","borderBottomColor":"#373c3e","borderRightColor":"#373c3e","borderTopColor":"#373c3e","borderLeftColor":"#373c3e"},300);
	});
	
	/**
	 * hover for the submenu's
	 */
	$("#series .serie_na").hover(function() {
		$(this).animate({"color": "#CCCABA"}, 300);
	},function(){
		$(this).animate({"color": "#595851"}, 300);
	});
	
	$("#series .serie").hover(function() {
		$(this).animate({"color": "#CCCABA"}, 300);
		$("#"+$(this).attr("id").substring(2)).animate({"opacity":"0.5","borderBottomColor":"#CC1919","borderRightColor":"#CC1919","borderTopColor":"#CC1919","borderLeftColor":"#CC1919"},300);
	},function(){
		$(this).animate({"color": "#595851"}, 300);
		$("#"+$(this).attr("id").substring(2)).animate({"opacity":"1.0","borderBottomColor":"#373c3e","borderRightColor":"#373c3e","borderTopColor":"#373c3e","borderLeftColor":"#373c3e"},300);
	});
	
	/**
	 * hover for the thumbnails 
	 */
	$("#thumbs_grid .thumbs [class^=thumb]").hover(function(){
		if($(this).attr("class") == "thumb") {
			$(this).animate({"opacity":"0.5","borderBottomColor":"#CC1919","borderRightColor":"#CC1919","borderRightColor":"#CC1919","borderTopColor":"#CC1919","borderLeftColor":"#CC1919"},300);
			$("#l_"+$(this).attr("id")).animate({"color": "#CCCABA"}, 300);
		}
		
	},function(){
		if($(this).attr("class") == "thumb") {
			$(this).animate({"opacity":"1.0","borderBottomColor":"#fcfcfc","borderRightColor":"#fcfcfc","borderRightColor":"#fcfcfc","borderTopColor":"#fcfcfc","borderLeftColor":"#fcfcfc"},300);
			$("#l_"+$(this).attr("id")).animate({"color": "#595851"}, 300);
		} else {
			$(this).animate({"opacity":"1.0","borderBottomColor":"#CC1919","borderRightColor":"#CC1919","borderRightColor":"#CC1919","borderTopColor":"#CC1919","borderLeftColor":"#CC1919"},300);
		}
	});
}

function showMainMenu($main_menus) {
	
	var width = 0;
	if($main_menus.eq(0).attr("id")) {
		var id = $main_menus.eq(0).attr("id");
		width = (id.length * 8);
		if(id.indexOf('i') > -1) {
			width -= 5;
		}
	}
	
	$main_menus
    .eq(0)    // get the first element
    .animate({"width": ""+ width + "px"}, 100,
        function() {
    		showMainMenu($main_menus.slice(1));  // slice off the first element
        }
    );
	
	if($main_menus.length == 0) {
		showSubMenu($("#series"));
	}
	
}

function showAllElements($borders, $thumbs, thumbHeight) {
	
	showSubMenu($("#series"));
	
	showElements($borders, $thumbs, thumbHeight);
}

function showElements($borders,$thumbs, thumbHeight) {
	// show borders
	$borders
    .eq(0)    // get the first element
    .animate({"width": "90%"}, 800,
        function() {
    		showElements($borders.slice(1),$thumbs,thumbHeight);  // slice off the first element
        }
    );
	//show thumbs
	if($borders.length == 1) {
		
		$contentHeight = $("#content").height();
		
		showThumbs($thumbs,thumbHeight);
		showSerieThumbText($("#serie_thumbs_grid .serie_thumbs"));
	}
}

function showMedPhotos($med_photo) {

	$med_photo.animate({"opacity": "1.0"},300);

}

function showSerieThumbText($med_photo) {
	$med_photo
    .eq(0)    // get the first element
    .animate({"color":"#595851"}, loadTime,
        function() {
    		showSerieThumbText($med_photo.slice(1));  // slice off the first element
        }
    );
}

function showThumbs($thumbs,thumbHeight) {
	
	$thumbs
    .eq(0)    // get the first element
    .animate({"height": ""+thumbHeight+""}, loadTime,
        function() {
            showThumbs($thumbs.slice(1),thumbHeight);  // slice off the first element
        }
    );
	
	if($thumbs.length == 0) {
		showMedPhotos($("#section .med"));
	}
}

function showSubMenu($series) {
	
	$series
    .eq(0)    // get the first element
    .animate({"top": "5","opacity":"1.0"}, 250,
        function() {
    		showSubMenu($series.slice(1));  // slice off the first element
        }
    );
	
}

/**
 * Rollback to stay in index.php
 * 
 * @param $borders
 * @param $thumbs
 * @param location
 * @return
 */
function rollBackAnimation($borders, $thumbs, location ) {
	shrinkElements($borders, $thumbs,location);
}

function shrinkElements($borders, $thumbs, location) {
	// shrink borders
	$borders
    .eq($borders.length - 1)    // get the first element
    .animate({"width": "0px"}, 350,
        function() {
    		shrinkElements($borders.slice(0,$borders.length - 1), $thumbs,location);  // slice off the first element
        }
    );
	//hide thumbs
	if($borders.length == 0) {
		$serie_thumbs = $("#serie_thumbs_grid .serie_thumbs .serie_thumb");
		if($serie_thumbs.length > 0) {
			hideSerieThumbs($serie_thumbs,location);
		}else {
			hideMedPhotos($("#section .med .img"),$thumbs, location);
		}
	}
}

function hideSubMenu($series, location) {
	$series
    .eq(0)    // get the first element
    .animate({"top": "-15","opacity":"0"}, 250,
        function() {
    		hideSubMenu($series.slice(1),location);  // slice off the first element
        }
    );
	
	if($series.length == 0) {
		hideLogo(location);
	}
}

function hideSerieThumbs($thumbs, location) {
	
	$thumbs
    .eq($thumbs.length - 1)    // get the first element
    .animate({"height":"0px","border":"0px"}, loadTime,
        function() {
    		hideSerieThumbs($thumbs.slice(0,$thumbs.length - 1), location);  // slice off the last element
        }
    );
	
	if($thumbs.length == 0) {
		hideSubMenu($("#series"),location);
	}
}

function hideMedPhotos($med_thumbs, $thumbs, location) {
	
	$("#section").animate({"top":""+$("body").height()+"px","border":"0px"}, 300,hideThumbs($thumbs, location));

}

function hideThumbs($thumbs, location) {
	
	$thumbs
    .eq($thumbs.length - 1)    // get the first element
    .animate({"height":"0px","border":"0px"}, loadTime,
        function() {
    		hideThumbs($thumbs.slice(0,$thumbs.length - 1), location);  // slice off the last element
        }
    );
	
	if($thumbs.length == 0) {
		hideSubMenu($("#series"), location);
	}
}

/**
 * Rollback go to gallery.php 
 * 
 * @param $borders
 * @param $thumbs
 * @param location
 * @return
 */
function rollBackAllElements(location) {
	
	shrinkElements($(".borders"), $("#thumbs_grid .thumbs [class^=thumb]"),location);
	
	$("#menu_div").animate({"opacity":"0"},700);
	//hideElement($(".borders"), location);
	
}

function hideElement($borders, location) {
	
	$borders
    .eq($borders.length - 1)    // get the first element
    .animate({"width": "0px"}, 500,
        function() {
    		hideElement($borders.slice(0,$borders.length - 1), location);  // slice off the first element
        }
    );
	//hide thumbs
	if($borders.length == 0) {
		
		hideNextElement($("#thumbs_grid .thumbs [class^=thumb]"), location);
	}
}

function hideNextElement($thumbs, location) {
	$thumbs
    .eq($thumbs.length - 1)    // get the first element
    .animate({"height":"0px","border":"0px"}, 50,
        function() {
    		hideNextElement($thumbs.slice(0,$thumbs.length - 1), location);  // slice off the last element
        }
    );
	
	if($thumbs.length == 0) {
		hideMedPhotos($("#section .med .img"));
		hideSubAndMainMenu($("#series div"), $("#menu_div div"), location);
	}
}

function hideSubAndMainMenu($series, $main_menu, location) {
	$series
    .eq($series.length - 1)    // get the first element
    .animate({"opacity": "0.001"}, 100,
        function() {
    		hideSubAndMainMenu($series.slice(0,$series.length - 1),$main_menu, location);  // slice off the first element
        }
    );
	if($series.length == 0) {
		hideMainMenu($main_menu, location);
	}
}

function hideMainMenu($main_menu, location) {
	$main_menu
    .eq($main_menu.length-1)    // get the first element
    .animate({"opacity": "0.001"}, 100,
        function() {
    		hideMainMenu($main_menu.slice(0,$main_menu.length-1), location);  // slice off the first element
        }
    );
	if($main_menu.length == 0) {
		hideLogo(location);
	}
}

function showLogo() {
	$("#name").animate({"top":"28px"}, 500);
}

function hideLogo(location) {
	$("#content_info").animate({"top":"-1000px"}, 150);
	$("#name").animate({"top":"-50px"}, 150,function(){ window.location = location;});
}

function onClickMainMenu(ref) {
	
	var location = 'index.php?page='+ref.id;
	
	// rollBack animation --> borders then thumbs
	// and go to location
	rollBackAnimation($(".borders"), $(".thumbs [class^=thumb]"), location);

}

function onClickSerie(page, id) {
	
	var location = "index.php?page=" + page + "&sid=" + id;
	
	// rollBack animation --> borders then thumbs
	// and go to location
	rollBackAnimation($(".borders"), $("#thumbs_grid .thumbs [class^=thumb]"), location);
	
}

function onClickMed(sub_menu_id, photo_id) {
	
	var location = "gallery.php?sid="+sub_menu_id+"#"+photo_id;
	rollBackAllElements(location);
	
}

/******************* JQuery ***********************************/

jQuery(function( $ ){
	/**
	 * Most jQuery.localScroll's settings, actually belong to jQuery.ScrollTo, check it's demo for an example of each option.
	 * @see http://flesler.demos.com/jquery/scrollTo/
	 * You can use EVERY single setting of jQuery.ScrollTo, in the settings hash you send to jQuery.LocalScroll.
	 */
	
	// The default axis is 'y', but in this demo, I want to scroll both
	// You can modify any default like this
	$.localScroll.defaults.axis = 'xy';
	
	// Scroll initially if there's a hash (#something) in the url 
	$.localScroll.hash({
		target: '#med_photo_viewer', // Could be a selector or a jQuery object too.
		queue:false,
		duration:750,
		hash:false,
		onBefore:function( e, anchor, $target ) {
			
		},
		onAfter:function( anchor, settings ) {
			
		}
	});
	
	/**
	 * NOTE: I use $.localScroll instead of $('#navigation').localScroll() so I
	 * also affect the >> and << links. I want every link in the page to scroll.
	 */
	$.localScroll({
		target: '#med_photo_viewer', // could be a selector or a jQuery object too.
		queue:true,
		duration:750,
		hash:false,
		onBefore:function( e, anchor, $target ) {
			
			//$("#section .med .img").animate({"opacity": "1.0","color":"#595851"}, 900);
			//preShowPhoto($("#section .med"), anchor);
		
			var divId = (anchor.id).substring((anchor.id).indexOf("_")+1);
		
			if(justClicked != divId) {
				
				var $this = $("#thumb_"+divId);
		        
	            $this.removeClass('thumb').addClass('thumb_clicked');
	            
		        if(justClicked != "") {
		            $("#thumb_" + justClicked).removeClass('thumb_clicked').addClass('thumb').css({'border':'2px solid #fcfcfc'});
		        }
		        
			}
			
	       	justClicked = divId;
	        
		},
		onAfter:function( anchor, settings ) {
			
		}
	});
});
//"#section .med .img"
function preShowPhoto($med_photo, $anchor) {
	
	$photo = $med_photo.eq(0);
	
	if($anchor.id == $photo.attr("id")) {
		showPhoto($med_photo, $anchor)
		
	} else {
		preShowPhoto($med_photo.slice(1),$anchor);
	}
} 

function showPhoto($med_photo, $anchor) {
	
	$photo = $med_photo.eq(0);
	
	//$pos = $("#"+($anchor.id)).offset().left;
	//$dif = $pos - $photo.offset().left;
	alert($photo.offset().left+ $photo.width());
	//alert($pos);
	//alert($dif);
	
	
	if($photo.offset().left + $photo.width() < ($("#content").offset().left + $("#content").width())) {
		$photo.animate({"opacity": "1.0","color":"#595851"}, 10,
		        function() {
					showPhoto($med_photo.slice(1),$anchor);  // slice off the first element
		        }
		    );
	} else {
		$photo.animate({"opacity": "0.0","color":"#595851"}, 10,
		        function() {
					//showPhoto($med_photo.slice(1),$anchor);  // slice off the first element
		        }
		    );
	}
}