/*
Author: Yaacov Attias
File Description: javascript for SlideShow plugin
Version 1.0
*/

(function($) {         
    $.fn.slideShow = function(options){
        //default controls (modify these for default options)
             var defaults = {  
                
                //user contributed
                    sshowCls : 'slideshow', //class for slideshow container
                    slideCls : 'slide', //class for slide container 
                    width : '622px', //width of the slideshow plugin
                    controlsVerPos: 'bottom', //vertical positioning of the controls - can be 'top' or 'bottom' 
                    effect: 'slide', //animation effect for transitioning between slides - can be 'slide' or 'fade'
                    timer: 0, //time in milliseconds to rotate slides if 0 then no automatic rotation (NOTE: forces circular slideshow if > 0)
                    stopTimerOnClick: true, //stops the automatic rotation once a user clicks on any of the buttons
                    circular: true, // circular list flag
                    showDirButtons: true, //flag to show direction buttons (left & right)                    
                
                //non-user contributed, internal workings - make sure to update these when you change class names in CSS styles or HTML layout of SlideShow
                    controlsId : 'slideshow-controls', //id for the controls container 
                    contentId : 'slideshow-content', //id of the content container which encompasses the slides
                    slidesWrapperId : 'slides-wrapper', //id of the slides wrapper
                    slideActiveCls : 'active', //active slide class
                    slideInactiveCls : 'inactive', //inactive slide class
                    btnCls : 'btn-circle', //button class
                    btnSelCls : 'btn-circle-selected', //active button class 
                    leftBtn : 'slideshow-left', //left button id
                    rightBtn : 'slideshow-right' //right button id                  
            };
            var options =  $.extend(defaults, options);
            var curPos = 0; //index of current slide position
            
        //initialize certain options
            $('#' + options.sshowCls + ',' + '.' + options.slideCls).css('width', options.width); //force new width
            if (options.controlsVerPos == 'top') //moves controls to top
            {
                //invert controls
                    $('#' + options.controlsId).css('bottom','auto');
                    $('#' + options.controlsId).css('top','0');
                //invert slide
                    $('#' + options.contentId).css('bottom','0');
            } 
            if (options.timer > 0) //cycles through the slides, assumes circular slideshow
            {
                options.circular = true;
                $(document).everyTime(options.timer, function() {
                     $('#' + options.sshowCls + ' ' + '#slideshow-right').click();
			    });
			}
			if (!options.showDirButtons)
			{
			   $('#' + options.leftBtn + ',' + '#' + options.rightBtn).css('display', 'none'); 
            }
        //binds actions to a click on left arrow button
            $('#' + options.sshowCls + ' ' + '#slideshow-left').bind('click', function(){
                $('.' + options.slideCls).each(function(key){ //<-iterate through each slide              
                    if ( $(this).hasClass(options.slideActiveCls)  ) //<-if slide is active and not first slide, make inactive and make the next slide on the list active
                    { 
                         //A. Responsible for transitioning to previous slide unless the current slide is the first
                            if (key > 0)
                            {
                                if (options.effect == 'fade')
                                {                                           
                                    $(this).fadeOut(function(){
                                        $(this).removeClass(options.slideActiveCls).addClass(options.slideInactiveCls);
                                        $('.' + options.slideCls + ':eq(' + (key - 1) + ')').fadeIn(function(){
                                            $(this).addClass(options.slideActiveCls).removeClass(options.slideInactiveCls);
                                            
                                        });
                                    });
                                }
                                else if (options.effect == 'slide')
                                {
                                    $('#' + options.slidesWrapperId).animate({left: (parseInt($('#' + options.slidesWrapperId).css('left')) + parseInt(options.width))},function(){
                                        $('.' + options.slideCls + ':eq(' + (key) + ')').removeClass(options.slideActiveCls).addClass(options.slideInactiveCls);
                                        $('.' + options.slideCls + ':eq(' + (key - 1) + ')').addClass(options.slideActiveCls).removeClass(options.slideInactiveCls);                            
                                    });                        
                                }
                                
                                //update numbered buttons
                                    $('#' + options.sshowCls + ' ' + '.' + options.btnCls + ':eq(' + key + ')').removeClass(options.btnSelCls);
                                    $('#' + options.sshowCls + ' ' + '.' + options.btnCls + ':eq(' + (key - 1) + ')').addClass(options.btnSelCls);                            
                            }
                            
                        //B. Responsible for transitioning the first slide to the last slide in a circular list fashion
                            else if (options.circular && (key == 0))
                            { 
                                if (options.effect == 'fade') //B.1 - fade effect
                                {                                         
                                    $('.' + options.slideInactiveCls).fadeOut(function(){ //because of the circular nature, fading out the inactive first is necessary
                                        $('.' + options.slideCls + ':eq(0)').fadeOut(function(){
                                            $(this).removeClass(options.slideActiveCls).addClass(options.slideInactiveCls);
                                            $('.' + options.slideCls + ':eq(' + ($('.' + options.slideCls).size()-1) + ')').fadeIn(function(){
                                                $(this).addClass(options.slideActiveCls).removeClass(options.slideInactiveCls);
                                                
                                            });
                                        });                                    
                                    });
                                }
                                else if (options.effect == 'slide') //B.2 - slide effect
                                {
                                    $('#' + options.slidesWrapperId).animate({left: (parseInt($('#' + options.slidesWrapperId).css('left')) - parseInt(options.width)*($('.' + options.slideCls).size()-1))},function(){
                                        $('.' + options.slideCls + ':eq(' + (key) + ')').removeClass(options.slideActiveCls).addClass(options.slideInactiveCls);
                                        $('.' + options.slideCls + ':eq(' + ($('.' + options.slideCls).size()-1) + ')').addClass(options.slideActiveCls).removeClass(options.slideInactiveCls);                            
                                    });                        
                                }
                                
                                //update numbered buttons
                                    $('#' + options.sshowCls + ' ' + '.' + options.btnCls + ':eq(' + key + ')').removeClass(options.btnSelCls);
                                    $('#' + options.sshowCls + ' ' + '.' + options.btnCls + ':eq(' + ($('.' + options.slideCls).size()-1) + ')').addClass(options.btnSelCls); 
                            }      
                                  
                    }   
                });  
            }); //<-end bind
            
        //binds actions to a click on right arrow button
            $('#slideshow-right').bind('click',  function(){
                $('.' + options.slideCls).each(function(key){ //<-iterate through each slide               
                    if ( $(this).hasClass(options.slideActiveCls) ) //<-if slide is active and not last slide, make inactive and make the next slide on the list active
                    {  
                        //A. Responsible for transitioning to next slide up to the last slide - not responsible for circular list
                            if (key < ($('.' + options.slideCls).size()-1))
                            {
                                if (options.effect == 'fade') //A.1 - fade effect
                                {                 
                                    $(this).fadeOut(function(){
                                        $(this).removeClass(options.slideActiveCls).addClass(options.slideInactiveCls);
                                        $('.' + options.slideCls + ':eq(' + (key + 1) + ')').fadeIn(function(){
                                            $(this).addClass(options.slideActiveCls).removeClass(options.slideInactiveCls);                                  
                                        });
                                    });
                                }
                                else if (options.effect == 'slide') //A.2 - slide effect
                                {
                                    $('#' + options.slidesWrapperId).animate({left: (parseInt($('#' + options.slidesWrapperId).css('left')) - parseInt(options.width))},function(){
                                        $('.' + options.slideCls + ':eq(' + (key) + ')').removeClass(options.slideActiveCls).addClass(options.slideInactiveCls);
                                        $('.' + options.slideCls + ':eq(' + (key + 1) + ')').addClass(options.slideActiveCls).removeClass(options.slideInactiveCls);                            
                                    });

                                }    
                                
                                //update numbered buttons
                                    $('#' + options.sshowCls + ' ' + '.' + options.btnCls +':eq(' + key + ')').removeClass(options.btnSelCls);
                                    $('#' + options.sshowCls + ' ' + '.' + options.btnCls + ':eq(' + (key + 1) + ')').addClass(options.btnSelCls); 
                            }
                        //B. if the location is at the last slide and circular list flag is on, this block will execute
                            else if ( options.circular && key == ($('.' + options.slideCls).size()-1) ) //if circular list, go back to first item
                            {
                                if (options.effect == 'slide') //B.1 - fade effect
                                { 
                                    $('#' + options.slidesWrapperId).animate({left:0},function(){
                                        $('.' + options.slideCls + ':eq(' + (key) + ')').removeClass(options.slideActiveCls).addClass(options.slideInactiveCls);
                                        $('.' + options.slideCls + ':eq(0)').addClass(options.slideActiveCls).removeClass(options.slideInactiveCls);
                                    });
                                }
                                else if (options.effect == 'fade') //B.2 - slide effect
                                {
                                    $(this).fadeOut(function(){
                                        $(this).removeClass(options.slideActiveCls).addClass(options.slideInactiveCls);
                                        $('.' + options.slideCls + ':eq(0)').fadeIn(function(){
                                            $(this).addClass(options.slideActiveCls).removeClass(options.slideInactiveCls);                                  
                                        });
                                    });                                
                                }
                                
                                //update numbered buttons
                                    $('#' + options.sshowCls + ' ' + '.' + options.btnCls +':eq(' + key + ')').removeClass(options.btnSelCls);
                                    $('#' + options.sshowCls + ' ' + '.' + options.btnCls + ':eq(0)').addClass(options.btnSelCls); 
                            }                       
                           
                    } 
                });             
            }); //<-end bind
            
        //binds actions to a click on numbered button
            $('#' + options.sshowCls +  ' ' + '.' + options.btnCls).bind('click', function(){
                //first find out if timer needs to be stoped
                    if (options.timer && options.stopTimerOnClick)
                        $(document).stopTime();  
                                          
                var index = $('#' + options.sshowCls +  ' ' + 'ul#slideshow-buttons li a').index(this); //index of element clicked on
                $('#' + options.sshowCls +  ' ' + '.' + options.btnCls).each(function(key){
                    if ($(this).hasClass(options.btnSelCls)) //if this element is currently selected, remove selected status
                        $(this).removeClass(options.btnSelCls);
                    if (key == index) //if key equals the index of the element clicked on then make selected and switch over to corresponding slide
                    {           
                        $(this).addClass(options.btnSelCls); //make the button selected                          
                        $('.' + options.slideCls).each(function(){ //go through each slide, find active slide and make slide inactive. Then make the corresponding slide active
                            if ($(this).hasClass(options.slideActiveCls))
                            {
                                if (options.effect == 'fade')
                                {                                
                                    $(this).fadeOut(function(){
                                        $(this).removeClass(options.slideActiveCls).addClass(options.slideInactiveCls);
                                        $('.' + options.slideCls + ':eq(' + key + ')').fadeIn(function(){
                                            $(this).removeClass(options.slideInactiveCls).addClass(options.slideActiveCls);
                                        });    
                                    })
                                }
                                else if (options.effect == 'slide')
                                {
                                $(this).removeClass(options.slideActiveCls).addClass(options.slideInactiveCls);
                                    $('#' + options.slidesWrapperId).animate({left: 0 - parseInt(options.width)*key},function(){
                                        
                                        $('.' + options.slideCls + ':eq(' + key + ')').addClass(options.slideActiveCls).removeClass(options.slideInactiveCls);                            
                                    });                                
                                }
                            }
                        });  
                    }
                });                       
            }); //<-end bind
    }
})(jQuery);
