var diamondsgal = jQuery.noConflict();





diamondsgal(document).ready(function() {	

		
		diamondsgal('#container').cycle({ 
			fx:    'fade', 
			speed:  2500 
		});
		

        //options( 1 - ON , 0 - OFF)

        var auto_slide = 1;

        var hover_pause = 1;

        var key_slide = 1;

        

        //speed of auto slide(

        var auto_slide_seconds = 5000;

        /* IMPORTANT: i know the variable is called ...seconds but it's 

        in milliseconds ( multiplied with 1000) '*/

        

        /*move he last list item before the first item. The purpose of this is 

        if the user clicks to slide left he will be able to see the last item.*/

        diamondsgal('#carousel_ul li:first').before(diamondsgal('#carousel_ul li:last')); 

        

        //check if auto sliding is enabled

        if(auto_slide == 1){

            /*set the interval (loop) to call function slide with option 'right' 

            and set the interval time to the variable we declared previously */

            var timer = setInterval('slide("right")', auto_slide_seconds); 

            

            /*and change the value of our hidden field that hold info about

            the interval, setting it to the number of milliseconds we declared previously*/

            diamondsgal('#hidden_auto_slide_seconds').val(auto_slide_seconds);

        }

  

        //check if hover pause is enabled

        if(hover_pause == 1){

            //when hovered over the list 

            diamondsgal('#carousel_ul').hover(function(){

                //stop the interval

                clearInterval(timer)

            },function(){

                //and when mouseout start it again

                timer = setInterval('slide("right")', auto_slide_seconds); 

            });

  

        }

  

        //check if key sliding is enabled

        if(key_slide == 1){

            

            //binding keypress function

            diamondsgal(document).bind('keypress', function(e) {

                //keyCode for left arrow is 37 and for right it's 39 '

                if(e.keyCode==37){

                        //initialize the slide to left function

                        slide('left');

                }else if(e.keyCode==39){

                        //initialize the slide to right function

                        slide('right');

                }

            });



        }

  });



//FUNCTIONS BELLOW



//slide function  

function slide(where){

    		

            //get the item width

            var item_width = diamondsgal('#carousel_ul li').outerWidth() + 12;

            

            /* using a if statement and the where variable check 

            we will check where the user wants to slide (left or right)*/

            if(where == 'left'){

				

                //...calculating the new left indent of the unordered list (ul) for left sliding

                var left_indent = parseInt(diamondsgal('#carousel_ul').css('left')) + item_width;

				

            }else{

				

                //...calculating the new left indent of the unordered list (ul) for right sliding

                var left_indent = parseInt(diamondsgal('#carousel_ul').css('left')) - item_width;

				

            

            }

            

            

            //make the sliding effect using jQuery's animate function... '

            diamondsgal('#carousel_ul:not(:animated)').animate({'left' : left_indent},500,function(){    

                

                /* when the animation finishes use the if statement again, and make an ilussion

                of infinity by changing place of last or first item*/

                if(where == 'left'){

                    //...and if it slided to left we put the last item before the first item

                    diamondsgal('#carousel_ul li:first').before(diamondsgal('#carousel_ul li:last'));

                }else{

                    //...and if it slided to right we put the first item after the last item

                    diamondsgal('#carousel_ul li:last').after(diamondsgal('#carousel_ul li:first')); 

                }

                

                //...and then just get back the default left indent

                diamondsgal('#carousel_ul').css({'left' : '-240px'});

            });      

           

}