﻿
(function() {
    // Automatic Infinite Carousel - http://jqueryfordesigners.com/automatic-infinite-carousel/
    $.fn.infiniteCarousel = function(autoscroll, scrollVisible) {
        return this.each(function() {
            // magic!
            var $wrapper = $(this),
                $slider = $wrapper.find('> ul').width(9999),
                $items = $slider.find('> li'),
                $single = $items.filter(':first')

            singleWidth = $single.outerWidth(),
                visible = Math.ceil($wrapper.innerWidth() / singleWidth),
                currentPage = 1,
                pages = Math.ceil($items.length / visible);

            /* TASKS */

            // 2. create the carousel padding on left and right (cloned)
            $items.filter(':first').before($items.slice(-visible).clone().addClass('cloned'));
            $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
            $items = $slider.find('> li');

            // 3. reset scroll
            $wrapper.scrollLeft(singleWidth * visible);

            //4. Image loading
            function loadImage(page) {
                var $nextitem = $items.get(page);
                if ($nextitem != null) {
                    var $nextitem_ImageSrc = $nextitem.getAttribute('data-ImageSrc');
                    var $nextitemImg = $nextitem.getElementsByTagName('IMG')[0];
                    if ($nextitemImg != null) {
                        if ($nextitemImg.getAttribute('src') == null
                        | $nextitemImg.getAttribute('src') == '') {
                            $nextitemImg.setAttribute('src', $nextitem_ImageSrc);
                        } else {
                            var srcMatch = $nextitemImg.getAttribute('src').match('/image_slider/image_slider_pixel.gif');
                            if (srcMatch != null) {
                                if (srcMatch[0] != null && srcMatch[0].length > 0) {
                                    $nextitemImg.setAttribute('src', $nextitem_ImageSrc);
                                }
                            }
                        }
                    }
                }
            }

            loadImage(1);
            loadImage(2);

            // 5. paging function
            function gotoPage(page) {
                var dir = page < currentPage ? -1 : 1,
                    n = Math.abs(currentPage - page),
                    left = singleWidth * dir * visible * n;

                loadImage(page);
                loadImage(page + 1);

                $wrapper.filter(':not(:animated)').animate({
                    scrollLeft: '+=' + left
                }, 400, function() {
                    // if page == last page - then reset position
                    if (page > pages) {
                        $wrapper.scrollLeft(singleWidth * visible);
                        page = 1;
                    } else if (page == 0) {
                        page = pages;
                        $wrapper.scrollLeft(singleWidth * visible * pages);
                    }

                    currentPage = page;
                });
            }

            // 6. insert the back and forward link
            //$wrapper.after('<a href="#" id="carrouselBack" class="arrow back">&lt;</a><a href="#" id="carrouselForward" class="arrow forward">&gt;</a>');

            // 7. bind the back and forward links
            $('#carrouselBack').click(function() {
                gotoPage(currentPage - 1);
                return false;
            });

            $('#carrouselForward').click(function() {
                gotoPage(currentPage + 1);
                return false;
            });

            $(this).bind('goto', function(event, page) {
                gotoPage(page);
            });

            // THIS IS NEW CODE FOR THE AUTOMATIC INFINITE CAROUSEL
            $(this).bind('next', function() {
                gotoPage(currentPage + 1);
            });

            $('#carrouselNav').delegate("li", "hoverenter", function(ev, hover) {
				hover.distance(10)
				hover.delay(100)
                var index = $('#carrouselNav li').index(this);
				var p = (index + 1 > pages) ? (index + 1) - pages : index + 1;
				gotoPage(p)
			})

        });
    };

    // http://code.google.com/p/jquery-infinite-carousel/
    $.fn.carousel = function(back, forward, options) {
        var sliderList = $(this).children()[0];

        if (sliderList) {
            var increment = $(sliderList).children().outerWidth("true"),
				elmnts = $(sliderList).children(),
				numElmts = elmnts.length,
				sizeFirstElmnt = increment,
				shownInViewport = Math.round($(this).width() / sizeFirstElmnt),
				firstElementOnViewPort = 1,
				isAnimating = false;

            for (i = 0; i < shownInViewport; i++) {
                $(sliderList).css('width', (numElmts + shownInViewport) * increment + increment + "px");
                $(sliderList).append($(elmnts[i]).clone());
            }

            $(back).click(function(event) {
                if (!isAnimating) {
                    if (firstElementOnViewPort == 1) {
                        $(sliderList).css('left', "-" + numElmts * sizeFirstElmnt + "px");
                        firstElementOnViewPort = numElmts;
                    } else {
                        firstElementOnViewPort--;
                    }
                    $(sliderList).animate({
                        left: "+=" + increment,
                        y: 0,
                        queue: true
                    }, "swing", function() { isAnimating = false; });
                    isAnimating = true;
                }
            });

            $(forward).click(function(event) {
                if (!isAnimating) {
                    if (firstElementOnViewPort > numElmts) {
                        firstElementOnViewPort = 2;
                        $(sliderList).css('left', "0px");
                    } else {
                        firstElementOnViewPort++;
                    }
                    $(sliderList).animate({
                        left: "-=" + increment,
                        y: 0,
                        queue: true
                    }, "swing", function() { isAnimating = false; });
                    isAnimating = true;
                }
            });
        }
    };
})(jQuery);



$(document).ready(function() {
	// THIS IS NEW CODE FOR THE AUTOMATIC INFINITE CAROUSEL
	var autoscrolling = true;
	$('#carrousel').infiniteCarousel().hover(
		function() { autoscrolling = false; },
		function() { autoscrolling = true; }
    );
	$('#carrouselNav li').hover(
		function() { autoscrolling = false; },
		function() { autoscrolling = true; }
    );
	setInterval(function() {
		if (autoscrolling) {
			$('#carrousel').trigger('next');
		}
	}, 6000);

	$('#carrouselNav').carousel('#carrouselNavPrev', '#carrouselNavNext');
});

