document.observe('dom:loaded', function(){
    var running = false;
    var maxSpeed = 3;
    var collectionWidth = 0;
    var collectionVector = 0;
    var set1 = $('videoCollection');
    var set2 = $('videoCollection2');
    var ieOffset = 0;
    var set1StartOffset = -125;
    if(Prototype.Browser.IE)
        ieOffset = 5;
    $$('#videoCollection div.videoThumb').each(function(elm){
        collectionWidth += Element.getWidth(elm) + parseInt(elm.getStyle("marginLeft")) + parseInt(elm.getStyle("marginRight"));
    });
    var set2StartOffset = collectionWidth + ieOffset*2 + set1StartOffset;
    set1.setStyle({width: collectionWidth + ieOffset + 'px', left: set1StartOffset + 'px'});
    set2.setStyle({width: collectionWidth + ieOffset + 'px', left: set2StartOffset - ieOffset*2 + 'px'});
    var videoContainerWidth = Element.getWidth('videoContainer');
    
    function moveVideos(vector) {
        var currentLeft1 = parseFloat(set1.getStyle('left'));
        var currentLeft2 = parseFloat(set2.getStyle('left'));
        if(vector < 0) {
            if(currentLeft1 + Element.getWidth(set1) < 0){
                currentLeft1 = currentLeft2 + Element.getWidth(set2) - ieOffset*2;
                set1.setStyle({left: currentLeft1 + 'px'});
            }
            if(currentLeft2 + Element.getWidth(set2) < 0){
                currentLeft2 = currentLeft1 + Element.getWidth(set1) - ieOffset*2;
                set2.setStyle({left: currentLeft2 + 'px'});
            }
        } else {
            if(currentLeft1 > videoContainerWidth){
                currentLeft1 = currentLeft2 - Element.getWidth(set1) + ieOffset*2;
                set1.setStyle({left: currentLeft1 + 'px'});
            }
            if(currentLeft2 > videoContainerWidth){
                currentLeft2 = currentLeft1 - Element.getWidth(set2) + ieOffset*2;
                set2.setStyle({left: currentLeft2 + 'px'});
            }
        }
        //$('categories').update((currentLeft1) + ' ' + (currentLeft2));
        //$('categories').update((currentLeft1+vector) + ' ' + (currentLeft2+vector));
        set1.setStyle({left: (currentLeft1 + vector) + 'px'});
        set2.setStyle({left: (currentLeft2 + vector) + 'px'});
    }
    
    $('leftArrow').observe('mouseover', function(e){
        collectionVector = maxSpeed;
        running = true;
    });
    $('leftArrow').observe('mouseout', function(e){
        running = false;
    });
    $('rightArrow').observe('mouseover', function(e){
        collectionVector = -maxSpeed;
        running = true;
    });
    $('rightArrow').observe('mouseout', function(e){
        running = false;
    });
    
    new PeriodicalExecuter(function(pe) {
        if(collectionVector != 0){
            moveVideos(collectionVector);
            if(!running) {
                if(Prototype.Browser.IE) {
                    collectionVector = 0;
                } else {
                    collectionVector *= 0.9;
                    if(Math.abs(collectionVector) < 0.01) {
                        collectionVector = 0;
                    }
                }
            }
        }
    }, 0.01);
});