/// <reference path="jquery.intellisense.js"/>  
/* Gallery manager */

(function($) {

$.fn.gallery = function(options) {


  // Extend our default options with those provided.
  var opts = $.extend({}, $.fn.gallery.defaults, options);
  
  
      
 }


 
    function renderGallery(pageToDisplay)
    {        
        $("#photo-gallery").empty();
        
        // work out how many images in a row
        var rowSize = Math.ceil($.fn.gallery.defaults.pageSize / $.fn.gallery.defaults.rows);        
        
        var startIndex = $.fn.gallery.defaults.pageSize * pageToDisplay;
        var endIndex = startIndex + $.fn.gallery.defaults.pageSize;
               
        // check that the end index isn't greater than the list of media items
        if(endIndex > $.fn.gallery.defaults.jsonFile.length-1)
        {        
            endIndex=$.fn.gallery.defaults.jsonFile.length;
        }
        
        for(i=startIndex; i < endIndex; i++)
        {            
            var item = $.fn.gallery.defaults.jsonFile[i];
            
            // grab the media details.  There should be only one, else throw exception
            
                var mediaDetails = item;                               

                // default class name for the row
                var classname="";
                
                // set the class name for the last element of the row
		        if((i+1) % rowSize == 0) {
			        classname = "row-end";
		        }
			    			    
		        insertItem(mediaDetails,item.Title,classname, i);
			    
			    
			    
		        // select the first element
		        if(i==selectedIndex)
		        {
		            displayMediaDetails(i);
		        }

          
	    }
	    
	    applyTooltips();
    }
 
    // This inserts the gallery items with in the photo-gallery element
	function insertItem(mediaDetails,imageTitle,className, index) {	    
		$("<img/>").attr("src", getMediaUrlThumb(mediaDetails.ImageManager)).
		appendTo("#photo-gallery").wrap("<li class='"+className+"'></li>").
		attr("id", $.fn.gallery.defaults.thumbImagePrefix + index).
		wrap("<a title='"+imageTitle+"' href='javascript:;'></a>").bind("click", thumbImage_click);
		
	}  
            
    function applyTooltips() {
				$("#photo-gallery a").tooltip({
					track: true,
					delay: 0,
					showURL: false,
					extraClass: "tooltip-gallery",
					opacity: 1,			
					top: -93,
					left: -30
				});

				$("#albums a").tooltip({
					track: true,
					delay: 0,
					showURL: false,
					extraClass: "tooltip-album",
					opacity: 1,			
					top: -30,
					left: -10
				});
			}			   

    //PRIVATE METHODS
    function pagingControl_click(element)
    {    
        selectedIndex = parseInt(element.target.id) * $.fn.gallery.defaults.pageSize;
        renderGallery(element.target.id);
    }
    
    function thumbImage_click(element)
    {        
        // strip out the index from the media thumb id
        var mediaIndex = element.target.id.substring($.fn.gallery.defaults.thumbImagePrefix.length);        
        displayMediaDetails(mediaIndex)
    }
                       
    function throwException(message)
    {
        alert(message);
    }    
    
    function renderSideGallery(mediaIndex)
    {
    
		// hide the view button if there's no entries
    	if ( $.fn.gallery.totalNumberOfMediaItems() == 0 ) {
			$ ( "#media-photo-link" ).parent().hide();
			return;
		}
    
		var mediaItem = $.fn.gallery.defaults.jsonFile[mediaIndex];
		$("#media-caption").html ( mediaItem.Title );
	
		
       $("#media-photo-link").attr("href", getMediaUrlLarge(mediaItem.ImageManager))
			.attr("title", mediaItem.Title);
		
		$("#media-thumb").animate({opacity: 0}, 250, function() {
				$("#media-thumb").attr("src", getMediaUrlMedium(mediaItem.ImageManager));
			    $("#media-thumb").animate({opacity: 1}, 250);
			
		});
		
		

			
		selectedIndex = mediaIndex;	
    }
    
    
    var firstTimeLoad = true;
    // Display the selected media
    // mediathumbId - the element Id of the thumb to be displayed
    function displayMediaDetails(mediaIndex)
    {               
        $("#photo-gallery li a").animate({opacity: 1}, 100).removeClass("hover");              
        
        $("#" + $.fn.gallery.defaults.thumbImagePrefix+mediaIndex).parent()
			.animate({opacity: 0.5}, 100)
			.addClass("hover")
			.focus(); 
			
        
        var mediaItem = $.fn.gallery.defaults.jsonFile[mediaIndex];        
       
        
        // this next little bit added the fade out fade in effect
        // However, on the first load we only want the fade in effect
        if(!firstTimeLoad)
        {
		    $("#photo-image").animate({opacity: 0}, 250, function() {
				$("#photo-image").attr("src", getMediaUrlMedium(mediaItem.ImageManager));
			    $("#photo-image").animate({opacity: 1}, 250);
		    });
		}
		else
		{	
			$("#photo-image").attr("src", getMediaUrlMedium(mediaItem.ImageManager));
		    $("#photo-image").css({opacity: 0});
		    $("#photo-image").show();	
		    $("#photo-image").animate({opacity: 1}, 250);
		    	   
		    firstTimeLoad = false;
		}

        // set the link to open the picture full size
        $("#photo-link").attr("href", getMediaUrlLarge(mediaItem.ImageManager))
			.attr("title", mediaItem.Title)
			.attr ("rel","gallery" );

        $("#photo-title").html(mediaItem.Title);
        $("#photo-summary").html(mediaItem.Summary);

        
        // update the global
        selectedIndex = mediaIndex;
        
        updateMediaCount();
        updatePaging();           
                     
    }
    
    function updateMediaCount()
    {
        // update the imagecount if an element set for it        
        $('#' + $.fn.gallery.defaults.mediaCount).html((parseInt(selectedIndex)+1) + ' of ' + $.fn.gallery.defaults.jsonFile.length)        
    }
    
    function updatePaging()    
    {
        // clear the paging
        $('#' + $.fn.gallery.defaults.paging).empty();
        var first = true;         
        var currentPage =  Math.floor(selectedIndex / $.fn.gallery.defaults.pageSize);   
        // render the paging
        for(page=0; page < ($.fn.gallery.defaults.jsonFile.length / $.fn.gallery.defaults.pageSize); page++)
        {          
            var classname='';
            if(first)
            {
                classname='first';
                first=false;
            }
            // if current page, add strong tags and no click event
            if(currentPage==page)
            {
                $("<li> <strong>" + parseInt(page+1) + "</strong> </li>").addClass(classname).appendTo('#' + $.fn.gallery.defaults.paging).attr("id", page); 
            }
            else
            {
                $("<a></a>").html(parseInt(page+1)).bind("click", pagingControl_click).appendTo('#' + $.fn.gallery.defaults.paging).attr("id", page).wrap("<li class='" + classname + "'></li>");            
            }
        }
    }
    
    function getMediaUrlThumb(imageFileName)
    {
        return $.fn.gallery.defaults.imageUrl + $.fn.gallery.defaults.thumbPrefix + imageFileName;
    }
    
    function getMediaUrlMedium(imageFileName)
    {
        return $.fn.gallery.defaults.imageUrl + $.fn.gallery.defaults.mediumPrefix + imageFileName;
    }
    
    function getMediaUrlLarge(imageFileName)
    {
		var lastDotIndex = imageFileName.lastIndexOf('.');
		var firstPart = imageFileName.substr(0,lastDotIndex);
		var lastPart = imageFileName.substr(lastDotIndex,imageFileName.length -lastDotIndex);
        return $.fn.gallery.defaults.imageUrl + firstPart + $.fn.gallery.defaults.largePrefix + lastPart;
    }
    
    function getMediaUrlSide(imageFileName)
    {
        return $.fn.gallery.defaults.imageUrl + $.fn.gallery.defaults.sidePrefix + imageFileName;
    }
    
    // END PRIVATE METHODS
    
var selectedIndex = 0;    

$.fn.gallery.createSideGallery = function ()
{
	renderSideGallery ( selectedIndex );
}


$.fn.gallery.createGallery = function()
{ 
    renderGallery(0);
}    

$.fn.gallery.defaults = {
    // the JSON file containing all the images
    jsonFile: '',    
    // how many to display of a page
    pageSize: 14,
    // number of rows in a page
    rows: 2,
    // page to start on
    page: 1,
    // this is used to select an item using the CMS id
    //selectedItemCMSId: 0,
    // the prefix to append to the images that get rendered
    thumbImagePrefix: 'gallerythumb_',
    // the id of the element to contain the media count information
    mediaCount: 'mediaCount',
    // the id of the element to contain the paging information
    paging: 'galleryPaging',
    // the url to where images are kept in
    imageUrl: '/apra/downloads/gallery/',
    // the prefix for the thumbnail
    thumbPrefix: 'thumb_',    
    // the prerfix for the image display at the top
    mediumPrefix: 'medium_',
    // the prerfix for the large image
    largePrefix: '_albumLarge',
    sidePrefix: 'sidebar_'
}; 

$.fn.gallery.getSelectedIndex = function()
{
    return parseInt(selectedIndex);
};

$.fn.gallery.totalNumberOfMediaItems = function()
{
    return $.fn.gallery.defaults.jsonFile.length;
};

$.fn.gallery.displayNextSideItem = function ()
{

	if ( selectedIndex<$.fn.gallery.totalNumberOfMediaItems()-1)
	{
		renderSideGallery ( selectedIndex+1 );
	}
		
}

$.fn.gallery.displayPreviousSideItem = function ()
{
	if ( selectedIndex > 0 )
	{
		renderSideGallery ( selectedIndex-1 );
	}
	
}


$.fn.gallery.displayNextMediaItem = function()
{        
    if(selectedIndex<$.fn.gallery.totalNumberOfMediaItems()-1)
    {
        displayMediaDetails(parseInt(selectedIndex)+1);
    }
    
    // check to see if we've skipped a page
    var currentPage =  Math.floor(selectedIndex / $.fn.gallery.defaults.pageSize);  
    if(currentPage!= Math.floor((selectedIndex-1) / $.fn.gallery.defaults.pageSize))
    {
        renderGallery(currentPage);
    }
    
    return selectedIndex;
};

$.fn.gallery.displayPreviousMediaItem = function(sideBar)
{    
    if(selectedIndex>0)
    {
        displayMediaDetails(parseInt(selectedIndex)-1);
    }
    
    // check to see if we've skipped a page
    var currentPage =  Math.floor(selectedIndex / $.fn.gallery.defaults.pageSize);  
    if(currentPage!= Math.floor((selectedIndex+1) / $.fn.gallery.defaults.pageSize))
    {
        renderGallery(currentPage);
       
    }
    
    return selectedIndex;
};

})(jQuery);