var dragStarted = 0;
var startPos;
var curPos = 0;
function onHanderMD(e){
    dragStarted = 1;
    var handler = $('.handle');
    startPos = parseInt(handler.css('left')) - e.pageX;
    $(document).bind('mousemove.slider', onHanderMM)
		.bind('mouseup.slider', onHanderMU);
    return false;
}

function onHanderMM(e){
    if(dragStarted) {
        moveTo(startPos + e.pageX);
    }
    return false;
}

function onHanderMU(e){
    dragStarted = 0;
    $(document).unbind('mousemove.slider')
		.unbind('mouseup.slider');
    return false;
}

function onSliderClick(e){
    var container = $('#container>div');
    var slider = $('.scrollLine', container);
    var handler = $('.handle', slider);
    moveTo(e.pageX - slider.offset().left - handler.width() / 2, 1);
    return false;
}

function onHandlerClick(e){
    return false;
}

function moveTo(pos, animate) {
    var container = $('#container>div');
    var slider = $('.scrollLine', container);
    var handler = $('.handle', slider);
    var ul = $('table', container);
    var rate = ul.innerWidth() / slider.width();
    if (pos < 0) pos = 0;
    if (pos > slider.width() - handler.width()) pos = slider.width() - handler.width();
    if(animate){
        ul.animate({'left' : -pos * rate}, 500);
        handler.animate({'left' : pos}, 500);
    }else{
        if (rate > 0) ul.css('left', -pos * rate);
        handler.css('left', pos);
    }
}

function onLeftArrClick(e){
    var handler = $('.handle');
    moveTo(parseInt(handler.css('left')) - 100, 1);
}

function onRightArrClick(e){
    var handler = $('.handle');
    moveTo(parseInt(handler.css('left')) + 100, 1);
}

function resizeSlider(){
    $('.slider').css('display', 'block');
    var container = $('#container>div');
    var slider = $('.scrollLine', container);
    var handler = $('.handle', slider);
    var ul = $('table', container);
    var rate = container.outerWidth() / ul.innerWidth();
    $('.handle', slider).css('width', slider.outerWidth() * rate);
    if (rate >= 1) $('.slider').css('display', 'none');
    pos = -parseInt(ul.css('left')) * slider.width() / ul.innerWidth();
    if (pos + handler.width() > slider.width()) {
        moveTo(slider.width() - handler.width(), 1);
    } else {
        handler.css('left', pos);
    }
}
function moveToActiveItem(){
    var container = $('#container>div');
    var slider = $('.scrollLine', container);
    var handler = $('.handle', slider);
    var ul = $('table', container);
    var rate = container.outerWidth() / ul.innerWidth();
    var activeItem = $('td.activeItem', ul);
    if (activeItem.size() > 0){
        var offset = activeItem.offset().left;
        if (container.outerWidth() < offset + activeItem.width()) {
            var end = ul.innerWidth() - container.outerWidth();
            var centr = offset - container.outerWidth() / 2 + activeItem.width() / 2;
            moveTo((end < centr ? end : centr) * slider.width() / ul.innerWidth(), 1);
        }
    }
}
$(function(){
    var container = $('#container>div');
    container.css('overflow', 'hidden');
    container.css('overflow-x', 'hidden');
    var slider = $('.scrollLine', container);
    var handler = $('.handle', slider);
    var ul = $('table', container);
    container.bind('mousemove', onContainerMM);
    handler.bind('mousedown', onHanderMD);
    $(window).bind('load', resizeSlider);
    $(window).bind('load', moveToActiveItem);
    $(window).bind('resize', resizeSlider);
    if ($.browser.msie) {
		container.attr('unselectable', 'on');
	}
    slider.bind('click', onSliderClick);
    handler.bind('click', onHandlerClick);
    $('.leftArr').bind('click', onLeftArrClick);
    $('.rightArr').bind('click', onRightArrClick);
});

function onContainerMM(e) {
    var container = $('#container>div');
    var slider = $('.scrollLine', container);
    var handler = $('.handle', slider);
    var ul = $('table', container);
    //ul.stop();
    padding = 80;
    pos = e.pageX - container.offset().left - padding;
    if (pos < 0) pos = 0;
    if (pos > container.width() - 2 * padding) pos = container.width() - 2 * padding;
    curPos = - (ul.width() - container.width()) * pos / (container.width() - 2 * padding);
    ul.animate({'left' : curPos}, {'duration' : 20000, 'queue' : false});
}