// Lightbox.js
// Not really anything special, just some CSS effects

// In the sense that we need to have elements fade in and out
// We also need to display and hide them, or problems may lead in browsers
// In any case, let's treat it like a lightbox first - turn on and off

// Set these to change the IDs for the respective divs
var overlay = "overlay";
var contentbox = "contentbox";

// And let's assume there's always an image inside
var image = "image";

// Tiny message inside?
var message = "message";

// And these are the maximum opacities each div can achieve by loop
// Keep it in tenth fractions - .1, .2, .3, .4, etc
// 100% = 1
var overlay_max_opac = .8;
var contentbox_max_opac = 1;
var image_max_opac = 1;

// The constant left positioning so we can animate from this position
// Really it should be in the middle, so let's just assume that we're at fullscreen
var left_position = (getWidth()/3);
// We start from 0 because we can only assume 0

function get_page_size()
{

	var xScroll, yScroll;

	if (window.innerHeight && window.scrollMaxY) {
		xScroll = window.innerWidth + window.scrollMaxX;
		yScroll = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}

	var windowWidth, windowHeight;
		
	if (self.innerHeight) {	// all except Explorer
		if(document.documentElement.clientWidth){
			windowWidth = document.documentElement.clientWidth;
		} else {
			windowWidth = self.innerWidth;
		}
		windowHeight = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	} else if (document.body) { // other Explorers
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}
	// for small pages with total height less then height of the viewport
	if(yScroll < windowHeight){
		pageHeight = windowHeight;
	} else {
		pageHeight = yScroll;
	}
	// for small pages with total width less then width of the viewport
	if(xScroll < windowWidth){
		pageWidth = xScroll;
	} else {
		pageWidth = windowWidth;
	}

	var sizes = {
		page_width: pageWidth,
		page_height: pageHeight,
		window_width: windowWidth,
		window_height: windowHeight
	};
	
	return sizes;
}

function getWidth(){
	// Return the width of the client window
	var width = 0;
	if( typeof( window.innerWidth ) == 'number' ) {
		//Non-IE
		width = window.innerWidth;
	} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
		//IE 6+ in 'standards compliant mode'
		width = document.documentElement.clientWidth;
	} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
		//IE 4 compatible
		width = document.body.clientWidth;
	}
	return width;
}


function display(elem){
	// Turn the element's display to display
	window.document.getElementById(elem).style.display = "block";
}

function hide(elem){
	// Turn the element's display to hide
	window.document.getElementById(elem).style.display = "none";
}

function setStuff(data){
  // Set the content of the contentbox - like say set it to "loading..."
	window.document.getElementById("stuff").innerHTML = data;
}

function setOpac(elem, level){
  // Change the opacity of an element to a certain level (0 - 100)
	var opac = level;
	var filter = level * 100;
	var elem = window.document.getElementById(elem);
	elem.style.opacity=level;
	elem.style.filter = 'alpha(opacity=' + filter + ')';

}

function turnOnOverlay(){
	// First set it to display
	display(overlay);

	// We will turn on the overlay to 80%
	for(i = 0; i < overlay_max_opac; i+=.1){
		setTimeout('setOpac('+overlay+', '+i+')', 200*i);
	}
}

function turnOffOverlay(){
	// Now to reduce the opacity to 0
	setOpac(overlay, .01);
	
	// Then just turn the display off
	hide(overlay);
	
	// No need for animation here
}

function turnOnContentbox(){
	// First set it to display
	display(contentbox);

	// We will turn on the overlay to 80%
	for(i = 0; i < contentbox_max_opac; i+=.1){
		setTimeout('setOpac('+contentbox+', '+i+')', 200*i);
	}
}

function turnOffContentbox(){
	// Now reduce it's opacity to 0.01 (because CSS doesn't like Opacity = 0)
	setOpac(contentbox, .01);

	// Then hide
	hide(contentbox);
}

function On(){
	// Turn on the ligthbox
	turnOnOverlay();
	turnOnContentbox();
}

function Off(){
	// Turn off the lightbox
	// Basically turn off everything and set the width/height to normal size
	turnOffOverlay();
	turnOffContentbox();
	setWidth(70);
	setHeight(25);
	setOpac("stuff", 0.01);
}

function Open(type, source, x, y){
        // First turn on the lightbox
        On();
        
        // Resize the window, display the image/video/whatever
        
	// Some temporary variables and junk, whatever
	var img_x = x;
	var img_y = y;
	
	if(img_x >= getWidth()-16){
		// If the image is greater than client window width, there really shouldn't be any margin
		setLeftMargin(0);
	}else{
		// Calculate the new left margin
		// Get the width, minus the leeway space (16px in this case) and then minus the image width
		// Divide it by two and we have the left (or right) margin
		var starterWidth = (getWidth() - 16) - img_x;
		var new_left = starterWidth / 2;
		
		// Calculate the distance between the new position and old position
		var distance = new_left - left_position;
		
		// Let's move by 10% of the distance each loop
		var move = Math.abs(distance / 10);
		
		// get the old left position
		var pos = left_position;
		var i = 0;		

		// Loop the box to it's respective position
		if(new_left > left_position){
			while(pos < new_left){
				setTimeout('setLeftMargin('+pos+')', 15*i);
				pos+=move;
				i++;
			}
		}else{
			while(pos > new_left){
				setTimeout('setLeftMargin('+pos+')', 15*i);
				pos-= move;
				i++;
			}
		}
	}
	
	// Resizing part
	// The width and height of the content box will now be slowly animated to fit proper sizes
	// If the sizes aren't met (like a math percentage error (rounding)), we set them afterwards
  
	// Change the width of the window now
	var imgx_inc = img_x / 10;
	var w = 0;
	i = 0;
	while(w <= img_x){
		setTimeout('setWidth('+w+')', 25*i);
		w += imgx_inc;
		i++;
	}
  
	// And if it isn't target width, let's just set it to be so
	setWidth(img_x);

	// Now to set the height to y+20 for text below
	var imgy_inc = (img_y+20) / 10;
	var h = 0;
	i = 0;
	while(h <= img_y+20){
		setTimeout('setHeight('+h+')', 25*i);
		h += imgy_inc;
		i++;
	}
  
	// Once again, if not reached...
	setHeight(img_y+20);
	
	// Set the data
	if(type == "image"){
	       window.document.getElementById("stuff").innerHTML = "<img src='"+source+"' width='"+x+"px' height='"+y+"px' alt='' />";
        }else if(type == "video"){
        
        }
	// Turn on the stuff to be displayed
	setOpac("stuff", .01);
	display("stuff");
	setOverlay();
	
	setTimeout('turnOnStuff()', 500);
  
	// Change our old left-position to the new left position
	left_position = new_left;
}

function turnOnStuff(){
        // Turn on the goods
        for(i = 0; i < image_max_opac; i+=.1){
	       setTimeout('setOpac("stuff", '+i+')', 500*i);
	}
}

function setHeight(y){
	// Change the height of the content box
	window.document.getElementById(contentbox).style.height = ""+y+"px";
}

function setWidth(x){
	// Change the width of the content box
	window.document.getElementById(contentbox).style.width = ""+x+"px";
}

function setOverlay(){
	// Make the overlay 100%
	var page_sizes = get_page_size();
	window.document.getElementById(overlay).style.width = ""+page_sizes.page_width+"px";
	window.document.getElementById(overlay).style.height = ""+page_sizes.page_height+"px";
}

function setLeftMargin(x){
	// Set the margin for the content box
	window.document.getElementById(contentbox).style.left = ""+x+"px"; 
}

function calculateLeft(){
	// Calculate the left pixel distance for the content box
	// This is intended for after the image has loaded.
	var starterWidth = (getWidth() - 16) - getImage().offsetWidth;
	var new_left = starterWidth / 2;
	return new_left;
}

function changeSize(){
	// This function should be called when the window changes size
	// Since this is from the <body> tag, let's make sure it only works if the lightbox is active
	if(window.document.getElementById(contentbox).style.display == "block"){
		setLeftMargin(calculateLeft());
		left_position = calculateLeft();
	}
}