//After thumbnails have loaded fade them in.       
$('#buffer > div > img').one('load', function() {
  // do stuff
   //$(this).parent().stop().animate({'opacity':'0.72'},200);
   $(this).parent().show();
}).each(function() {
  if(this.complete) $(this).load();
});
  
//Using regular document load will not work if the images are loaded from cache:
/*
eg.
    $('#buffer > div > img').load(function(){
          $(this).parent().show();
     });
*/
     



//Image Gallery


      // 	<!-- Credit: http://tympanus.net/codrops/2010/05/14/sliding-panel-photo-wall-gallery-with-jquery/ -->
            $(function() {
	            //eric
	            var frame = $('#frame');
	            
	            var titleheight = 25;
			
	            
	            	//Vertical description Sliding

if (!navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
	$('#frame').hover(function(){
	     //alert("not ipad");
		$("#descriptionbox", this).animate({bottom:(titleheight-1)+'px'},{queue:false,duration:300});
		$('#descriptionbox').css('background-image', 'url(/themes/grid-panel/images/bg-black.png)'); 
	}, function() {
		var descriptionheight = ($('#descriptionbox').height())-titleheight;
		$("#descriptionbox", this).animate({bottom:'-'+descriptionheight+'px'},{queue:false,duration:300});
		$('#descriptionbox').css('background-image', 'none'); 
	});
} else {
//it is iPod!
	$('#frame > img').live('click',function(){
		$('#descriptionbox').trigger('click');

	});
}
	
	

		//Open and close menu
	$("#descriptionbox").click(function(){
		if ($('#descriptionbox').css('background-image') == 'none'){
		$("#descriptionbox").animate({bottom:(titleheight-1)+'px'},{queue:false,duration:300});
		$('#descriptionbox').css('background-image', 'url(/themes/grid-panel/images/bg-black.png)'); 
	} else {
		var descriptionheight = ($('#descriptionbox').height())-titleheight;
		$("#descriptionbox").animate({bottom:'-'+descriptionheight+'px'},{queue:false,duration:300});
		$('#descriptionbox').css('background-image', 'none'); 
	}
	});
	
	
	
                /* this is the index of the last clicked picture */
                var current = -1;
                /* number of pictures */
                var totalpictures = $('#buffer img').size();
                /* speed to animate the panel and the thumbs wrapper */
                var speed 	= 500;
				
				
                /*
                when the user resizes the browser window,
                the size of the picture being viewed is recalculated;
                 */
                $(window).bind('resize', function() {
                    var $picture = $('#frame').find('img');
                    
                    resize($picture);
                    descriptionheight = ($('#descriptionbox').height())-titleheight;
                     $('#descriptionbox').css('bottom','-'+descriptionheight+'px');
                });
               
                /*
                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
                 */
                $('#buffer > div > img').hover(function () {
                    var $this   = $(this);
                    if (!navigator.userAgent.match(/(iPod|iPhone|iPad)/))
                    $this.stop().animate({'opacity':'1.0'},200);
                },function () {
                    var $this   = $(this);
                    if (!navigator.userAgent.match(/(iPod|iPhone|iPad)/))
                    $this.stop().animate({'opacity':'0.4'},200);
                }).bind('click',function(){
                    var $this   = $(this);
             
                    /* shows the loading icon */
                    $('#loading').show();
                    
                    $('<img/>').load(function(){
                        $('#loading').hide();
                        
                        if($('#frame').find('img').length) return;
                        current 	= $this.parent().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);

                        $('#frame').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 = '<span class="title">'+($this.attr('title'))+'</span><br/><span class="description">'+($this.next('.hidedescription').html())+'</span>';
                            if(title != ''){ 
                                $('#description').html(title).show();
                                $('#descriptionbox').show();
                         }   
                            else {
	                            $('#descriptionbox').hide();
                                $('#description').empty().hide();

                        }
                        
                        descriptionheight = ($('#descriptionbox').height())-titleheight;
                        $('#descriptionbox').css('bottom','-'+descriptionheight+'px');
                        
                            /*
                            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();
                                
                            $('#close').fadeIn(); 
                            
                            //** FOR iOS!!!
                            if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
	                          $('#prev').hide();
	                          $('#next').hide();
		                    }   
		                    
                            /*
                            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'});
                            //$('#mute').css({'z-index':'555555',});
                        });
                    }).attr('src', $this.attr('alt'));
                });

                /*
                
                FOR EXIT BUTTON
                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
                 */
                 
                 //$('#frame > img').live('click',function(){
                $('#close').live('click',function(){
                    $this = $('#frame > img');
                    $('#descriptionbox').hide();
                    $('#description').empty().hide();
                    $('#thumbsWrapper').css('z-index','500')
                    .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();
                        $('#close').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 		= $('#buffer > div:nth-child('+parseInt(current+2)+') > img');
                    navigate($nextimage,'right');
                });
                $('#prev').bind('click',function(){
                    var $this           = $(this);
                    var $previmage 		= $('#buffer > div:nth-child('+parseInt(current)+') > img');
                    navigate($previmage,'left');
                });

                /*
                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){
                    	//FOR iOS!!!!
                    	$("#frame").css("-webkit-transform", "translate3d(0px,0px,0px)");
                        return;
                    }
                    if(dir=='right' && current==parseInt(totalpictures-1)){
                    	//FOR iOS!!!!
                    	$("#frame").css("-webkit-transform", "translate3d(0px,0px,0px)");
                        return;
                        }
                    $('#loading').show();
                    
                    $('<img/>').load(function(){
                        var $theImage = $(this);
                        $('#loading').hide();
                        $('#descriptionbox').stop().fadeOut();
                        $('#description').empty().fadeOut();
						
                         
                        $('#frame img').stop().fadeOut(500,function(){
                            var $this = $(this);
							
                            $this.remove();
                            resize($theImage);
                            
                            //FOR iOS!!!!
                            $("#frame").css("-webkit-transform", "translate3d(0px,0px,0px)");
                              
                            $('#frame').append($theImage.show());
                            $theImage.stop().fadeIn(800);
							$('#descriptionbox').stop().fadeIn(800);
							
                            /*var title = $nextimage.attr('title');*/
                            var title = '<span class="title">'+($nextimage.attr('title'))+'</span><br/><span class="description">'+($nextimage.next('.hidedescription').html())+'</span>';
                            if(title != ''){
                                $('#description').html(title).show();
                                $('#descriptionbox').show();
                                $('#descriptionbox').css('background-image', 'none'); 
                                descriptionheight = ($('#descriptionbox').height())-titleheight;
                        		$('#descriptionbox').css('bottom','-'+descriptionheight+'px');
                            }
                            else
                                $('#description').empty().hide();

                            if(current==0)
                                $('#prev').hide();
                            else
                                $('#prev').show();
                            if(current==parseInt(totalpictures-1))
                                $('#next').hide();
                            else
                                $('#next').show();
                                
                            $('#close').show(); 
                            
                            //** FOR iOS!!!
                            if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
	                          $('#prev').hide();
	                          $('#next').hide();
		                    }   
                        });
                        /*
                        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()-95;
                    var windowW      = $(window).width()-120;
                    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{
                            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'});
                    
                    /* add CSS border from image */
                    theImage.width=theImage.width+2;
                    theImage.height=theImage.height+25;
                    frame.css({'width':theImage.width+'px','height':theImage.height+'px'});
                }
            });