var load=null;
$(document).ready(function() {
    load = jQuery('<a id="galleryLoad" href="#photGallery" title="Load Gallery">Load Gallery</a>');
    load.click(function() {
        retrieveData();
    });
    
    var list = $('#photoGallery .items')
            .chain({
                builder: function(){
			        var data = this.item();
			        this.attr('href', '/store/images/photoId/' + data.PhotoId + '.png').attr('title', data.Caption + ((data.Credit != null && data.Credit != undefined && data.Credit != '' && data.Credit != 'null') ? ' | by ' + data.Credit  : ''));
			    },
			    '.Thumbnail' : {
	                src : function(data)
	                {
	                    return '/store/images/photoIconId/' + data.PhotoId + '.png';
	                },
	                alt : function(data)
	                {
	                    return data.Caption;
	                },
	                title : function(data)
	                {
	                    return ((data.Caption != null && data.Caption != undefined && data.Caption != '' && data.Caption != 'null') ? data.Caption + ' | ' : '') + 
	                    ((data.Credit != null && data.Credit != undefined && data.Credit != '' && data.Credit != 'null') ? 'by ' + data.Credit + ' | ' : '') + 
	                    ((data.PhotoDate != null && data.PhotoDate != undefined && data.PhotoDate != '' && data.PhotoDate != 'null') ? data.PhotoDate + ' | ' : '') + 
	                    ((data.ReserveAreaName != null && data.ReserveAreaName != undefined && data.ReserveAreaName != '' && data.ReserveAreaName != 'null') ? data.ReserveAreaName + ' | ' : '');
	                }
	            }
            }); 
         
    var apiScrollable = null;

    function getScrollable()
    {                
        if(apiScrollable == null)
        {
            var tooltip = jQuery('<div id="tooltip"></div>');
            
            jQuery('body').append(tooltip);
            jQuery("#photoGallery").scrollable({size : 4, hoverClass : 'hover', nextPage : '#photoGalleryNextPage', prevPage : '#photoGalleryPrevPage', api: true});
            jQuery("#photoGallery").mousewheel().find("a").tooltip({tip: '#tooltip', onShow : function () { jQuery('#tooltip').html('<p>' + jQuery('#tooltip').html() + '</p>'); } });

            apiScrollable = $("#photoGallery").scrollable();
        }
        
        return apiScrollable;
    };
            
    function retrieveData() 
    {
        wait();
        $.ajaxPost({
            url:'/ws/PhotoGalleryService.asmx/GetPhotos',
            data: { "galleryId" : settings.id, "tagFilter" :  settings.tags },
            success : function(response, statusText) {                            
                build(response);
            }
        });
    };
            
    function build(data)
    {
        var api = getScrollable();
        api.getItems().remove();
        api.reload();
        
        var msg = null;
        if(data == null || data.length == 0)
        {
            msg = 'There are no photos for this gallery.';
        }
        else 
        {
            list.items('replace', data);
                                    
            $(".items a").click(function() {
                wait();
                var url = $(this).attr("href");
                var info = $(this).find('img').attr('title');
                var alt = $(this).find('img').attr('alt');
                var wrap = $("#image_wrap").fadeTo("medium", 0.5); 
                var img = new Image();
                img.onload = function() { wrap.fadeTo("fast", 1); wrap.find("img").attr("src", url).attr("alt", alt).attr("title", info); $('.info', "#image_wrap").html(String(info).replaceAll('|', '<br />')); done(null); }; 
                img.src = url;
                
                return false;  
            }).filter(":first").click();
        }
        
        api.reload().end().begin();
        if(api.getPageAmount() == 1)
        {
            var s = api.getConf().nextPage + ', ' + api.getConf().prevPage;
            jQuery(s).addClass(api.getConf().disabledClass)
        }
        done(msg);
    };
    
    function wait()
    {
        var w = '<img src="/assets/images/ajax-progress.gif" alt="Waiting..." />';
        jQuery('#results').html(w).show();
    };

    function done(s)
    {
        jQuery('#results').html(s).show().focus();
        setTimeout(function () { jQuery('#results').fadeOut('slow'); }, 4000);        
    };

    retrieveData();
});