// JavaScript Document
$(window).load(function(){
 
	    // We are listening to the window.load event, so we can be sure
	    // that the images in the slideshow are loaded properly.
	 
	    // Testing wether the current browser supports the canvas element:
	    var supportCanvas = 'getContext' in document.createElement('canvas');
	 
	    // The canvas manipulations of the images are CPU intensive,
	    // this is why we are using setTimeout to make them asynchronous
	    // and improve the responsiveness of the page.
	 
	    var slides = $('#slideshow li'),
	        current = 0,
	        slideshow = {width:0,height:0};
	 
    setTimeout(function(){
	 
	        if(supportCanvas){
	            $('#slideshow img').each(function(){
	 
	                if(!slideshow.width){
	                    // Saving the dimensions of the first image:
	                    slideshow.width = this.width;
                    slideshow.height = this.height;	                }
	 
                // Rendering the modified versions of the images:
	                createCanvasOverlay(this);
	            });
	        }
	 
	        $('#slideshow .arrow').click(function(){
	            var li            = slides.eq(current),
	                canvas        = li.find('canvas'),
	                nextIndex    = 0;
	 
	            // Depending on whether this is the next or previous
	            // arrow, calculate the index of the next slide accordingly.
	 
	            if($(this).hasClass('next')){
                nextIndex = current >= slides.length-1 ? 0 : current+1;
	            }
	            else {
	                nextIndex = current <= 0 ? slides.length-1 : current-1;
	            }
 
	            var next = slides.eq(nextIndex);
	 
	            if(supportCanvas){1	 
	                // This browser supports canvas, fade it into view:
 
	                canvas.fadeIn(function(){
 
                    // Show the next slide below the current one:
	                    next.show();
	                    current = nextIndex;
	 
	                    // Fade the current slide out of view:
	                    li.fadeOut(function(){
	                        li.removeClass('slideActive');
                        canvas.hide();
                        next.addClass('slideActive');
	                    });
	                });
	            }
	            else {
	 
	                // This browser does not support canvas.
	                // Use the plain version of the slideshow.
	 
	                current=nextIndex;
                next.addClass('slideActive').show();
                li.removeClass('slideActive').hide();
	            }
   });
	
	},100);
	
	// This function takes an image and renders
    // a version of it similar to the Overlay blending
    // mode in Photoshop.

    function createCanvasOverlay(image){

        var canvas            = document.createElement('canvas'),
            canvasContext    = canvas.getContext("2d");

        // Make it the same size as the image
        canvas.width = slideshow.width;
        canvas.height = slideshow.height;

        // Drawing the default version of the image on the canvas:
        canvasContext.drawImage(image,0,0);

        // Taking the image data and storing it in the imageData array:
        var imageData    = canvasContext.getImageData(0,0,canvas.width,canvas.height),
            data        = imageData.data;

        // Loop through all the pixels in the imageData array, and modify
        // the red, green, and blue color values.

        for(var i = 0,z=data.length;i<z;i++){

            // The values for red, green and blue are consecutive elements
            // in the imageData array. We modify the three of them at once:

            data[i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) :
                        (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
            data[++i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) :
                        (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
            data[++i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) :
                        (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));

            // After the RGB channels comes the alpha value, which we leave the same.
            ++i;
        }

        // Putting the modified imageData back on the canvas.
        canvasContext.putImageData(imageData,0,0,0,0,imageData.width,imageData.height);

        // Inserting the canvas in the DOM, before the image:
        image.parentNode.insertBefore(canvas,image);
    }

});

$('#nextArrow').bind('click',function(){
    alert("Clicked!");
});

$('#nextArrow').trigger('click');

// or alternatively:
// $('#nextArrow').click();


$(window).load(function(){

	// The window.load event guarantees that
	// all the images are loaded before the
	// auto-advance begins.

	var timeOut = null;

	$('#slideshow .arrow').click(function(e,simulated){

		// The simulated parameter is set by the
		// trigger method.

		if(!simulated){

			// A real click occured. Cancel the
			// auto advance animation.

			clearTimeout(timeOut);
		}
	});

	// A self executing named function expression:

	(function autoAdvance(){

		// Simulating a click on the next arrow.
		$('#slideshow .next').trigger('click',[true]);

		// Schedulling a time out in 5 seconds.
		timeOut = setTimeout(autoAdvance,5000);
	})();

});

  $(document).ready(function() {

        //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 the 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.*/
        $('#carousel_ul li:first').before($('#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*/
            $('#hidden_auto_slide_seconds').val(auto_slide_seconds);
        }

        //check if hover pause is enabled
        if(hover_pause == 1){
            //when hovered over the list
            $('#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
            $(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 = $('#carousel_ul li').outerWidth() + 10;

            /* 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($('#carousel_ul').css('left')) + item_width;
            }else{
                //...calculating the new left indent of the unordered list (ul) for right sliding
                var left_indent = parseInt($('#carousel_ul').css('left')) - item_width;

            }

            //make the sliding effect using jQuery's animate function... '
            $('#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
                    $('#carousel_ul li:first').before($('#carousel_ul li:last'));
                }else{
                    //...and if it slided to right we put the first item after the last item
                    $('#carousel_ul li:last').after($('#carousel_ul li:first'));
                }

                //...and then just get back the default left indent
                $('#carousel_ul').css({'left' : '-210px'});
            });

}