/*

        SB UI - Slider
       
*/
(function( $ ){
        $.fn.sb_ui_slider = function(options) {
       
                // Maintainin chainability
                return this.each(function() {
                       
                        // Set standard values
                        var s = {
                                target : '',
                                max_thumbs_cols : 3,
                                max_thumbs_rows : 1,
                                slide_steps : 1,
                                arrow_left : '',
                                arrow_right : '',
                                arrow_up : '',
                                arrow_down : '',
                                scroll_only_on_overflow : false,
                                scroll_back_on_end : false,
                                automatic_scroll_ms : '',
                                active_thumbnail : 1,
                                slider_container_animation : '',
                                slider_speed : 200,
                                view_position : 1,
                                active_in_view : 1,
                                max_viewable : 1,
                                scroll_left : 0,
                                scroll_top : 0,
                                container : ''
                        };
                       
                        // Merge submitted options with our settings
                        if ( options ) {
                                $.extend( s, options );
                        }
                       
                        // Copy settings to actual variables
                        var target_str = s.target;
                        var max_thumbs_cols = s.max_thumbs_cols;
                        var max_thumbs_rows = s.max_thumbs_rows;
                        var slide_steps = s.slide_steps;
                        var arrow_left_str = s.arrow_left_str;
                        var arrow_right_str = s.arrow_right_str;
                        var arrow_up_str = s.arrow_up_str;
                        var arrow_down_str = s.arrow_down_str;
                        var automatic_scroll_ms = s.automatic_scroll_ms;
                       
                        var active_thumbnail = s.active_thumbnail;
                        var slider_container_animation = s.slider_container_animation;
                        var slider_speed = s.slider_speed;
                        var view_position = s.view_position;
                        var active_in_view = s.active_in_view;
                        var max_viewable = s.max_viewable;
               
                        // Make objects and set standard values
                        var slider = $(this);
                        var target = $(s.target);
                        var arrow_left = $(s.arrow_left);
                        var arrow_right = $(s.arrow_right);
                        var arrow_up = $(s.arrow_up);
                        var arrow_down = $(s.arrow_down);
                        var thumbnails = slider.children("li");
                        var container = $(s.container);
                       
                        // Slider must be shown so we can get size
                        slider.show();
                        if ( container.size()>  0 )
                        {
                                 // This means we can hide the container in css and show it here, after load.
                                 // All content is therefore hidden until we are somewhat ready to show it.
                                container.show();
                        }
                       
                        // For now, this module only supports scrolling either horizontal or vertically
                        if ( max_thumbs_cols>  1 )
                        {
                                delete arrow_up; delete arrow_down;
                                max_viewable = max_thumbs_cols;
                        }
                        else if ( max_thumbs_rows>  1 )
                        {
                                delete arrow_left; delete arrow_right;
                                max_viewable = max_thumbs_rows;
                        }
                       
                        // Hide content if available
                        var slider_contents = slider.find("span.sb_ui_slider_content");
                        slider_contents.hide();
                       
                        // Add standard class to slider
                        slider.addClass("sb_ui_slider");
                       
                        // Add standard class to thumbnail
                        thumbnails.addClass("sb_ui_slider_thumbnail");
                        
                        var largest_thumbnail_height = 0;
                        var largest_thumbnail_width = 0;
                       
                        // Setting largest width and height for thumbnails
                        thumbnails.each(function()
                        {
                        	if($(this).find("img").height() > largest_thumbnail_height)
                        	{
                        		largest_thumbnail_height = $(this).find("img").height();
                        	}
                        	
                        	if($(this).find("img").width() > largest_thumbnail_width)
                        	{
                        		largest_thumbnail_width = $(this).find("img").width();
                        	}
                        });
                        
                        thumbnails.css({width : largest_thumbnail_width, height : largest_thumbnail_height});
                        
                        
                       
                        // Get total amount of slidable items, item width, total width and such
                        var total_thumbnails = thumbnails.size();
                        var thumbnail_height = thumbnails.outerHeight(true);
                        var thumbnail_width = thumbnails.outerWidth(true);
                       
                        // Toggle arrows on init
                        toggle_arrows();
                       
                        // Set total possible width and height of slider
                        var slider_max_width = total_thumbnails * thumbnail_width;
                        var slider_max_height = total_thumbnails * thumbnail_height;
                        slider.width(slider_max_width);
                        slider.height(slider_max_height);
                       
                        // Add container which hides all items outside the boundaries
                        var slider_container = $("<div class=\"sb_ui_slider_container\"></div>");
                        slider.before(slider_container);
                       
                        // Put slider in this container
                        slider_container.append(slider);
                       
                        // Now set width and height of container based on maximum thumbs to show at once
                        var slider_container_max_width = max_thumbs_cols * thumbnail_width;
                        var slider_container_max_height = max_thumbs_rows * thumbnail_height;
                        slider_container.width(slider_container_max_width);
                        slider_container.height(slider_container_max_height);
                       
                        // Set first to active if content is available
                        var sb_ui_first_slider_content = thumbnails.children('span.sb_ui_slider_content:first');
                        switch_content(sb_ui_first_slider_content);
                       
                        //
                        // And now to the functions and binds:
                        //
                       
                        // Automaticly scroll the slider if set
                        var automatic_scroll = function(active_thumbnail_old){
                       
                                // Reset active thumbnail if we have reached the maximum value
                                if ( active_thumbnail_old>= total_thumbnails&&  s.scroll_back_on_end == true )
                                {
                                        change_active_thumbnail(1);
                                        change_active_thumbnail_ele()
                                        view_position = 1;
                                        active_in_view = 1;
                                        animate_scroll({ scrollLeft : 0 });
                                        animate_scroll({ scrollTop : 0 });
                                        active_thumbnail_old = -1;
                                }
                       
                                setTimeout(function() {
                                        scroll_thumbnails('right');
                                        automatic_scroll(active_thumbnail_old+1);
                                }, automatic_scroll_ms);
                        }
                        if ( automatic_scroll_ms>  0 )
                        {
                                automatic_scroll(0);
                        }
                       
                        // Change content based on clicked thumbnail
                        thumbnails.bind("click", function() {
                                       
                                // Save old active
                                var active_thumbnail_old = active_thumbnail;
                                       
                                // Change content if possible
                                var sb_ui_slider_content = $(this).children('span.sb_ui_slider_content');
                                if ( target_str&&  sb_ui_slider_content.size()>  0 )
                                {
                                        switch_content(sb_ui_slider_content);
                                }
                               
                                // Change active in view
                                active_in_view = active_in_view - (active_thumbnail_old-active_thumbnail);
                               
                        });
                       
                        // Bind direction controllers
                        arrow_left.bind("click", function() { scroll_thumbnails("left") } );
                        arrow_right.bind("click", function() { scroll_thumbnails("right") } );
                        arrow_up.bind("click", function() { scroll_thumbnails("up") } );
                        arrow_down.bind("click", function() { scroll_thumbnails("down") } );
                       
                        // Slide content if possible
                        function scroll_thumbnails(direction)
                        {
                       
                                // If we have reached the end, scroll back if that option is set
                                if ( s.scroll_back_on_end&&  ( active_thumbnail + max_viewable )>  total_thumbnails&&  ( direction == 'right' || direction == 'down' ) )
                                {
                               
                                        change_active_thumbnail(1);
                                        change_active_thumbnail_ele()
                                        view_position = 1;
                                        active_in_view = 1;
                                        s.scroll_left = 0;
                                        s.scroll_left = 0;
                                       
                                        // Do the animation
                                        animate_scroll({ scrollLeft : ( s.scroll_left ) });
                                        animate_scroll({ scrollTop : ( s.scroll_left ) });
                                }
                                else
                                {
                                        // Change position of the view
                                       
                                        if ( s.scroll_only_on_overflow == true )
                                        {
                                                if ( direction == 'right' || direction == 'down' )
                                                {
                                                        active_in_view++;
                                                }
                                                if ( direction == 'left' || direction == 'up' )
                                                {
                                                        active_in_view--;
                                                }
                                               
                                                // Check posision of the view
                                                view_position_changed = false;
                                                if ( active_in_view>  max_viewable )
                                                {
                                                        active_in_view = max_viewable;
                                                        view_position_changed = true;
                                                }
                                                else if ( active_in_view<  1 )
                                                {
                                                        active_in_view = 1;
                                                        view_position_changed = true;
                                                }
                                        }
                                        else
                                        {
                                                active_in_view = 1;
                                                view_position_changed = true;
                                        }
                                       
                                        // Set correct scroll value
                                        if ( s.scroll_only_on_overflow == true&&  view_position_changed == true )
                                        {
                                                if ( direction == 'left' || direction == 'right' )
                                                {
                                                        s.scroll_left = thumbnail_width * ( active_thumbnail - max_viewable );
                                                }
                                                if ( direction == 'up' || direction == 'down' )
                                                {
                                                        s.scroll_top = thumbnail_height * ( active_thumbnail - max_viewable );
                                                }
                                        }
                                       
                                        if ( direction == "left" ) { s.scroll_left += -thumbnail_width*slide_steps; change_active_thumbnail(active_thumbnail-slide_steps); }
                                        else if ( direction == "right" ) { s.scroll_left += thumbnail_width*slide_steps; change_active_thumbnail(active_thumbnail+slide_steps); }
                                        else if ( direction == "up" ) { s.scroll_top += -thumbnail_height*slide_steps; change_active_thumbnail(active_thumbnail-slide_steps); }
                                        else if ( direction == "down" ) { s.scroll_top += thumbnail_height*slide_steps; change_active_thumbnail(active_thumbnail+slide_steps); }
                                       
                                        // Change active element
                                        change_active_thumbnail_ele();
                                       
                                        // Start animation if needed
                                        if ( view_position_changed == true || s.scroll_only_on_overflow == false )
                                        {
                                                animate_scroll({ scrollLeft : ( s.scroll_left ) });
                                                animate_scroll({ scrollTop : ( s.scroll_top ) });
                                        }
                                       
                                        toggle_arrows();
                                       
                                }
                        }
                       
                        function toggle_arrows()
                        {
                                arrow_up.hide();
                                arrow_left.hide();
                                arrow_right.hide();
                                arrow_down.hide();
                               
                                // If we need arrows at all...
                                if ( total_thumbnails>  max_viewable)
                                {
                                        if ( active_thumbnail>  1 )
                                        {
                                                arrow_left.show();
                                                arrow_up.show();
                                        }
                                        if ( active_thumbnail<  total_thumbnails )
                                        {
                                                arrow_right.show();
                                                arrow_down.show();
                                        }
                                }
                        }
                       
                        // Animate slider
                        function animate_scroll(options)
                        {
                                slider_container.animate(options, {duration : slider_speed, queue : false});
                        }
                       
                        // Function to switch content
                        function switch_content(content_ele)
                        {
                                if ( target_str&&  content_ele.size()>  0 )
                                {
                                        // Switch active
                                        thumbnails.removeClass("active");
                                        content_ele.parent().addClass("active");

                                        // Switch content str
                                        target.empty();
                                        target.append( content_ele.html() );
                                       
                                        change_active_thumbnail(content_ele.parent().index()+1);
                                }
                        }
                       
                        // Update active thumbnail variable
                        function change_active_thumbnail(active)
                        {
                                if ( active_thumbnail<  1 )
                                {
                                        active = 1;
                                }
                                else if ( active_thumbnail>  total_thumbnails )
                                {
                                        active = total_thumbnails;
                                }
                                active_thumbnail = active;
                        }
                       
                        // Set content based on active element (only on scroll)
                        function change_active_thumbnail_ele()
                        {
                                switch_content( slider.children("li:nth-child(" + active_thumbnail + ")").children('span.sb_ui_slider_content') );
                        }
               
                });
               
        };
       
})(jQuery);