var moveHandler = null;

$(document).ready(function(){

    $(".our-clients").each(function() {
        if (this.scrollLeft == 0) {
               $(".move-left").css("background-image", "url(/pic/blank.gif)");
        } else if (this.scrollWidth-this.offsetWidth-this.scrollLeft<=0) {
               $(".move-right").css("background-image", "url(/pic/blank.gif)");
        }
    });

    $(".arrow").each(function() {
        var top = $(".our-clients")[0].offsetTop - 13;
        var left0 = $(".our-clients")[0].offsetWidth + $(".our-clients")[0].offsetLeft - 50;
        var left1 = $(".our-clients")[0].offsetLeft - 24;
        $(this).css({"top": top+"px", "cursor": "pointer"});
        $(".move-right").css({"background-position": "0px -318px", "left": left0});
        $(".move-left").css({"background-position": "0px -212px", "left": left1});
    });

    $(".arrow").hover(function() {
        $(this).css("background-position", this.className.match(/\-left/) ? "0px 0px" : "0px -106px" );
    }, function() {
        $(this).css("background-position", this.className.match(/\-left/) ? "0px -212px" : "0px -318px" );
        clearTimeout(moveHandler);
        moveHandler = null;
    });

    $(".arrow").mousedown(function() {
        moveBlock(this.className.replace(/^.*\-(.+)$/, '$1'));
    });

    $(".arrow").mouseup(function() {
        clearTimeout(moveHandler);
        moveHandler = null;
    });

    $(".our-clients").hover(function(e) {
        $(".arrow").fadeIn("fast");
    }, function(e) {
        if (e.relatedTarget.className.match(/arrow/)) return false;
        $(".arrow").fadeOut("fast");
    });

    $(window).mouseout(function(e) {
        if (     e.target.className.match(/arrow/)
             && !(e.relatedTarget.className.match(/our-clients/) ||
                  e.relatedTarget.tagName=="TD" ||
                  e.relatedTarget.parentNode.tagName=="TD")
        ) 
                $(".arrow").fadeOut("fast");
    });
});

var moveBlock = function(b) {
        var x = $(".our-clients")[0].scrollLeft;
        var w = $(".our-clients")[0].scrollWidth;
        var w0 = $(".our-clients")[0].offsetWidth;;
        var stepSign = b=="left" ? -1 : 1;
        var newX = x+stepSign*32;
            if (newX<=0) {
                newX=0;
                $(".move-left").fadeOut("fast", function() {
                    $(this).css("background-image", "url(/pic/blank.gif)");
                });
            } else if (x==0) {
                $(".move-left").css({"background-image": "url(/pic/clients-arrows.png)", "display": "none"});
                $(".move-left").fadeIn("fast");
            }
            if (newX>=w-w0) {
                newX=w-w0;
                $(".move-right").fadeOut("fast", function() {
                    $(this).css("background-image", "url(/pic/blank.gif)");
                });
            } else if (x==w-w0) {
                $(".move-right").css({"background-image": "url(/pic/clients-arrows.png)", "display": "none"});
                $(".move-right").fadeIn("fast");
            }

        $(".our-clients")[0].scrollLeft = newX;
        moveHandler = setTimeout("moveBlock('"+b+"');", 100);
}