var SLIDER_NEXTSLIDE_MS = 5000;
var SLIDER_ANIMATION_MS = 1900;
var AUTOSCROLL_TIMER;
var slidesCount;
var scrollPane;
var scrollContent;
var slidesTxtContent;
var slidesCircleContent;
var currentValue;
var currentDirection;
var slidesGrid;

function fxFunc(x)
{
    x = -1.0*x;
    var pi = Math.PI;
    var block = parseInt(x/1448);
    var ret;
    
    ret = 1448*(0.5*(-1.0*Math.cos( ((x%1448)/1448.0 )*pi ) + 1.0)) + block*1448;    
    return -ret;
}

function autoScroll()
{
    clearTimeout(AUTOSCROLL_TIMER);
    var currentSlide;
    
    currentSlide = parseInt(currentValue/slidesGrid);
    
    if (currentDirection==1) {
        if (currentSlide==(slidesCount-1)) {
            currentDirection = -1.0;
            currentSlide--;
        } else {
            currentSlide++;
        }
    } else {
        if (currentSlide==0) {
            currentDirection = 1.0;
            currentSlide++;
        } else {
            currentSlide--;
        }
    }
    
    x = currentSlide*slidesGrid;
    
    applyScroll(x, true);
    $(".scroll-bar").slider("value", x);
    
    AUTOSCROLL_TIMER = setTimeout('autoScroll()', SLIDER_NEXTSLIDE_MS);
}

function applyScroll(value, animate)
{
    var valueDelta;
    var offset;
    if ( scrollContent.width() > scrollPane.width() ) {
        offset = Math.round( value / 1000 * ( scrollPane.width() - scrollContent.width() ) );
    } else {
        offset = 0;
    }

    valueDelta = currentValue - value;
    if (valueDelta<0) 
        valueDelta = valueDelta * -1.0;
    
    if (valueDelta>150)
        animate = true; else
        animate = false;
    
    currentValue = value;
    
    fxOffset = fxFunc(offset);
    
    if (!animate) {
        scrollContent.stop(true, true);
        slidesTxtContent.stop(true, true);
        slidesCircleContent.stop(true, true);
        scrollContent.css( "margin-left", offset + "px" );
        slidesTxtContent.css("top", ( -(slidesCount-1)*1448 - fxOffset ) + "px");
        slidesCircleContent.css("top", fxOffset + "px");
    } else {
        scrollContent.stop(true, true).animate({marginLeft: offset}, SLIDER_ANIMATION_MS);
        slidesTxtContent.stop(true, true).animate({top: ( -(slidesCount-1)*1448 - fxOffset )}, SLIDER_ANIMATION_MS);
        slidesCircleContent.stop(true, true).animate({top: fxOffset}, SLIDER_ANIMATION_MS);
    }
}

var MOUSE_ON_SLIDER = false;

function setupSlider()
{
    // build slider
    var scrollbar = $( ".scroll-bar" ).slider({
            slide:   function( event, ui ) {
                         applyScroll(ui.value, false);
                     },
            min:     0,
            max:     1000,
            step:    1,
            animate: SLIDER_ANIMATION_MS
    });
    
    var SLIDER_CLEARED = false;
    $(document).mousedown(function () {
        //console.log('down '+MOUSE_ON_SLIDER);
        if (MOUSE_ON_SLIDER) {
            clearTimeout(AUTOSCROLL_TIMER);
            SLIDER_CLEARED = true;
        }
    });
    $(document).mouseup(function () {
        //console.log('up '+MOUSE_ON_SLIDER);
        if (SLIDER_CLEARED) {
            SLIDER_CLEARED = false;
            AUTOSCROLL_TIMER = setTimeout('autoScroll()', SLIDER_NEXTSLIDE_MS);
        }
    });

    //append icon to handle
    var handleHelper = scrollbar.find( ".ui-slider-handle" )
                                .mouseenter(function () {
                                    MOUSE_ON_SLIDER = true;
                                })
                                .mouseleave(function () {
                                    MOUSE_ON_SLIDER = false;
                                })
                                .mousedown(function() {
                                    /*
                                    if (!$('.oki-use-scroll').hasClass('clicked')) {
                                        $('.oki-use-scroll').fadeOut(600);
                                        $('.oki-use-scroll').addClass('clicked');
                                    }
                                    */
                                    scrollbar.width( handleHelper.width() );
                                })
                                .mouseup(function() {
                                    scrollbar.width( "100%" );
                                })
                                .append( '<img src="images/slides-scroll.png" alt="" width="100%" height="20" />' )
                                .wrap( "<div class='ui-handle-helper-parent'></div>" )
                                .parent();

    //size scrollbar and handle proportionally to scroll distance
    function sizeScrollbar() 
    {
        var remainder = scrollContent.width() - scrollPane.width();
        var proportion = remainder / scrollContent.width();
        var handleSize = scrollPane.width() - ( proportion * scrollPane.width() );
        scrollbar.find( ".ui-slider-handle" ).css({
            width: handleSize,
            "margin-left": -handleSize / 2
        });
        var newWidth = scrollbar.width() - handleSize;
        handleHelper.width( "" ).width( newWidth );
    }

    //reset slider value based on scroll content position
    function resetValue() 
    {
        var remainder = scrollPane.width() - scrollContent.width();
        var leftVal = scrollContent.css( "margin-left" ) === "auto" ? 0 : parseInt( scrollContent.css( "margin-left" ) );
        var percentage = Math.round( leftVal / remainder * 1000 );
        scrollbar.slider( "value", percentage );
    }

    //if the slider is 100% and window gets larger, reveal content
    function reflowContent() 
    {
        var showing = scrollContent.width() + parseInt( scrollContent.css( "margin-left" ), 10 );
        var gap = scrollPane.width() - showing;
        if ( gap > 0 ) {
            scrollContent.css( "margin-left", parseInt( scrollContent.css( "margin-left" ), 10 ) + gap );
        }
    }

    //init scrollbar size
    setTimeout( sizeScrollbar, 10 );//safari wants a timeout
}

function setupContent()
{
    var i, divStr, imgTag;
    
    for (i=0; i<slidesCount; i++) 
    {
        divStr = '<div class="oki-mainpage-slides-circle0'+((i%4) + 1)+'">&nbsp;</div>';
        $('.oki-mainpage-slides-circle-content').append(divStr);
    }
    
    
    for (i=0; i<slidesCount; i++) 
    {
        imgTag = $('.scroll-content > img:nth-child('+(slidesCount-i)+')');
        divStr = '<div class="oki-mainpage-slides-txt"><div>'+imgTag.attr('alt')+'</div></div>';
        imgTag.attr('alt', '');
        $('.oki-mainpage-slides-txt-content').append(divStr);
    }
}

function now() {
    return (new Date).getTime();
}
jQuery.fx.prototype.custom = function( from, to, unit ) {
    this.startTime = now();
    this.start = from;
    this.end = to;
    this.unit = unit || this.unit || "px";
    this.now = this.start;
    this.pos = this.state = 0;

    var self = this;
    function t( gotoEnd ) {
        return self.step(gotoEnd);
    }

    t.elem = this.elem;

    if ( t() && jQuery.timers.push(t) && !jQuery.fx.prototype.timerId ) {
        //timerId = setInterval(jQuery.fx.tick, 13);
        jQuery.fx.prototype.timerId = setInterval(jQuery.fx.tick, 2050);
    }
}

$(document).ready(function () {
    
    jQuery.fx.prototype.timerId = setInterval(jQuery.fx.tick, 0);
    
    slidesCount = parseInt( $('.scroll-content > img').size() );
    scrollPane = $( ".scroll-pane" );
    scrollContent = $( ".scroll-content" );
    slidesTxtContent = $('.oki-mainpage-slides-txt-content');
    slidesCircleContent = $('.oki-mainpage-slides-circle-content');
    
    currentDirection = 1.0;
    currentValue = 0;
    slidesGrid = 1000.0/(slidesCount-1);

    slidesTxtContent.css("top", (-(slidesCount-1)*1448) + "px");
    scrollContent.css('width', (1448*slidesCount)+'px');
    
    setupContent();
    setupSlider();

    /*
    $('.oki-use-scroll').click(function () {
        if (!$('.oki-use-scroll').hasClass('clicked')) {
            $('.oki-use-scroll').fadeOut(600);
            $('.oki-use-scroll').addClass('clicked');
        }
    });
    */
    
    $('.oki-use-scroll').hide();
    $('#slide-cloud-box').mouseenter(function () {
        $('.oki-use-scroll').stop(true, true).fadeIn(500);
    });
    $('#slide-cloud-box').mouseleave(function () {
        $('.oki-use-scroll').stop(true, true).fadeOut(500);
    });
    
    AUTOSCROLL_TIMER = setTimeout('autoScroll()', SLIDER_NEXTSLIDE_MS);
});