// Observe the dom load event
$(document).observe("dom:loaded", function() {        
	initVideoScroller();
});

function initVideoScroller(){

    // Apply our custom scroller
    CSBfleXcroll('scrollContent');
    
    
    // Apply our tooltips and hover effects
    $$('li.tooltip').each(function(element) {
        
        var tipId = element.id.split("_")[1];
        var title = $("tiptitle_"+tipId).innerHTML;
        var content = $("tipcontent_"+tipId).innerHTML;
        
        var maxlength = 200;
        // truncate if needed
        if(content.length > maxlength){
            content = content.substring(0,maxlength-5)+" ... <span class='more'>click for more</span>";
        }
        
        new Tip(element, content, {
          title: title,
          style: 'videodesc',
          hook: { target: 'rightMiddle', tip: 'leftMiddle' }
        });
        
        
        Event.observe(element, "mouseover", function(e){element.addClassName("highlight")}, false);
        Event.observe(element, "mouseout", function(e){element.removeClassName("highlight")}, false);
        
    });
    
    // Observe mousewheel events        
    Event.observe(document, "mousewheel", onScroll, false); // Browsers mouseweheel
    Event.observe(document, "DOMMouseScroll", onScroll, false); // Firefox mousewheel
    
    // Event for mouse wheel scrolling
	function onScroll(e){
	    var amount = (Event.wheel(e) < 0 ? '170px' : '-170px' );
	    
	    // if the citylist is not expanded and the user is not over the scroll content area
	    // forward the mouse wheel scrolling to the video scroll list
	    var mouseX = Event.pointerX(e);
        var mouseY = Event.pointerY(e);	    
        var element = $("scrollContent");        
        var mouseInScrollArea = Position.within(element, mouseX, mouseY);        
	    if(!isCityListVisible && !mouseInScrollArea){
	        $("scrollContent").contentScroll("2s",amount,true);
	    }	    
	}
		
}