// Youtube API controls.
function onYouTubePlayerReady(playerId) {
    ytplayer = document.getElementById('myytplayer');
    setInterval(updateytplayerInfo, 250);
    updateytplayerInfo();
    ytplayer.addEventListener('onStateChange', 'onytplayerStateChange');
    document.getElementById('controls').style.display = 'block';
}

function onytplayerStateChange(newState) {
     setytplayerState(newState);
}

function updateytplayerInfo() {
    if (ytplayer) {
        updateTimebar();
		updateBufferbar();
    }
}

function updateTimebar() {
    var all = ytplayer.getDuration();
    var part = ytplayer.getCurrentTime();
    var percent = getPercent(all, part);
    var timebarWidth = 325;
    document.getElementById('timebarIndicator').style.width = percent * (timebarWidth / 100) + "px";
}

function getPercent(all, part) {
   return (all > 0) ? (100 / all) * part : 0;
}

function updateBufferbar() {
    var all = ytplayer.getVideoBytesTotal();
    var part = ytplayer.getVideoBytesLoaded();
    var percent = getPercent(all, part);
    var bufferbarWidth = 325;
    document.getElementById('bufferbarIndicator').style.width = percent * (bufferbarWidth / 100) + "px";
}

// Make scrollbar function
function makeScrollbar(content,scrollbar,handle,horizontal,ignoreMouse){
	var steps = (horizontal?(content.getScrollSize().x - content.getSize().x):(content.getScrollSize().y - content.getSize().y))
	var slider = new Slider(scrollbar, handle, {	
		steps: steps,
		mode: (horizontal?'horizontal':'vertical'),
		onChange: function(step){
			// Scrolls the content element in x or y direction.
			var x = (horizontal?step:0);
			var y = (horizontal?0:step);
			content.scrollTo(x,y);
		}
	}).set(0);
	if( !(ignoreMouse) ){
		// Scroll the content element when the mousewheel is used within the 
		// content or the scrollbar element.
		$$(content, scrollbar).addEvent('mousewheel', function(e){	
			e = new Event(e).stop();
			var step = slider.step - e.wheel * 30;	
			slider.set(step);					
		});
	}
	// Stops the handle dragging process when the mouse leaves the document body.
	$(document.body).addEvent('mouseleave',function(){slider.drag.stop()});
}

window.addEvent('domready', function(){				
				//Scroll bar calls
				makeScrollbar( $('colBands'), $('scrollbar2'), $('handle2') );

				/* ajax alert */  
				$$('.ajax-alert').addEvent('click', function(event) {
				$$('.ajax-alert').setStyle('color','#0A4E62');	 
				this.setStyle('color','#9F1616'); 
				//prevent the page from changing  
				event.stop();  
				//make the ajax call
				var req = new Request.HTML({  
				method: 'get',  
				url: this.get('href'),  
				// onRequest: function() { $('colThumbs').setStyle('background-color','#ff0099'); },
				update: $('colThumbs'),
				//onComplete load the thumbnail scrollbar so that it resizes to the content
  				onComplete: function(response) { makeScrollbar( $('colThumbs'), $('scrollbar1'), $('handle1') );  
				// $('colThumbs').setStyle('background-color','transparent');
				}
				}).send();
			});
		//End Of domready	
		});