// JavaScript Document



            $(function() {
				//the loading image
				var $loader		= $('#st_loading');
				//the ul element 
				var $list		= $('#st_nav');
				//the current image being shown
				var $currImage 	= $('#st_main').children('img:first');
				
				//let's load the current image 
				//and just then display the navigation menu
				$('<img>').load(function(){
					$loader.hide();
					$currImage.fadeIn(3000);
					//slide out the menu
					setTimeout(function(){
						$list.animate({'left':'0px'},500);
					},
					1000);
					//FullScreenBackground(this); //edited by malihu
				}).attr('src',$currImage.attr('src'));
				
				//calculates the width of the div element 
				//where the thumbs are going to be displayed
				buildThumbs();
				
				function buildThumbs(){
					$list.children('li.album').each(function(){
						var $elem 			= $(this);
						var $thumbs_wrapper = $elem.find('.st_thumbs_wrapper');
						var $thumbs 		= $thumbs_wrapper.children(':first');
						//each thumb has 180px and we add 3 of margin
						var finalW 			= $thumbs.find('img').length * 183;
						$thumbs.css('width',finalW + 'px');
						//make this element scrollable
						makeScrollable($thumbs_wrapper,$thumbs);
					});
				}
				
				//clicking on the menu items (up and down arrow)
				//makes the thumbs div appear, and hides the current 
				//opened menu (if any)
				$list.find('.st_arrow_down').live('click',function(){
					var $this = $(this);
					hideThumbs();
					$this.addClass('st_arrow_up').removeClass('st_arrow_down');
					var $elem = $this.closest('li');
					$elem.addClass('current').animate({'height':'170px'},200);
					var $thumbs_wrapper = $this.parent().next();
					$thumbs_wrapper.show(200);
				});
				$list.find('.st_arrow_up').live('click',function(){
					var $this = $(this);
					$this.addClass('st_arrow_down').removeClass('st_arrow_up');
					hideThumbs();
				});
				
				//clicking on a thumb, replaces the large image
				$list.find('.st_thumbs img').bind('click',function(){
					var $this = $(this);
					$loader.show();
					$('<img class="st_preview"/>').load(function(){
						var $this = $(this);
						var $currImage = $('#st_main').children('img:first');
						$this.insertBefore($currImage);
						$loader.hide();
						FullScreenBackground(this); //edited by malihu
						$currImage.fadeOut(2000,function(){
							$(this).remove();
						});
					}).attr('src',$this.attr('alt'));
				}).bind('mouseenter',function(){
					$(this).stop().animate({'opacity':'1'});
				}).bind('mouseleave',function(){
					$(this).stop().animate({'opacity':'0.7'});
				});
				
				//function to hide the current opened menu
				function hideThumbs(){
					$list.find('li.current')
						 .animate({'height':'50px'},400,function(){
							$(this).removeClass('current');
						 })
						 .find('.st_thumbs_wrapper')
						 .hide(200)
						 .andSelf()
						 .find('.st_link span')
						 .addClass('st_arrow_down')
						 .removeClass('st_arrow_up');
				}

				//makes the thumbs div scrollable
				//on mouse move the div scrolls automatically
				function makeScrollable($outer, $inner){
					var extra 			= 800;
					//Get menu width
					var divWidth = $outer.width();
					//Remove scrollbars
					$outer.css({
						overflow: 'hidden'
					});
					//Find last image in container
					var lastElem = $inner.find('img:last');
					$outer.scrollLeft(0);
					//When user move mouse over menu
					$outer.unbind('mousemove').bind('mousemove',function(e){
						var containerWidth = lastElem[0].offsetLeft + lastElem.outerWidth() + 2*extra;
						var left = (e.pageX - $outer.offset().left) * (containerWidth-divWidth) / divWidth - extra;
						$outer.scrollLeft(left);
					});
				}
				
				//edited by malihu 
				function FullScreenBackground(theItem){
					var winWidth=$(window).width();
					var winHeight=$(window).height();
					var imageWidth=$(theItem).width();
					var imageHeight=$(theItem).height();
					var picHeight = imageHeight / imageWidth;
					var picWidth = imageWidth / imageHeight;
					if ((winHeight / winWidth) < picHeight) {
						$(theItem).css("width",winWidth);
						$(theItem).css("height",picHeight*winWidth);
					} else {
						$(theItem).css("height",winHeight);
						$(theItem).css("width",picWidth*winHeight);
					};
						$(theItem).css("margin-left",winWidth / 2 - $(theItem).width() / 2);
						$(theItem).css("margin-top",winHeight / 2 - $(theItem).height() / 2);
				}
				
				$(window).resize(function() {
					FullScreenBackground('.st_main img.st_preview');
				});
				//
            });


//Navigation panel on top of screen
            $(function() {
                var d=300;
                $('#navigation .home a, #navigation .menu a, #navigation .album a, #navigation .contact a').each(function(){
                    $(this).stop().animate({
                        'marginTop':'-50px'
                    },d+=150);
                });
				
				$('#navigation .logo a').each(function(){
                    $(this).stop().animate({
                        'marginTop':'-5px'
                    },d+=150);
                });
				

                $('#navigation .home a, #navigation .menu a, #navigation .album a, #navigation .contact a').hover(
                function () {
                    $(this).stop().animate({
                        'marginTop':'-2px'
                    },200);
                },
				
                function () {
                    $(this).stop().animate({
                        'marginTop':'-50px'
                    },200);
                }
            );
		
            });
			
			
//CSS Lightbox Gallery
			$(document).ready(function(){
// Executed once all the page elements are loaded

	var preventClick=false;
	
	$(".pic a").bind("click",function(e){
		/* This function stops the drag from firing a click event and showing the lightbox */
		if(preventClick)
		{
			e.stopImmediatePropagation();
			e.preventDefault();
		}
	});

	$(".pic").draggable({
		/* Converting the images into draggable objects */
		containment: 'parent',
		start: function(e,ui){
			/* This will stop clicks from occuring while dragging */
			preventClick=true;
		},
		
		stop: function(e, ui) {
			/* Wait for 250 milliseconds before re-enabling the clicks */
			setTimeout(function(){ preventClick=false; }, 250);
		}
	});


	$('.pic').mousedown(function(e){
								 
		/* Executed on image click */
		
		var maxZ = 0;
		
		/* Find the max z-index property: */
		
		$('.pic').each(function(){
			var thisZ = parseInt($(this).css('zIndex'))
			if(thisZ>maxZ) maxZ=thisZ;
		});
		
		/* Clicks can occur in the picture container (with class pic) and in the link inside it */
		if($(e.target).hasClass("pic"))
		{
			/* Show the clicked image on top of all the others: */
			$(e.target).css({zIndex:maxZ+1});
		}
		else $(e.target).closest('.pic').css({zIndex:maxZ+1});
	});
	
	/* Converting all the links to a fancybox gallery */
	$("a.fancybox").fancybox({
		zoomSpeedIn: 300,
		zoomSpeedOut: 300,
		overlayShow:false
	});
	
	/* Converting the share box into a droppable: */
	$('.drop-box').droppable({
		hoverClass: 'active',
		drop:function(event,ui){
			/* Fill the URL text field with the URL of the image. */
			/* The id of the image is appended as a hash #pic-123 */
			$('#url').val(location.href.replace(location.hash,'')+'#'+ui.draggable.attr('id'));
			$('#modal').dialog('open');
		}
	});

	/* Converts the div with id="modal" into a modal window  */
	$("#modal").dialog({
		bgiframe: true,
		modal: true,
		autoOpen:false,
		buttons: {
				Ok: function() {
					$(this).dialog('close');
				}
			}
	});
	
	if(location.hash.indexOf('#pic-')!=-1)
	{
		/* Checks whether a hash is present in the URL */
		/* and shows the respective image */
		$(location.hash+' a.fancybox').click();
	}
	
});

//Mini Slideshow Gallery (Menu Page)		
$(window).bind("load", function() { 
    $("div#my-folio-of-works").slideViewerPro({ 
        thumbs: 8,  
        autoslide: true,  
        asTimer: 3500,  
        typo: true, 
        galBorderWidth: 4, 
        thumbsBorderOpacity: 0,  
        buttonsTextColor: "#7A442C", 
        buttonsWidth: 40, 
        thumbsActiveBorderOpacity: 0.8, 
        thumbsActiveBorderColor: "#7A442C", 
        shuffle: true 
    }); 
});