// this file contains functions for the cb (contentbox)
// author:    Dominik Scholz, schlotzz@go4u.de
// changed:   2009-08-18

// global variables
	// create temporary data array
	var cba = new Array();

	// different settings
	cba.timeout = 15;
	cba.steps   = 25;
	cba.border  = 20;
	cba.width   = 500;
	cba.height  = 500;

	// source iframe size
	cba.src   = new Array();
	cba.src.x = null;
	cba.src.y = null;
	cba.src.w = null;
	cba.src.h = null;

	// destination iframe size
	cba.dst   = new Array();
	cba.dst.x = null;
	cba.dst.y = null;
	cba.dst.w = null;
	cba.dst.h = null;

	// iframe href
	cba.href = null;

	// iframe loaded
	cba.loaded = false;

// end of global variables




// start preloading
cb_start_preload();




// execute, if hyperlink is clicked
function cb(o, fast)
{

	if (!o)
		return true;

	cba.loaded = false;

	if (fast == null)
		fast = false;

	if (!document.getElementById('cb_iframe'))
		cb_start();

	var pos = cb_position(o);

	// get data of source image
	cba.src.x = pos[0];
	cba.src.y = pos[1];
	cba.src.w = o.offsetWidth;
	cba.src.h = o.offsetHeight;

	// get url of link
	cba.href = o.href;

	// show loading box
	var de = document.documentElement;
	var windowWidth  = window.innerWidth  || self.innerWidth  || (de&&de.clientWidth)  || document.body.clientWidth;
	var windowHeight = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
	var windowLeft   = window.pageXOffset || self.pageXOffset || (de&&de.scrollLeft)   || document.body.scrollLeft;
	var windowTop    = window.pageYOffset || self.pageYOffset || (de&&de.scrollTop)    || document.body.scrollTop;

	var loadbox = document.getElementById('cb_loadbox');
	loadbox.style.left = (parseInt(windowWidth/2) + windowLeft-25)+'px';
	loadbox.style.top  = (parseInt(windowHeight/2) + windowTop-25)+'px';
	loadbox.style.display = 'block';
	cb_loadani(0, fast);

	var t = new Date();


	// set iframe container
	var container = document.getElementById('cb_div');
	container.style.left    = '-9999px';
	container.style.top     = '-9999px';
	container.style.width   = null;
	container.style.height  = null;
	container.style.display = 'block';

	// set iframe for preload
	var preload = document.getElementById('cb_iframe');
	preload.width  = cba.width+'px';
	preload.height = cba.height+'px';
	preload.src    = null;
	preload.src    = cba.href + '?contentBox=true&time=' + t.getTime(); // prevent caching by using time as parameter

	return false;
}


// execute if image is preloaded
function cb_preloaded(fast)
{
	var de = document.documentElement;
	var windowWidth  = window.innerWidth  || self.innerWidth  || (de&&de.clientWidth)  || document.body.clientWidth;
	var windowHeight = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
	var windowLeft   = window.pageXOffset || self.pageXOffset || (de&&de.scrollLeft)   || document.body.scrollLeft;
	var windowTop    = window.pageYOffset || self.pageYOffset || (de&&de.scrollTop)    || document.body.scrollTop;
	var preload = document.getElementById('cb_iframe');

	// get width and height from image
	var w = cba.width;
	var h = cba.height;

	// maximal width and height
	var maxw = windowWidth  - cba.border*2;
	var maxh = windowHeight - cba.border*2;

	if (h > maxh)
	{
		h = maxh;
	}

	// round width and height
	w = parseInt(w);
	h = parseInt(h);

	// get data of destination image
	cba.dst.x = windowWidth/2  - parseInt(w/2) + windowLeft;
	cba.dst.y = windowHeight/2 - parseInt(h/2) + windowTop;
	cba.dst.w = w;
	cba.dst.h = h;

	preload.style.width  = w+'px';
	preload.style.height = h+'px';

	cb_open(fast);
}


// if page is loaded, insert images to preload preloading-animation
function cb_start_preload()
{
	// select body tag
	var insertBody = document.getElementsByTagName('body')[0];

	// if not loaded, try again later
	if (insertBody == null)
	{
		window.setTimeout("cb_start_preload();", 250);
		return;
	}

	// create divs for all preloading classes
	var insertDiv = document.createElement("div");
	insertDiv.style.position = 'absolute';
	insertDiv.style.left     = '-9999px';
	insertDiv.style.top      = '-9999px';

	insertBody.insertBefore(insertDiv, insertBody.firstChild);

	// create column
	for (var i=1; i<=8; i++)
	{
		var insertSubdiv = document.createElement("div");
		insertSubdiv.className = 'cb_loadstate'+i;
		insertDiv.appendChild(insertSubdiv);
	}

	// cycle through all anchors
	var insertAnchors = insertBody.getElementsByTagName('a');
	for (var i=0; i<insertAnchors.length; i++)
	{
		var href = insertAnchors[i].href;
		if (href.indexOf('-cb-') < 0)
			continue;
		insertAnchors[i].onclick = function() { return cb(this); };
	}

}


// insert html objects
function cb_start()
{
	// select body tag
	var insertBody = document.getElementsByTagName('body')[0];

	// loading bar
	var insertLoad = document.createElement('div');
	insertLoad.setAttribute('id', 'cb_loadbox');
	insertLoad.style.position   = 'absolute';
	insertLoad.style.left       = '10px';
	insertLoad.style.top        = '10px';
	insertLoad.style.display    = 'none';
	insertLoad.style.zIndex     = '1000';
	insertBody.insertBefore(insertLoad, insertBody.firstChild);

	// moving iframe container
	var insertDiv = document.createElement('div');
	insertDiv.setAttribute('id', 'cb_div');
	insertDiv.style.position  = 'absolute';
	insertDiv.style.left      = '10px';
	insertDiv.style.top       = '10px';
	insertDiv.style.zIndex    = '1000';
	insertDiv.style.overflow  = 'hidden';
	insertDiv.display         = 'none';
	insertBody.insertBefore(insertDiv, insertBody.firstChild);

	// moving iframe
	var insertIframe = document.createElement('iframe');
	insertIframe.setAttribute('id', 'cb_iframe');
	insertIframe.style.display = 'block';
	insertIframe.frameBorder = 'none';
	insertDiv.appendChild(insertIframe);
   	if (insertIframe.attachEvent)
		insertIframe.attachEvent("onload", function() { cba.loaded = true; }); // ie
	else if (insertIframe.addEventListener)
		insertIframe.addEventListener("load", function() { cba.loaded = true; }, true); // Safari, Firefox

	// close button
	var insertClose = document.createElement('a');
	insertClose.setAttribute('id', 'cb_closebox');
	insertClose.style.position  = 'absolute';
	insertClose.style.left      = '10px';
	insertClose.style.top       = '10px';
	insertClose.style.display   = 'none';
	insertClose.style.zIndex    = '1001';
	insertBody.insertBefore(insertClose, insertBody.firstChild);
	insertClose.href = 'javascript:cb_close();';

	// image shadow
	var insertShadow = document.createElement('table');
	insertShadow.setAttribute('id', 'cb_shadow');
	insertShadow.style.position = 'absolute';
	insertShadow.style.left     = '10px';
	insertShadow.style.top      = '10px';
	insertShadow.style.display  = 'none';
	insertShadow.style.zIndex   = '999';
	insertShadow.cellPadding    = '0';
	insertShadow.cellSpacing    = '0';
	insertBody.insertBefore(insertShadow, insertBody.firstChild);

	var insertShadowTbody = document.createElement("tbody");
	insertShadow.appendChild(insertShadowTbody);

	// create rows and columns
	for (var row=0; row<=2; row++)
	{
		// create rows
		var insertRow = document.createElement("tr");
		insertShadowTbody.appendChild(insertRow);

		// create column
		for (var col=1; col<=3; col++)
		{
			var insertCol = document.createElement("td");
			insertCol.id = 'cb_shadow'+(row*3+col);
			insertRow.appendChild(insertCol);
		}
	}
}


// cycle loading animation
function cb_loadani(s, fast)
{
	if (cba.loaded)
	{
		cb_preloaded(fast);
		return;
	}

	var o = document.getElementById('cb_loadbox');
	o.className  = 'cb_loadstate'+s;
	o.innerHTML = '<div style="display: block; width: 50px; height: 50px;">&nbsp;</div>';

	s = (s<8)? (s+1):1;

	if (o.style.display == 'block')
		window.setTimeout('cb_loadani('+s+', '+fast+');', 100);
}


// do open animation
function cb_open(fast, p)
{
	var o = document.getElementById('cb_div');

	// view image and hide the other stuff
	if (p==null)
	{
		cb_hide_controls();
		o.style.display = 'block';
		p = 0;
	}

	p += 100/cba.steps;

	if (fast)
		p = 100;

	var m = cb_magic(p/100);

	var x = cba.src.x + (cba.dst.x - cba.src.x) * m;
	var y = cba.src.y + (cba.dst.y - cba.src.y) * m;
	var w = cba.src.w + (cba.dst.w - cba.src.w) * m;
	var h = cba.src.h + (cba.dst.h - cba.src.h) * m;

	o.style.left   = parseInt(x)+'px';
	o.style.top    = parseInt(y)+'px';
	o.style.width  = parseInt(w)+'px';
	o.style.height = parseInt(h)+'px';

	cb_opacity(o.style, 25+p/100*75);

	if (p<100)
		window.setTimeout('cb_open('+fast+', '+p+');', cba.timeout);
	else
		cb_show_controls();
}




// do close animation
function cb_close(p)
{
    var o = document.getElementById('cb_div');

	if (p==null)
	{
		p = 0;
		cb_hide_controls();
	}

	p += 300/cba.steps; // three times as fast
	var m = cb_magic(p/100);

	var x = cba.dst.x - m*20;
	var y = cba.dst.y - m*20;
	var w = cba.dst.w + m*40;
	var h = cba.dst.h + m*40;

	o.style.left   = parseInt(x)+'px';
	o.style.top    = parseInt(y)+'px';
	o.style.width  = parseInt(w)+'px';
	o.style.height = parseInt(h)+'px';

	cb_opacity(o.style, 100-p);

	if (p<100)
		window.setTimeout('cb_close('+p+');', cba.timeout);
	else
		o.style.display = 'none';
}


// show closebutton and shadow of image
function cb_show_controls()
{
    document.getElementById('cb_iframe').onclick = function() { cb_close(); };

    var o0 = document.getElementById('cb_closebox');
    o0.style.left    = parseInt(cba.dst.x-12)+'px';
    o0.style.top     = parseInt(cba.dst.y-14)+'px';
    o0.style.display = 'block';

    var o2 = document.getElementById('cb_shadow');
    o2.style.left    = parseInt(cba.dst.x-12)+'px';
    o2.style.top     = parseInt(cba.dst.y-7)+'px';
    o2.style.display = 'block';

    var o3 = document.getElementById('cb_shadow5');
    o3.style.width   = parseInt(cba.dst.w-32)+'px';
    o3.style.height  = parseInt(cba.dst.h-28)+'px';
}


// hide controls
function cb_hide_controls()
{
	document.getElementById('cb_closebox').style.display = 'none';
	document.getElementById('cb_loadbox').style.display  = 'none';
	document.getElementById('cb_shadow').style.display = 'none';
	document.getElementById('cb_iframe').onclick = null;
}


// get pixel position of any element on a page
function cb_position(o)
{
	var x = 0;
	var y = 0;
	do
	{
        x += o.offsetLeft;
        y += o.offsetTop;
	} while (o = o.offsetParent)

	return Array(x, y);
}


// set opacity of any element, use (element.style, 0-100)
function cb_opacity(o, p)
{
	var pInt       = Math.ceil(p);
	o.filter       = 'Alpha(opacity='+pInt+')';
	o.MozOpacity   = '' + pInt/100;
	o.KTHMLOpacity = '' + pInt/100;
	o.opacity      = '' + pInt/100;
}


// convert with sinus-function for smoother animation
function cb_magic(pos)
{
	return ((-Math.cos(pos*Math.PI)/2) + 0.5);
}