(function(){
var ie = !!window.attachEvent;
var cover;
var box;
var closetop;
var resourcePath = "http://intra.unblu.ch/www.unblu.com/"

var openDemo = function() {
	document.location.href = "http://demo.unblu.com";
}
var hideDemoBox = function() {
	document.body.removeChild(cover);
	document.body.removeChild(box);
	document.body.removeChild(closetop);
}

var showDemoBox = function() {
	cover = document.createElement("div");
	cover.style.backgroundColor = "black";
	cover.style.zIndex = "9999";
	cover.style.position = "absolute";
	cover.style.left = "0px";
	cover.style.top = "0px";
	if (!ie) {
		cover.style.position = "fixed";
		cover.style.right = "0px";
		cover.style.bottom = "0px";
	} else {
		
	}
	setOpacity(cover, 0.0);
	
	document.body.appendChild(cover);

	drawBox();
	layoutDemoBox();
	fadeIn();
}

var drawBox = function() {
	closetop = document.createElement("div");
	closetop.style.position = "absolute";
	closetop.style.zIndex = "999999";
	closetop.style.top = "100px";
	closetop.style.left = "100px";
	closetop.style.width = "41px";
	closetop.style.height = "41px";
	closetop.style.cursor = "pointer";
	setBackgroundImage(closetop, resourcePath + "closetop.png");
//	closetop.style.backgroundImage = "url(" + resourcePath + "closetop.png)";
	document.body.appendChild(closetop);
	$_jsutil.dom_addEventListener(closetop, "click", hideDemoBox);
		
	box = document.createElement("div");
	box.style.position = "absolute";
	box.style.zIndex = "99999";
	box.style.top = "100px";
	box.style.left = "100px";
	box.style.width = "471px";
	box.style.height = "354px";
	
	var top = document.createElement("div");
	top.style.position = "absolute";
	top.style.top = "0px";
	top.style.left = "0px";
	top.style.width = "471px";
	top.style.height = "15px";
	top.style.fontSize = "0px";
//	top.style.border = "solid red 1px";
	setBackgroundImage(top, resourcePath + "top.png");
//	top.style.backgroundImage = "url(" + resourcePath + "top.png)";
	
	box.appendChild(top);
	
	var center = document.createElement("div");
	center.style.position = "absolute";
	center.style.top = "15px";
	center.style.left = "0px";
	center.style.width = "471px";
	center.style.height = "324px";
//	center.style.border = "solid red 1px";
	setBackgroundImage(center, resourcePath + "center.png");
//	center.style.backgroundImage = "url(" + resourcePath + "center.png)";	
	
	box.appendChild(center);
	
	var bottom = document.createElement("div");
	bottom.style.position = "absolute";
	bottom.style.top = "339px";
	bottom.style.left = "0px";
	bottom.style.width = "471px";
	bottom.style.height = "15px";
	bottom.style.fontSize = "0px";
//	bottom.style.border = "solid red 1px";
	setBackgroundImage(bottom, resourcePath + "bottom.png");
//	bottom.style.backgroundImage = "url(" + resourcePath + "bottom.png)";
	
	box.appendChild(bottom);
	
	var text = document.createElement("div");
	text.style.position = "absolute";
	text.style.top = "30px";
	text.style.left = "30px";
	text.style.width = "411px";
	text.style.height = "294px";
//	text.style.border = "solid red 1px";
	text.style.textAlign = "center";
	text.style.fontFamily = "Arial, Helvetica, sans-serif";
	text.style.fontSize = "12px";
	text.style.color = "rgb(96, 99, 102)";
	box.appendChild(text);
	
	
	var h2 = document.createElement("div");
	h2.style.fontSize = "17px";
	h2.style.marginBottom = "25px";
	h2.style.marginTop = "10px";

	h2.innerHTML = "Welcome to unblu.com!"
	text.appendChild(h2);
	
	var p = document.createElement("div");	
	p.innerHTML = '<p>Gold for Technology, Gold for Innovation, Gold for Business Efficiency, and Bronze for Usability: unblu has been awarded by <a href="http://www.bestofswissweb.ch/kategoriensieger20102010" target="_blank">Best of Swiss Web 2010</a>.</p><br><p>Thank you for the flowers!</p><br>';
	p.innerHTML += ' Please take the time and enjoy our online demo by clicking the "demo" button below. '
	p.style.marginBottom = "20px";
	p.style.textAlign = "left";
	text.appendChild(p);
	
	p = document.createElement("div");	
	p.innerHTML = "Continue to the homepage, if you're interested in our first class co-browsing solution called <b>unblu</b> and the company behind it."
	p.style.textAlign = "left";
	p.style.marginBottom = "20px";
	text.appendChild(p);
	
	
	var demo = document.createElement("div");
	demo.style.position = "absolute";
	demo.style.top = "260px";
	demo.style.left = "65px";
	demo.style.width = "125px";
	demo.style.height = "33px";	
	demo.style.cursor = "pointer";
	setBackgroundImage(demo, resourcePath + "demo.png");
//	demo.style.backgroundImage = "url(" + resourcePath + "demo.png)";
	box.appendChild(demo);
	$_jsutil.dom_addEventListener(demo, "click", openDemo);	
	
	var close = document.createElement("div");
	close.style.position = "absolute";
	close.style.top = "260px";
	close.style.left = "270px";
	close.style.width = "125px";
	close.style.height = "33px";	
	close.style.cursor = "pointer";
	setBackgroundImage(close, resourcePath + "close.png");	
//	close.style.backgroundImage = "url(" + resourcePath + "close.png)";
	box.appendChild(close);
	
	$_jsutil.dom_addEventListener(close, "click", hideDemoBox);
		
	document.body.appendChild(box);
}

var fadeStart;
var fadeDuration = 1000;
var fadeSleep = 30;
var fadeOpacity = 0.7;
var fadeDirection;
var fadeIn = function() {
	fadeDirection = "in";
	fadeStart = new Date().getTime();
	fadeStep();
}
var fadeOut = function() {
	fadeDirection = "out";
	fadeStart = new Date().getTime();
	fadeStep();
}

var fadeStep = function() {
	var now = new Date().getTime();
	var elapsed = now - fadeStart;
	var pos = elapsed / fadeDuration;
	
	var posEnd = 1;	
	if (fadeDirection == "out") {
		posEnd = 0;
		pos = 1 - pos;
	}
	if (pos < 0) pos = 0;
	if (pos > 1) pos = 1;
	var opa = pos * fadeOpacity;
	setOpacity(cover, opa);
	
	if (pos == posEnd) return;
	window.setTimeout(fadeStep, fadeSleep);
}



var setOpacity = function(element, opacity) {
	if (ie) {
		element.style.filter = "alpha(opacity = " + (opacity * 100) + ");";
	} else {
		element.style.opacity = "" + opacity;
	}
}

var setBackgroundImage = function(element, url) {
	if (ie) {
		element.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + url + "', sizingMethod='scale')";	
	} else {
		element.style.backgroundImage = "url(" + url + ")";		
	}

	
	//
}

var layoutDemoBox = function() {
	var width;
	if(typeof( window.innerWidth ) == 'number') width =  window.innerWidth; 
	else {
		width = document.body.clientWidth;
	}

	var height;
	if(typeof( window.innerHeight ) == 'number') height =  window.innerHeight; 
	else {
		height = document.body.clientHeight;
	}	
	
	if (ie) {
		cover.style.width = width + "px";		
		cover.style.height = height + "px";
	}
	
	var boxleft = (width - 471) / 2;
	var boxtop = (height - 354) / 2;
	boxtop = 130;
	
	box.style.left =  boxleft + "px";
	box.style.top =  boxtop + "px";	
	
	var closetopleft = boxleft + 444;
	var closetoptop = boxtop - 15;
	
	closetop.style.top = closetoptop + "px";
	closetop.style.left = closetopleft + "px";
	
}

$_jsutil.dom_addEventListener(window, "load", showDemoBox);
$_jsutil.dom_addEventListener(window, "resize", layoutDemoBox);

})();