/**
 * jQuery.svitla.simpleTeaser - Easy image rotating using jQuery.
 * Copyright (c) 2011 Ivan Kukobko - ivankukobko(at)svitla(dot)com
 * Dual licensed under MIT and GPL.
 * Date: 4/22/2011
 * @author Ivan Kukobko
 * @version 0.0.1
 *
 */

// Simple image scroller implementation

$.fn.simpleTeaser = function() {

    var options = {
        imagesWrapperClass       : 'teaser-image-wrapper',
        imagesNavContainerClass  : 'teaser-nav-container',
        imagesNavItemClass       : 'teaser-nav-item',
        imagesNextContainerClass : 'teaser-next-container',
        timeout                  : 14000
    };

    return this.each(function() {
        var $this = $(this);

        var $imagesWrapper = $(document.createElement('div')).addClass(options.imagesWrapperClass);

        // generated navigation buttons for rotator
        var $navContainer = $(document.createElement('div')).addClass(options.imagesNavContainerClass).appendTo($this);

        // generated next button for rotator
        var $nextContainer = $(document.createElement('div')).addClass(options.imagesNextContainerClass).appendTo($this);

        // setting the height of container equal to image height
        // $imagesWrapper.css({ 'min-height' : $("img:first", $this).outerHeight() });

        // array of images to be rotated
        var $images = $("img", $this);
        $images.wrapAll($imagesWrapper);

        // Make all images transparent
        $images.css({ "opacity": 0.0 });

        $images.each(function(index) {

            // Create scroller buttons
            var $navItem = $(document.createElement('div')).addClass(options.imagesNavItemClass).appendTo($navContainer);
            if ( index == 0 )
                $navItem.addClass('current');

            var $image = $(this);
            // attach events to each nav item
            $navItem.click(function(e) {
//                e.preventDefault();
                setCurrent($image);
            });
        });

        // Pick random one and show it
        var current_index = Math.floor( Math.random() * ( $images.length ) );
        if (current_index > $images.length) current_index = 0;
        var initItem = $("img", $this).eq( current_index ); //.addClass("current").css({ "opacity": 1.0 });
        showCurrent(initItem);

        var loop;

        run();

        function run() {
            loop = setInterval(switchToNext, options.timeout);
        }

        // update nav status accordingly to current image
        function updateNav(item) {
            $('.' + options.imagesNavItemClass, $navContainer).removeClass('current');
            $('.' + options.imagesNavItemClass, $navContainer).eq( item.index() ).addClass('current');
        }

        function showCurrent(item) {
            $images.removeClass("current").animate({ 'opacity' : 0.0 });
            item.addClass("current").css({ 'opacity' : 0.0 }).animate({ 'opacity' : 1.0 });
            updateNav(item);
        }

        function switchToNext(item) {
            var $current_image = $("img.current", $this).length ? $("img.current", $this) : $("img:first", $this);
            var $next_image = $current_image.next().length ? $current_image.next() : $("img:first", $this);

            showCurrent($next_image);
        }

        function setCurrent(item) {
            loop = clearInterval(loop);
            item.addClass('current').css({ "opacity": 1.0 });

            showCurrent(item);
            run();
        }

    });
};