(function($){
    SlideDeckSkin['simple-slider'] = function(deck){
        var simpleSliderDeck = $(deck);
        var simpleSliderDeckFrame = simpleSliderDeck.closest('.skin-simple-slider');
        simpleSliderDeckFrame.css({
            width: simpleSliderDeck.outerWidth() 
        });
        var simpleSliderDeckFrameHeight = simpleSliderDeckFrame.outerHeight();
        var footer;
        var footerHeight = 0;
        var footerTitle;
        var simpleSliderNext;
        var simpleSliderPrev;
        var navigation = '<div class="slidedeckFooter"><div class="navigation"><a class="prevSlide" href="#prev">&larr;</a><a class="nextSlide" href="#next">&rarr;</a></div><div class="slideTitle"></div></div>';
        
        var simpleSliderDeck = simpleSliderDeckFrame.find('.slidedeck').slidedeck();
        
        function updateFooterTitle(){
            var currentTitle = $(simpleSliderDeck.spines[simpleSliderDeck.current-1]).html();
            footerTitle.html('<div>' + currentTitle + '</div>');
        }
        
        function updateDisabledNavigation(){
            if(simpleSliderDeck.options.cycle == false){
                simpleSliderNext.removeClass('disabled');
                simpleSliderPrev.removeClass('disabled');
                if( simpleSliderDeck.current == 1 ){
                    simpleSliderPrev.addClass('disabled');
                }
                if( simpleSliderDeck.current == simpleSliderDeck.slides.length ){
                    simpleSliderNext.addClass('disabled');
                }                           
            }               
        }
        
        function imgLoaded(el, ind){
            if($.data(el, 'simple-slider-sized') == true){
                return false;
            }
            
            var $slideImage = slidedeckImages.eq(ind);
            var thisSlide = simpleSliderDeck.slides.eq(ind);
            var slideWidth = thisSlide.innerWidth();
            var slideHeight = thisSlide.innerHeight();
            
            // strip any false image sizes
            $slideImage.removeAttr("width").removeAttr("height").css({ width: "", height: "" }); // Remove css dimensions as well
            var pic_real_width = $slideImage.width();
            var pic_real_height = $slideImage.height();
            var image_ratio = (pic_real_width / pic_real_height);
            var deck_ratio = (slideWidth / slideHeight);
            if(image_ratio < deck_ratio){
                // image too tall
                var newHeight = Math.round(slideWidth / (image_ratio));
                var newWidth = slideWidth;
            }else if(image_ratio >= deck_ratio){
                // image too wide
                var newWidth = Math.round(slideHeight * (image_ratio));
                var newHeight = slideHeight;
            }
            $slideImage.css({
                position: 'absolute',
                top: '50%',
                left: '50%',
                width: newWidth + 'px',
                maxWidth: newWidth + 'px',
                height: newHeight + 'px',
                maxHeight: newHeight + 'px',
                marginLeft: '-' + Math.round(newWidth / 2) + 'px',
                marginTop: '-' + Math.round(newHeight / 2) + 'px'
            });
            
            if(pic_real_width > 0 && pic_real_height > 0){
                $.data(el, 'simple-slider-sized', true);
            }
        }
        
        /**
         * Scale images
         * 
         * Loop through all of the first images in each slide of the SlideDeck and scale them to
         * fit proportionally in the dimensions of each slide of the SlideDeck.
         */
        var slidedeckImages = simpleSliderDeck.slides.find('img:eq(0)');
        slidedeckImages.each(function(ind){
            $(this).load(function(){
                imgLoaded(this, ind);
            });
        });

        simpleSliderDeck.loaded(function(){
            if( simpleSliderDeckFrame.find('.slidedeckFooter').length ){
                simpleSliderDeckFrame.find('.slidedeckFooter').remove();
            }
            simpleSliderDeckFrame.append(navigation);
            
            footer = simpleSliderDeckFrame.find( '.slidedeckFooter' );
            footerHeight = footer.outerHeight();                    
            
            footerTitle = simpleSliderDeckFrame.find( '.slideTitle' );
            simpleSliderNext = simpleSliderDeckFrame.find('a.nextSlide');
            simpleSliderPrev = simpleSliderDeckFrame.find('a.prevSlide');
            
            simpleSliderNext.click(function(event){
                event.preventDefault();                 
                simpleSliderDeck.pauseAutoPlay = true;
                simpleSliderDeck.next();                
            });
            simpleSliderPrev.click(function(event){
                event.preventDefault();                 
                simpleSliderDeck.pauseAutoPlay = true;
                simpleSliderDeck.prev();                
            });         
            
            updateFooterTitle();
            updateDisabledNavigation();
        }); 
        
        var oldComplete;
        if(typeof(simpleSliderDeck.options.complete) == 'function'){
            oldComplete = simpleSliderDeck.options.complete;
        }
        simpleSliderDeck.options.complete = function(){
            updateFooterTitle();
            updateDisabledNavigation();
            
            if(typeof(oldComplete) == 'function'){
                oldComplete();
            }
        }
        
        /**
         * Try to accommodate for the race condition created between the image loading,
         * the DOM being ready, the browser determining when images actual have dimensions
         * associated with them and the page being ready for view. The imgLoaded() function
         * is run on the loaded event of each image as well as DOMReady and Window Loaded.
         * The imgLoaded() function will return boolean(false) if it has already processed
         * and been able to scale the image properly.
         */
        $(document).ready(function(){
            slidedeckImages.each(function(ind){
                imgLoaded(this, ind);
            });
        });
        $(window).load(function(){
            slidedeckImages.each(function(ind){
                imgLoaded(this, ind);
            });
        });
    };
    
    
    $(document).ready(function(){
        $('.skin-simple-slider .slidedeck').each(function(){
            if(typeof($.data(this, 'skin-simple-slider')) == 'undefined' || $.data(this, 'skin-simple-slider') == null){
                $.data(this, 'skin-simple-slider', new SlideDeckSkin['simple-slider'](this));
            }
        });
    });
})(jQuery);