var FloDes_Cache = new Array;
var FloDes_Container;
var FloDes_Baloon = "";
FloDes_Baloon += "<div id='Baloon' style='display: none; position: absolute; z-index: 100; left: 0px; top: 0px; width: 264px; height: 112px; border: solid 0px black; background: transparent url(i/baloon_bg.png) no-repeat left top;'>";
FloDes_Baloon += "</div>";
FloDes_BaloonData = "";
FloDes_BaloonData += "<div style='padding: 10px 20px 20px 10px;'>";
FloDes_BaloonData += "<b>%name%</b><br>";
FloDes_BaloonData += "%symbol%<br>";
FloDes_BaloonData += "<hr>";
FloDes_BaloonData += "%desc%";
FloDes_BaloonData += "</div>"
var FloDes_Container_All = "";
FloDes_Container_All += "<div id='FloDes_Container_All' style='position: relative; border: solid 1px red;'></div>";
var FloDes_Area = "";
FloDes_Area += "<div id='Area%symbol%' style='position: absolute; z-index: 100; left: %pos_x%px; top: %pos_y%px; width: %pos_w%px; height: %pos_h%; border: solid 0px black; background-color: transparent;' onMouseOut=\"%mouse_out%\" onMouseOver=\"%mouse_over%\">";
FloDes_Area += "<img src='i/n.gif' width='%pos_w%' height='%pos_h%'>";
FloDes_Area += "</div>";
ProdDataVariables = new Array(
	"name",
	"symbol",
	"desc",
	"pos_x",
	"pos_y",
	"pos_w",
	"pos_h",
	"mouse_over",
	"mouse_out"
);

function float_description( Data, ContainerID ){

	/**
	 * Elementy
	 */
	FloDes_Container = document.getElementById( "ZoomImageContainer" );
	//FloDes_Container.innerHTML = FloDes_Container_All;
	//FloDes_Container.style.backgroundImage = "url(img/"+Data["image"]+")";
	//FloDes_Container.style.display = "block";

	var ProdNo = 0;
	var Prod = 1;
	while( Prod ){

		Prod = Data[ProdNo];
		var AreaObject = FloDes_Area;

		if( Prod ){

			/* Pos */
			var Pos = Prod["pos"].split(",");
			for( var i = 0; i < Pos.length; i++ ){
				var Value = Pos[i].split(":");
				Prod["pos_"+Value[0]] = Number(Value[1]);
			}
			//Pros["pos_x"] += document.getElementById( "body" ).style.margin;
			//alert( document.getElementById( "Body" ).style.paddingTop );
			//if( OffsetX ) Prod["pos_x"] += OffsetX;
			//if( OffsetY ) Prod["pos_y"] += OffsetY;

			if( !Prod["name"] ){
				Prod["name"] = Prod["symbol"];
			}

			/* Mouse */
			Prod["mouse_out"] = "float_mouse( -1 );";
			Prod["mouse_over"] = "float_mouse( "+ProdNo+" );";

			/* Area - Variables */
			for( var i = 0; i < ProdDataVariables.length; i++ ){
				var Variable = ProdDataVariables[i];
				var ReplaceFrom = new RegExp( "%"+Variable+"%", "g" );
				AreaObject = AreaObject.replace( ReplaceFrom, Prod[Variable] );
			}

			FloDes_Cache["product"+ProdNo] = Prod;

			FloDes_Container.innerHTML += AreaObject;

			/* Area - Size */
			//FloDes_Cache["products"]["product"+ProdNo] = Prod;
		}
		ProdNo++;
	}

	//FloDes_Container.innerHTML += FloDes_Baloon;
	window.document.body.innerHTML += FloDes_Baloon;
	FloDes_Baloon_Container = document.getElementById( "Baloon" );

	// Set-up to use getMouseXY function onMouseMove
	document.onmousemove = getMouseXY;
}


var float_mouse_over = false;
function float_mouse( ProdNo ){

	if( ProdNo == -1 ){
		FloDes_Baloon_Container.style.display = "none";
		float_mouse_over = -1;
		return;
	}
	else{
		FloDes_Baloon_Container.style.display = "block";
		float_mouse_over = 1;
	}

	var Prod = FloDes_Cache["product"+ProdNo];
	var BaloonData = FloDes_BaloonData;

	/* Area - Symbol */
	for( var i = 0; i < ProdDataVariables.length; i++ ){
		var Variable = ProdDataVariables[i];
		var ReplaceFrom = new RegExp( "%"+Variable+"%", "g" );
		BaloonData = BaloonData.replace( ReplaceFrom, Prod[Variable] );
	}
	FloDes_Baloon_Container.innerHTML = BaloonData;
}

// Detect if the browser is IE or not.
// If it is not IE, we assume that the browser is NS.
var IE = document.all?true:false

// If NS -- that is, !IE -- then set up for mouse capture
if (!IE) document.captureEvents(Event.MOUSEMOVE)

// Temporary variables to hold mouse x-y pos.s
var tempX = 0
var tempY = 0

// Main function to retrieve mouse x-y pos.s

function getMouseXY(e) {
  if (IE) { // grab the x-y pos.s if browser is IE
    tempX = event.clientX + document.body.scrollLeft
    tempY = event.clientY + document.body.scrollTop
  } else {  // grab the x-y pos.s if browser is NS
    tempX = e.pageX
    tempY = e.pageY
  }  
  // catch possible negative values in NS4
  if (tempX < 0){tempX = 0}
  if (tempY < 0){tempY = 0}  

	/* WidnowSize */
	if (parseInt(navigator.appVersion)>3) {
	 if (navigator.appName=="Netscape") {
		var winW = window.innerWidth;
		var winH = window.innerHeight;
	 }
	 if (navigator.appName.indexOf("Microsoft")!=-1) {
		var winW = document.body.offsetWidth;
		var winH = document.body.offsetHeight;
	 }
	}

	/* InnerSize */
	if (parseInt(navigator.appVersion)>3) {
	 if (navigator.appName=="Netscape") {
		var innerW = window.innerWidth-16;
		var innerH = window.innerHeight-16;
	 }
	 if (navigator.appName.indexOf("Microsoft")!=-1) {
		var innerW = document.body.offsetWidth-20;
		var innerH = document.body.offsetHeight-20;
	 }
	}

	var FloDes_Baloon_Container_width = FloDes_Baloon_Container.style.width.replace( /px/, "" );
	FloDes_Baloon_Container_width = Number( FloDes_Baloon_Container_width );

	var FloDes_Baloon_Container_height = FloDes_Baloon_Container.style.height.replace( /px/, "" );
	FloDes_Baloon_Container_height = Number( FloDes_Baloon_Container_height );

	var FloDes_Container_x = FloDes_Container.style.left.replace( /px/, "" );
	FloDes_Container_x = Number( FloDes_Container_x );

	var FloDes_Container_y = FloDes_Container.style.top.replace( /px/, "" );
	FloDes_Container_y = Number( FloDes_Container_y );

	var FloDes_Container_w = FloDes_Container.style.width.replace( /px/, "" );
	FloDes_Container_w = Number( FloDes_Container_w );

	var FloDes_Container_h = FloDes_Container.style.height.replace( /px/, "" );
	FloDes_Container_h = Number( FloDes_Container_h );

	//tempX -= FloDes_Container_x;
	//tempY -= FloDes_Container_y;
	//tempX += FloDes_Container_w;
	//tempY += FloDes_Container_h;

	if( tempX + FloDes_Baloon_Container_width > innerW ){
		tempX -= ( FloDes_Baloon_Container_width + 13 );
	}
	if( tempY + FloDes_Baloon_Container_height > innerH ){
		tempY -= ( FloDes_Baloon_Container_height + 13 );
	}
	FloDes_Baloon_Container.style.left = tempX + 13;
	FloDes_Baloon_Container.style.top = tempY + 13;

  // show the position values in the form named Show
  // in the text fields named MouseX and MouseY
  return true
}