oly.slideShow = {
    
    addEvents: function(options) {
        
        jQuery(options.sSelector+" li a").bind('click', options, oly.slideShow.onNavigationClick);
        
        jQuery(options.sSelector).bind('update', options, oly.slideShow.update);
    },
    
    update: function(e) {
        var options = e.data;
        var image_source = jQuery(this).find('.active').attr("href");
        
        options.image = new Image();
        
        options.stage.fadeOut(200, function() {
            
            options.preloader.fadeIn(100, function() {
                jQuery(options.image).one('load', options, oly.slideShow.onImageLoad);        
                options.image.src = image_source;
            });
    
        });
        
    },
    
    onImageLoad: function(event) {
        var options = event.data;
        options.preloader.fadeOut(100, function() {
            options.stage
                .empty()
                .append(options.image)
                .fadeIn(200);
            
            // append detail text
            options.stage.append('<div class="details">'+ jQuery(options.sSelector+" li a.active").parent().find("p").html() +'</div>')
        });
        
        
    },
    
    onNavigationClick: function(e) {
        e.preventDefault();
        var options = e.data;
        
        jQuery(options.sSelector+" li a.active").removeClass('active');
        jQuery(this).addClass('active');
        
        jQuery(options.sSelector).trigger("update");
        
    },
    
    onNext: function(e) {
        e.preventDefault();
        var options = e.data;
        
        if (!jQuery(options.sSelector+" li a.active").parent().next().hasClass("next_btn")) {
        
            jQuery(options.sSelector+" li a.active")
                .removeClass("active")
                .parent()
                    .next()
                        .find("a")
                            .addClass("active");
            
        } else {
            jQuery(options.sSelector+" li a.active").removeClass("active");
            jQuery(options.sSelector+" li.prev_btn")
                .next()
                    .find("a")
                        .addClass("active");
        }
        
        
                
        jQuery(options.sSelector).trigger("update");
    },
    
    onPrev: function(e) {
        e.preventDefault();
        var options = e.data;
        
        if (!jQuery(options.sSelector+" li a.active").parent().prev().hasClass("prev_btn")) {
        
            jQuery(options.sSelector+" li a.active")
                .removeClass("active")
                .parent()
                    .prev()
                        .find("a")
                            .addClass("active");
            
        } else {
            jQuery(options.sSelector+" li a.active").removeClass("active");
            jQuery(options.sSelector+" li.next_btn")
                .prev()
                    .find("a")
                        .addClass("active");
        }
        
        
                
        jQuery(options.sSelector).trigger("update");
        
    },
    
    setup: function(options) {
        
        // add dom elements
        var $wrapper = jQuery(options.sSelector).wrap('<div id="wrapper"></div>').parent();
        var $stage = $wrapper.prepend('<div id="stage"></div>').find('#stage');
        var $preloader = $wrapper.prepend('<div id="preloader"></div>').find('#preloader').hide();
        
        options.stage = $stage;
        options.image = new Image();
        options.preloader = $preloader;
        
        // replace image thumb text
        jQuery(options.sSelector+" li a").each(function(index) {
            jQuery(this).html(index + 1);
        });
        
        // hide detail text
        jQuery(options.sSelector + " p").hide();
        
        oly.slideShow.addEvents(options);
        // show random image
        var i = Math.round(Math.random() * (jQuery(options.sSelector+ " li").length -1));
        jQuery(jQuery(options.sSelector+" li")[i]).find("a").addClass('active');    
        
        jQuery(options.sSelector).trigger("update");    
        
        // add next prev buttons
        jQuery(options.sSelector)
            .append('<li class="next_btn"><a href=""></a></li>')
            .find(".next_btn")
                .bind('click', options, oly.slideShow.onNext);
        jQuery(options.sSelector)
            .prepend('<li class="prev_btn"><a href=""></a></li>')
            .find(".prev_btn")
                .bind("click", options, oly.slideShow.onPrev);
    },
    initialize: function() {
        
        var options = {
            sSelector: "#gallery"
        };
        
        oly.slideShow.setup(options);        
    }
};
jQuery(oly.slideShow.initialize);