// Developer: Duane Comeaux
// Created: 11-24-2008
// Last modified: 3-2-09 - G. Lawas


// ceate the loading images
	var loadingImg = new Element('img', {src:'handlers/ajax-loader.gif', id: 'loadingImage', width: 32, height: 32}).setStyle({marginTop: '179px', marginLeft: '220px'});
	var loadingImg2 = new Element('img', {src:'handlers/ajax-loader-1.gif', id: 'loadingImage', width: 16, height: 16}).setStyle({marginTop: '0px', marginLeft: '208px'});

// Do after the page has loaded
document.observe('dom:loaded', function()
{
	// Set a few variables here
	var thumbsDiv = $('video_list');				// thumbs container
	var videoDiv = $('hero_video_container');		// video container
	var videoDataSrc = 'handlers/video_hdlr.php';	// video handling file
	var itemDataSrc = 'handlers/info_hdlr.php';		// video info handling file
	var vid = 37787;								// initial video id
	
	// Check if element exists on the page
	if( thumbsDiv == null )	return;
	
	// Get the default video the first time
	getVideo(videoDataSrc, $('vcontent'), 'id=' + vid + '&item_type=1&ws=' + ws);
	getInfo(itemDataSrc, $('item_title'), $('item_description'), 'id=' + vid + '&item_type=1');
	
	
	// Listen for click any where in thumb list, but only respond 
	// if it is the correct element
	Event.observe($('video_list'), 'click', function(event)
	{
		// Check for the right div on which the event occured
		var elt = Event.findElement(event, 'div');
		if ( elt != null && elt.hasClassName('thumb_img')){
			
			// Loop through all thumbs
			thumbsDiv.select('div.thumb_img').each(function(thumb)
			{	
				// Reset all thumb containers to normal
				var eltParent = thumb.up('div.video_thumb_container');
				eltParent.removeClassName('selected');
				thumb.setStyle({border: '2px solid #dedede', opacity: 0.8});
				
				// Set rollovers for thumbs and perspective containers
				Event.observe(thumb, 'mouseover', function(evt)
				{
					thumb.setStyle({border: '2px solid #00a57a', opacity: 1.0});
					var elt = $(Event.element(evt)).up('div.video_thumb_container');
					elt.addClassName('selected');
				});
				
				Event.observe(thumb, 'mouseout', function(evt)
				{
					thumb.setStyle({border: '2px solid #dedede', opacity: 0.8});
					var elt = $(Event.element(evt)).up('div.video_thumb_container');
					elt.removeClassName('selected');
				});
			});
			
			// Make the currently clicked thumb selected
			var eltParent = $(Event.element(event)).up('div.video_thumb_container');
			eltParent.addClassName('selected');
			
			// Un-Register rollover events for selected thumb
			elt.stopObserving('mouseover');
			elt.stopObserving('mouseout');
			elt.setStyle({border: '2px solid #00a57a', opacity: 1.0});
			
			// Do the work - get the video
			var id = getVideoID(elt);
		}
	});
		
	// Loop through all of the thumbs and set  rollovers initially
	thumbsDiv.select('div.thumb_img').each(function(thumb)
	{
		thumb.setStyle({border: '2px solid #dedede', opacity: 0.8});
		// Usability features
		Event.observe(thumb, 'mouseover', function(event)
		{
			thumb.setStyle({border: '2px solid #00a57a', opacity: 1.0});
			var elt = $(Event.element(event)).up('div.video_thumb_container');
			elt.addClassName('selected');
		});
		
		Event.observe(thumb, 'mouseout', function(event)
		{
			thumb.setStyle({border: '2px solid #dedede', opacity: 0.8});
			var elt = $(Event.element(event)).up('div.video_thumb_container');
			elt.removeClassName('selected');
		});
	});


	function getVideoID(thumb){
		// get the id attribute of the element
		var thumb_id = thumb.getAttribute('id');
		//alert(thumb_id);
		
		// extract the video id from the element's id attribute
		var array = thumb_id.split('_');
		var vid = array[2];
		//alert("New Video ID: " + vid);
		
		// Do the work
		getVideo(videoDataSrc, $('vcontent'), 'id=' + vid + '&item_type=1&ws=' + ws);
		getInfo(itemDataSrc, $('item_title'), $('item_description'), 'id=' + vid + '&item_type=1');
		return vid;
	}
	
	function getVideo(dataSrc, obj, params){
		// Instanciate a new Ajax Request
		var a = new Ajax.Request(dataSrc, {
			method: 'post',
			parameters: params,
			asynchronous: true,
			
			onCreate: function(){
				// Show the loading image
				obj.update(loadingImg);
			},
			
			onSuccess: function(transport) {
				// replace the loading image with the video content
				// Note: this function receives javascript
				// and by default prototype attempts to evaluate it.
				// For this to work I had to update the element 
				// at this point and in the file AC_RunActiveContent2.js
				// function AC_FL_RunContent (line 203) 
				// and function AC_SW_RunContent (line 214)
				obj.update(transport.responseText);
			}, 
			
			onFailure: function(){
				//obj.update('There was an error with your request. Please try again later!');
				alert('Failed');
			},
			
			onException: function(requester, exc){
				//obj.update('There was an error with your request. Please try again later!');
				alert(requester.id + ": " + exc);
			}
		});
	}
	
	function getInfo(dataSrc, obj1, obj2, params){		
		//	extract the video id from params
		var p1 = params.split('&');
		var p2 = p1[0].split('=');
		var id = p2[1];
		
		var b = new Ajax.Request(dataSrc, {
			method: 'post',
			parameters: params,
			asynchronous: true,
			
			onCreate: function(){
				obj2.update(loadingImg2);
				obj1.update('loading...please wait!');
			},
			
			onSuccess: function(transport) {
				//alert(transport.responseText);
				var xmlDocument = transport.responseXML;
				var retrunData = xmlDocument.getElementsByTagName('data');
				obj2.update(retrunData[0].getAttribute('item_description'));
				obj1.update(retrunData[0].getAttribute('item_title'));
				
				$('share_link').href = 'sendexhibit.php?ID='+ id +'&TC=$TC&A=$A';
				$('download_link').href = 'downloadchoices.php?ID='+ id;
				
				if( data.firstChild.data == 'error' ){
					alert('Sorry, there was an error with your request.\nPlease try again later.');
				}
			}, 
			
			onFailure: function(){
				//obj1.update('Error:');
				//obj2.update('There was an error with your request. Please try again later!');
				alert('Failed');
			},
			
			onException: function(requester, exc){
				//obj1.update('Error:');
				//obj2.update('There was an error with your request. Please try again later!');
			//	alert(requester + ": " + exc);
			}
		});
	}
});