$(function() {
    /* this is the index of the last clicked picture */
    var current = -1;
    /* number of pictures */
    var totalpictures = $('#content img').size();
    /* speed to animate the panel and the thumbs wrapper */
    var speed 	= 500;
	
    /* show the content */
    $('#content').show();
	
    /*
    when the user resizes the browser window,
    the size of the picture being viewed is recalculated;
     */
    $(window).bind('resize', function() {
        var $picture = $('#wrapper').find('img');
        resize($picture);
    });
   
    /*
    when hovering a thumb, animate it's opacity
    for a cool effect;
    when clicking on it, we load the corresponding large image;
    the source of the large image is stored as 
    the "alt" attribute of the thumb image
     */
    $('#content > img').hover(function () {
        var $this   = $(this);
        $this.stop().animate({'opacity':'1.0'},200);
    },function () {
        var $this   = $(this);
        $this.stop().animate({'opacity':'0.9'},200);
    }).bind('click',function(){
        var $this   = $(this);
        
        /* shows the loading icon */
        $('#loading').show();
        
        $('<img/>').load(function(){
            $('#loading').hide();
            
            if($('#wrapper').find('img').length) return;
            current 	= $this.index();
            var $theImage   = $(this);
            /*
            After it's loaded we hide the loading icon
            and resize the image, given the window size;
            then we append the image to the wrapper
            */
            
            resize($theImage);

            $('#wrapper').append($theImage);
            /* make its opacity animate */
            $theImage.fadeIn(800);
            
            /* and finally slide up the panel */
            $('#panel').animate({'height':'100%'},speed,function(){
                /*
                if the picture has a description,
                it's stored in the title attribute of the thumb;
                show it if it's not empty
                 */
                var title = $this.attr('title');
                if(title != '') 
                    $('#description').html(title).show();
                else 
                    $('#description').empty().hide();
                
                /*
                if our picture is the first one,
                don't show the "previous button"
                for the slideshow navigation;
                if our picture is the last one,
                don't show the "next button"
                for the slideshow navigation
                 */
                if(current==0)
                    $('#prev').hide();
                else
                    $('#prev').fadeIn();
                if(current==parseInt(totalpictures-1))
                    $('#next').hide();
                else
                    $('#next').fadeIn();
                /*
                we set the z-index and height of the thumbs wrapper 
                to 0, because we want to slide it up afterwards,
                when the user clicks the large image
                 */
                $('#thumbsWrapper').css({'z-index':'0','height':'0px'});
            });
        }).attr('src', $this.attr('alt'));
    });

    /*
    when hovering a large image,
    we want to slide up the thumbs wrapper again,
    and reset the panel (like it was initially);
    this includes removing the large image element
     */
    $('#wrapper > img').live('click',function(){
        $this = $(this);
        $('#description').empty().hide();
        
        $('#thumbsWrapper').css('z-index','10')
        .stop()
        .animate({'height':'100%'},speed,function(){
            var $theWrapper = $(this);
            $('#panel').css('height','0px');
            $theWrapper.css('z-index','0');
            /* 
            remove the large image element
            and the navigation buttons
             */
            $this.remove();
            $('#prev').hide();
            $('#next').hide();
        });
    });

    /*
    when we are viewing a large image,
    if we navigate to the right/left we need to know
    which image is the corresponding neighbour.
    we know the index of the current picture (current),
    so we can easily get to the neighbour:
     */
    $('#next').bind('click',function(){
        var $this           = $(this);
        var $nextimage 		= $('#content img:nth-child('+parseInt(current+2)+')');
        navigate($nextimage,'right');
    });
    $('#prev').bind('click',function(){
        var $this           = $(this);
        var $previmage 		= $('#content img:nth-child('+parseInt(current)+')');
        navigate($previmage,'left');
    });

    $('#viewImage').bind('click',function(){
        //alert('Tardas Mucho' + current);  
        //$('#content').hide();
        //alert('Tardas Mucho' + $('#content img:nth-child('+parseInt(current+1)+')').html(title).show());

        //alert($('#content img:nth-child('+parseInt(current+2)+')').html(title));  
        
        //current = current+2;
        var $myImage = $('#content img:nth-child('+parseInt(1)+')');
        
       current 	= $myImage.index();
        
        alert($myImage.attr('title')); 
        
        
            $('#loading').hide();
            
            if($('#wrapper').find('img').length) return;
            // current 	= $myImage.index();
            //var $theImage   = $($myImage);        
        
        
        
             var $theImage   = $myImage;
            /*
            After it's loaded we hide the loading icon
            and resize the image, given the window size;
            then we append the image to the wrapper
            */
            
             resize($theImage);

            $('#wrapper').append($theImage);
            /* make its opacity animate */
            $theImage.fadeIn(800);
            
            /* and finally slide up the panel */
            $('#panel').animate({'height':'100%'},speed,function(){
                /*
                if the picture has a description,
                it's stored in the title attribute of the thumb;
                show it if it's not empty
                 */
                var title = $theImage.attr('title');
                if(title != '') 
                    $('#description').html(title).show();
                else 
                    $('#description').empty().hide();
                
                /*
                if our picture is the first one,
                don't show the "previous button"
                for the slideshow navigation;
                if our picture is the last one,
                don't show the "next button"
                for the slideshow navigation
                 */
                if(current==0)
                    $('#prev').hide();
                else
                    $('#prev').fadeIn();
                if(current==parseInt(totalpictures-1))
                    $('#next').hide();
                else
                    $('#next').fadeIn();
                /*
                we set the z-index and height of the thumbs wrapper 
                to 0, because we want to slide it up afterwards,
                when the user clicks the large image
                 */
                $('#thumbsWrapper').css({'z-index':'0','height':'0px'});
            });           
            
        //resize($myImage);

            //$('#wrapper').append($myImage);
            ///* make its opacity animate */
            //$myImage.fadeIn(800);         
        
        //resize($theImage);
        //$theImage.load();
                
               // $('#wrapper').append($myImage.show());
               // $myImage.stop().fadeIn(800);
                
        //$myImage.load(function(){
			//	$('#loading').hide();
			//	
			//	if($('#wrapper').find('img').length) return;
			//	current 	= $this.index();
			//	var $theImage   = $(this);
			//	/*
			//	After it's loaded we hide the loading icon
			//	and resize the image, given the window size;
			//	then we append the image to the wrapper
			//	*/
			//	
			//	resize($theImage);
	        //
			//	$('#wrapper').append($theImage);
			//	/* make its opacity animate */
			//	$theImage.fadeIn(800);
			//	
			//	/* and finally slide up the panel */
			//	$('#panel').animate({'height':'100%'},speed,function(){
			//		/*
			//		if the picture has a description,
			//		it's stored in the title attribute of the thumb;
			//		show it if it's not empty
			//		 */
			//		var title = $this.attr('title');
			//		if(title != '') 
			//			$('#description').html(title).show();
			//		else 
			//			$('#description').empty().hide();
			//		
			//		/*
			//		if our picture is the first one,
			//		don't show the "previous button"
			//		for the slideshow navigation;
			//		if our picture is the last one,
			//		don't show the "next button"
			//		for the slideshow navigation
			//		 */
			//		if(current==0)
			//			$('#prev').hide();
			//		else
			//			$('#prev').fadeIn();
			//		if(current==parseInt(totalpictures-1))
			//			$('#next').hide();
			//		else
			//			$('#next').fadeIn();
			//		/*
			//		we set the z-index and height of the thumbs wrapper 
			//		to 0, because we want to slide it up afterwards,
			//		when the user clicks the large image
			//		 */
			//		$('#thumbsWrapper').css({'z-index':'0','height':'0px'});
			//	});
        //}).attr('src', $this.attr('alt'));
        
        //$('#content img:nth-child('+parseInt(current+1)+')').css('height','200px');
        
      
        
    });
  
    
    /*
    given the next or previous image to show,
    and the direction, it loads a new image in the panel.
     */
    function navigate($nextimage,dir){
        /*
        if we are at the end/beginning
        then there's no next/previous
         */
        if(dir=='left' && current==0)
            return;
        if(dir=='right' && current==parseInt(totalpictures-1))
            return;
        $('#loading').show();
        $('<img/>').load(function(){
            var $theImage = $(this);
            $('#loading').hide();
            $('#description').empty().fadeOut();
             
            $('#wrapper img').stop().fadeOut(500,function(){
                var $this = $(this);
				
                $this.remove();
                resize($theImage);
                
                $('#wrapper').append($theImage.show());
                $theImage.stop().fadeIn(800);

                var title = $nextimage.attr('title');
                if(title != ''){
                    $('#description').html(title).show();
                }
                else
                    $('#description').empty().hide();

                if(current==0)
                    $('#prev').hide();
                else
                    $('#prev').show();
                if(current==parseInt(totalpictures-1))
                    $('#next').hide();
                else
                    $('#next').show();
            });
            /*
            increase or decrease the current variable
             */
            if(dir=='right')
                ++current;
            else if(dir=='left')
                --current;
        }).attr('src', $nextimage.attr('alt'));
    }

    /*
    resizes an image given the window size,
    considering the margin values
     */
    function resize($image){
        var windowH      = $(window).height()-100;
        var windowW      = $(window).width()-80;
        var theImage     = new Image();
        theImage.src     = $image.attr("src");
        var imgwidth     = theImage.width;
        var imgheight    = theImage.height;

        if((imgwidth > windowW)||(imgheight > windowH)){
            if(imgwidth > imgheight){
                var newwidth = windowW;
                var ratio = imgwidth / windowW;
                var newheight = imgheight / ratio;
                theImage.height = newheight;
                theImage.width= newwidth;
                if(newheight>windowH){
                    var newnewheight = windowH;
                    var newratio = newheight/windowH;
                    var newnewwidth =newwidth/newratio;
                    theImage.width = newnewwidth;
                    theImage.height= newnewheight;
                }
            }
            else if(imgwidth < imgheight){
                var newheight = windowH;
                var ratio = imgheight / windowH;
                var newwidth = imgwidth / ratio;
                theImage.height = newheight;
                theImage.width= newwidth;
                if(newwidth>windowW){
                    var newnewwidth = windowW;
                    var newratio = newwidth/windowW;
                    var newnewheight =newheight/newratio;
                    theImage.height = newnewheight;
                    theImage.width= newnewwidth;
                }
            }
        }
        $image.css({'width':theImage.width+'px','height':theImage.height+'px'});
    }
});