$( document ).ready( function(){
    $( ".paging" ).show();
    $( ".paging a:first" ).addClass( "active" );

    var imageWidth = $( ".window" ).width();
    var imageSum = $( ".image_reel img" ).size();
    var imageReelWidth = imageWidth * imageSum;

    $( ".image_reel" ).css({
        width: imageReelWidth
    });

    rotate = function(){
        var triggerID = $active.attr( "rel" ) - 1;
        var image_reelPosition = triggerID * imageWidth;

        $( ".paging a" ).removeClass( "active" );
        $active.addClass( "active" );

        $( ".image_reel" ).animate({
            left: -image_reelPosition
        }, 500 );
    };

    rotateSwitch = function(){
        play = setInterval( function(){
            $active = $( ".paging a.active" ).next();

            if( $active.length === 0 )
                $active = $( ".paging a:first" );

            rotate();
        }, 3000 );
    };

    rotateSwitch();

    $( ".image_reel a" ).hover( function(){
        clearInterval( play );

    }, function(){
        rotateSwitch();
    });

    $( ".paging a" ).click( function(){
        $active = $( this );
        clearInterval( play );
        rotate();
        rotateSwitch();
        return false;
    });
});

( function( $ ){
    $.fn.easySlider = function( options ){
        var defaults = {
            prevId: "prevBtn",
            prevText: "Previous",
            nextId: "nextBtn",
            nextText: "Next",
            controlsShow: false,
            controlsBefore: "",
            controlsAfter: "",
            controlsFade: true,
            firstId: "firstBtn",
            firstText: "First",
            firstShow: false,
            lastId: "lastBtn",
            lastText: "Last",
            lastShow: false,
            vertical: false,
            speed: 800,
            auto: false,
            pause: 4000,
            continuous: false,
            numeric: false,
            numericId: "controls"
        };

        var options = $.extend( defaults, options );

        this.each( function(){
            var obj = $( this );
            var s = $( "li", obj ).length;
            var w = $( "li", obj ).width();
            var h = $( "li", obj ).height();
            var ts = s - 1;
            var t = 0;
            var clickable = true;

            obj.width( w );
            obj.height( h );
            obj.css( "overflow", "hidden" );

            $( "ul", obj ).css( "width", s * w );

            if( options.continuous ){
                $( "ul", obj ).prepend( $( "ul li:last-child", obj ).clone().css( "margin-left", -w + "px" ));
                $( "ul", obj ).append( $( "ul li:nth-child(2)", obj ).clone());
                $( "ul", obj ).css( "width", ( s + 1 ) * w );
            };

            if(!options.vertical )
                $( "li", obj ).css( "float", "left" );

            if( options.controlsShow ){
                var html = options.controlsBefore;

                if( options.numeric ){
                    html += "<ol id=\"" + options.numericId + "\"></ol>";

                } else {
                    if( options.firstShow )
                        html += "<span id=\"" + options.firstId + "\"><a href=\"javascript:void(0)\">" + options.firstText + "</a></span>";

                    html += "<span id=\"" + options.prevId + "\"><a href=\"javascript:void(0)\">" + options.prevText + "</a></span>";
                    html += "<span id=\"" + options.nextId + "\"><a href=\"javascript:void(0)\">" + options.nextText + "</a></span>";

                    if( options.lastShow )
                        html += "<span id=\"" + options.lastId + "\"><a href=\"javascript:void(0)\">" + options.lastText + "</a></span>";
                };

                html += options.controlsAfter;
                $( obj ).after( html );
            };

            if( options.numeric ){
                for( var i = 0; i < s; i++ ){
                    $( document.createElement( "li" ))
                        .attr( "id", options.numericId + ( i + 1 ))
                        .html( "<a rel=\"" + i + "\" href=\"javascript:void(0)\">"+ ( i + 1 ) + "</a>" )
                        .appendTo( $( "#" + options.numericId ))
                        .click( function(){
                            animate( $( "a", $( this )).attr( "rel" ), true );
                        });
                };

            } else {
                $( "a", "#" + options.nextId ).click( function(){
                    animate( "next", true );
                });

                $( "a", "#" + options.prevId ).click( function(){
                    animate( "prev", true );
                });

                $( "a", "#" + options.firstId ).click( function(){
                    animate( "first", true );
                });

                $( "a", "#" + options.lastId ).click( function(){
                    animate( "last", true );
                });
            };

            function setCurrent( i ){
                i = parseInt( i ) + 1;
                $( "li", "#" + options.numericId ).removeClass( "current" );
                $( "li#" + options.numericId + i ).addClass( "current" );
            };

            function adjust(){

                if( t > ts)
                    t = 0;

                if( t < 0 )
                    t = ts;

                $( "ul", obj ).css( "margin-left", -1 * t * ( options.vertical ? h : w ));

                clickable = true;

                if( options.numeric )
                    setCurrent( t );
            };

            function animate( dir, clicked ){

                if( clickable ){
                    clickable = false;
                    var ot = t;

                    switch( dir ){
                        case "next":
                            t = ot >= ts ? ( options.continuous ? t + 1 : ts ) : t + 1;
                            break;

                        case "prev":
                            t = t <= 0 ? ( options.continuous ? t - 1 : 0 ) : t - 1;
                            break;

                        case "first":
                            t = 0;
                            break;

                        case "last":
                            t = ts;
                            break;

                        default:
                            t = dir;
                            break;
                    };

                    var diff = Math.abs( ot - t );

                    $( "ul", obj ).animate({
                            marginLeft: -1 * t * ( options.vertical ? h : w )
                        }, {
                            queue: false,
                            duration: diff * options.speed,
                            complete: adjust
                        }
                    );

                    if(!options.continuous && options.controlsFade ){
                        if( t == ts ){
                            $( "a", "#" + options.nextId ).hide();
                            $( "a", "#" + options.lastId ).hide();

                        } else {
                            $( "a", "#" + options.nextId ).show();
                            $( "a", "#" + options.lastId ).show();
                        };

                        if( t == 0 ){
                            $( "a", "#" + options.prevId ).hide();
                            $( "a", "#" + options.firstId ).hide();

                        } else {
                            $( "a", "#" + options.prevId ).show();
                            $( "a", "#" + options.firstId ).show();
                        };
                    };

                    if( clicked )
                        clearTimeout( timeout );

                    if( options.auto && dir == "next" && !clicked ){
                        timeout = setTimeout( function(){
                            animate( "next", false );
                        },
                        diff * options.speed + options.pause );
                    };
                };
            };

            var timeout;

            if( options.auto ){
                timeout = setTimeout( function(){
                    animate( "next", false );
                }, options.pause );
            };

            if( options.numeric )
                setCurrent( 0 );

            if(!options.continuous && options.controlsFade ){
                $( "a", "#" + options.prevId ).hide();
                $( "a", "#" + options.firstId ).hide();
            };
        });
    };
})( jQuery );