/* general variables */

var fadeTargetId = 'photo'; /* change this to the ID of the fadeable object */
var	fadeTarget;
var preInitTimer;

var image_list = new Array();

var current_image_index = 1;

var image_fade_time_out = 1500;

var timeout_id = -1;
var pause = false;

// for telling the current timeout to quit
var change = false;

function reloadMedia(pid, uid) {
	document.getElementById('pid').value = pid;
	document.getElementById('uid').value = uid;
		
	// alert("pid: " + document.getElementById('pid').value + " uid: " + document.getElementById('uid').value);
	document.getElementById('media_level').submit();
}

function clearCurrentMedia() {
	document.getElementById('media_text').innerHTML = '';
	document.getElementById('left_content').innerHTML = '';
}

function setCurrentMedia(id, image_url, width, height, description, replace, set_source) {
	
	// alert(image_url + ' ' + width + ' ' + height);
	
	var caption = document.getElementById('caption');
	if (caption)
	{
		if (description)
		{
			caption.innerHTML = description;
		}
		else
		{
			caption.innerHTML = ' ';
		}
	}
		
	var element = document.getElementById('photo-container');
	
	var image;
	
	if (replace == null) {
		window.clearTimeout(timeout_id);
		
		image = document.getElementById('image_back');
		
		if (image.style.MozOpacity!=null) {
			image.style.MozOpacity = 99.999;
		} else if (image.style.opacity!=null) {
			image.style.opacity = 99.999;			
		} else if (image.style.filter!=null) {
			/* worth noting: IE's opacity needs values in a range of 0-100, not 0.0 - 1.0 */ 
			image.style.filter = "alpha(opacity="+100+")";
		}	
		
		if (image_list.length > 1)		
		{
			var index = findIndex(id);
				
			if (index == image_list.length - 1)
				index = 0;	
			else 
				index++;
			
			current_image_index = index;
				
			setCurrentMedia('', 
							image_list[index].getAttribute("src"), 
							image_list[index].getAttribute("image_width"), 
							image_list[index].getAttribute("image_height"), 
							'',
							false);
		}		
	} else {
		image = document.getElementById('image_front');
		
		if (image.style.MozOpacity!=null) {
			image.style.MozOpacity = -0.001;
		} else if (image.style.opacity!=null) {
			image.style.opacity = -0.001;			
		} else if (image.style.filter!=null) {
			/* worth noting: IE's opacity needs values in a range of 0-100, not 0.0 - 1.0 */ 
			image.style.filter = "alpha(opacity="+0+")";
		}		
	} 
				
	if (set_source == null)	
		image.setAttribute('src', image_url);
				
	var heightRatio = height / getDimensions(element).height;
	var widthRatio = width / getDimensions(element).width;
								
	if (heightRatio > widthRatio) {
		
		if (heightRatio == 0) heightRatio = 0.001;
		
		var newWidth = width / heightRatio;
					
		if (height < getDimensions(element).height) {
			image.style.height = height + 'px';
			image.style.width = width + 'px';
						
			image.style.top = ((getDimensions(element).height - height) / 2) + 'px';	
			
			image.style.left = (getDimensions(element).width / 2 - width / 2) + 'px';
			
		} else {
			image.style.height = getDimensions(element).height + 'px';
			image.style.width = newWidth + 'px';
			
			image.style.top = 0 + 'px';
			
			image.style.left = (getDimensions(element).width / 2 - newWidth / 2) + 'px';
		}
	
	} else {
		if (widthRatio == 0) widthRatio = 0.001;
		
		var newHeight = height / widthRatio;
					
		if (width < getDimensions(element).width) {
			image.style.height = height + 'px';
			image.style.width = width + 'px';
			
			image.style.left = ((getDimensions(element).width - width) / 2) + 'px';
			
			image.style.top = (getDimensions(element).height / 2 - height / 2) + 'px';
		} else {			
			image.style.height = newHeight + 'px';
			image.style.width = getDimensions(element).width + 'px';
			
			image.style.left = 0 + 'px';
		
			image.style.top = (getDimensions(element).height / 2 - newHeight / 2) + 'px';
		}
	}
	
	image.style.visibility = 'visible';
	
	if (document.getElementById('image_loading_image'))
		document.getElementById('image_loading_image').style.visibility = 'hidden';
    
    if (document.getElementById('photo-loading'))
		document.getElementById('photo-loading').style.visibility = 'hidden';
	
	if (replace != null && !pause)
	{
		timeout_id = window.setTimeout('fadeImage(0)', image_fade_time_out);
	}
	
	if (pause)
		timeout_id = -1;
}

function getDimensions(element) {
    element = $(element);
    var display = $(element).style.display;
    if (display != 'none' && display != null) // Safari bug
      return {width: element.offsetWidth, height: element.offsetHeight};

    // All *Width and *Height properties give 0 on elements with display none,
    // so enable the element temporarily
    var els = element.style;
    var originalVisibility = els.visibility;
    var originalPosition = els.position;
    var originalDisplay = els.display;
    els.visibility = 'hidden';
    els.position = 'absolute';
    els.display = 'block';
    var originalWidth = element.clientWidth;
    var originalHeight = element.clientHeight;
    els.display = originalDisplay;
    els.position = originalPosition;
    els.visibility = originalVisibility;
    return {width: originalWidth, height: originalHeight};
}

function openPopupWindow(file_url, winName, features) {
  	
  	// first need to find the type of the file
  	if (file_url.match(/\.mov$|\.mp4$|\.m4v$|\.m4b$|\.avi$/i))
  	{
  		new_window = window.open("", winName,features);
    
	    new_window.document.open();
	  	new_window.document.write('<body bgcolor="#000000" height="100%" width="100%"><div align="center" style="color: #FFFFFF;"><embed src="' + file_url + '" width="100%" height="100%" bgcolor="000000"></embed>' +
							  	  'If ya can\'t see em\', its' +  
								  'cos ya need quicktime aye cuzzy.<br>' +
								  '<a href="http://www.apple.com/quicktime/download/" target="_blank">Download Here</a>' +
	  							  '</div></body>')
	  	new_window.document.close();
  	}
  	else if (file_url.match(/\.swf$/i))
  	{
  		new_window = window.open("", winName,features);
    
	    new_window.document.open();
	  	new_window.document.write('<body bgcolor="#000000" height="100%" width="100%"><div align="center" ><embed src="' + file_url + '" width="100%" height="100%" bgcolor="000000"></embed></div></body></div>')
	  	new_window.document.close();
  	}
  	else
  	{
  		window.open(file_url,winName,features);
  	}
}

function player_toggle()
{
	if (pause)
	{
		pause = false;
		
		if (timeout_id < 0)
			timeout_id = window.setTimeout('fadeImage(0)', image_fade_time_out);
		
		document.getElementById('play_stop_button').setAttribute('src', '/content/templates/common/image/stop.jpg');
	}
	else
	{
		// window.clearTimeout(timeout_id);
		pause = true;
		document.getElementById('play_stop_button').setAttribute('src', '/content/templates/common/image/start.jpg');
	}
}

/* functions */
function Init() {
	
	var element = document.getElementById('image_list');
	
	if (element)
	{
		image_list = element.getElementsByTagName('img');		
				
		if (image_list.length > 0)
			setCurrentMedia(image_list[0].getAttribute("image_id"),
							image_list[0].getAttribute("src"), 
							image_list[0].getAttribute("image_width"), 
							image_list[0].getAttribute("image_height"),
							'');
	}
}

function findIndex(id)
{
	// find the index of the image given url
	for (i = 0; i < image_list.length; i++)
	{
		// alert(id + '    ' + image_list[i].getAttribute('image_id'));
		
		if (image_list[i].getAttribute('image_id') == id)
			return i;	
	}
	
	return -1;
}

function fadeImage(opacity) {
	
	if (document.getElementById('image_back') && document.getElementById('image_front') && opacity < 100)
	{
		var back = document.getElementById('image_back');
		var front = document.getElementById('image_front');
		invert_opacity = 100 - opacity;
		
		if (back.style.MozOpacity!=null && front.style.MozOpacity!=null) {
			/* Mozilla's pre-CSS3 proprietary rule */
			back.style.MozOpacity = (invert_opacity/100)-.001;
			/* the .001 fixes a glitch in the opacity calculation which normally results in a flash when reaching 1 */
			front.style.MozOpacity = (opacity/100)-.001;
		} else if (back.style.opacity!=null && front.style.opacity!=null) {
			/* CSS3 compatible */
			back.style.opacity = (invert_opacity/100)-.001;
			front.style.opacity = (opacity/100)-.001;			
		} else if (back.style.filter!=null && front.style.filter!=null) {
			/* IE's proprietary filter */
			back.style.filter = "alpha(opacity="+invert_opacity+")";
			/* worth noting: IE's opacity needs values in a range of 0-100, not 0.0 - 1.0 */ 
			front.style.filter = "alpha(opacity="+opacity+")";
		}
		
		opacity += 2;
		timeout_id = window.setTimeout("fadeImage("+opacity+")", 20);
	}
	else if (document.getElementById('image_back') && document.getElementById('image_front') && opacity >= 100)
	{
		// switch back and front
		var back = document.getElementById('image_back');
		var front = document.getElementById('image_front');
				
		back.setAttribute('id', 'image_front');
		front.setAttribute('id', 'image_back');
		
		// document.getElementById('image_front').innerHTML = '';
		
		if (current_image_index == image_list.length - 1)
			current_image_index = 0;
		else 
			current_image_index++;
		
		setCurrentMedia('', 
						image_list[current_image_index].getAttribute("src"), 
						image_list[current_image_index].getAttribute("image_width"), 
						image_list[current_image_index].getAttribute("image_height"),
						'',
						false);
	}
}

function loadImageIndex(index) {
	loadImage(images[index][0], images[index][1], images[index][2], images[index][3], images[index][4]);
	
	// Previous button
	var previous_button = document.getElementById('photo-nav-previous');
	if (index == 0)
	{
		if (previous_page_link)
		{
			previous_button.onclick = null;
			previous_button.href = previous_page_link;
			previous_button.className = '';
		}
		else
			previous_button.className = 'hidden';
	}
	else
	{
		previous_button.onclick = function()
		{
			loadImageIndex(index - 1);
			return false;
		}
		previous_button.className = '';
	}
	
	// Next button
	var next_button = document.getElementById('photo-nav-next');
	if (index == gallery_size - 1)
	{
		if (next_page_link)
		{
			next_button.onclick = null;
			next_button.href = next_page_link;
			next_button.className = '';
		}
		else
			next_button.className = 'hidden';
	}
	else if (index == images.length - 1)
	{
		next_button.className = 'hidden';
	}
	else
	{
		next_button.onclick = function()
		{
			loadImageIndex(index + 1);
			return false;
		}
		next_button.className = '';
	}
}

function loadImage(id, image_url, width, height, description, replace) {
	if (replace == null) {
		var image = document.getElementById('image_back');
		image.setAttribute('src', image_url);
		
		var caption = document.getElementById('caption');
		if (caption)
		{
			caption.innerHTML = '&nbsp;';
		}
		
		// Event.observe(image, 'load', setCurrentMedia.bind(null, id, image_url, width, height, description, replace));
		image.onload = function () {
			setCurrentMedia(id, image_url, width, height, description, replace, false)
		};
		
		image.style.visibility = 'hidden';	
	
		if (document.getElementById('image_loading_image'))
			document.getElementById('image_loading_image').style.visibility = 'visible';
	}
}