var frameTop         = new Array();
var frameTopLeft     = new Array();
var frameTopRight    = new Array();
var frameBottom      = new Array();
var frameBottomLeft  = new Array();
var frameBottomRight = new Array();
var frameLeft        = new Array();
var frameRight       = new Array();

function preload(frameIds)
{
	var path = "http://www.fantastic-pictures.de/images/layout/enframe/";
	
	for (i=0;i<frameIds.length;i++) {
		frameTop[frameIds[i]] = new Image();
		frameTop[frameIds[i]].src = path+frameIds[i]+"-top.jpg";
		frameTopRight[frameIds[i]] = new Image();
		frameTopRight[frameIds[i]].src = path+frameIds[i]+"-top-right.jpg";
		frameTopLeft[frameIds[i]] = new Image();
		frameTopLeft[frameIds[i]].src = path+frameIds[i]+"-top-left.jpg";

		frameLeft[frameIds[i]] = new Image();
		frameLeft[frameIds[i]].src = path+frameIds[i]+"-left.jpg";

		frameRight[frameIds[i]] = new Image();
		frameRight[frameIds[i]].src = path+frameIds[i]+"-right.jpg";


		frameBottom[frameIds[i]] = new Image();
		frameBottom[frameIds[i]].src = path+frameIds[i]+"-bottom.jpg";

		frameBottomRight[frameIds[i]] = new Image();
		frameBottomRight[frameIds[i]].src = path+frameIds[i]+"-bottom-right.jpg";

		frameBottomLeft[frameIds[i]] = new Image();
		frameBottomLeft[frameIds[i]].src = path+frameIds[i]+"-bottom-left.jpg";
		frameTopLeft[frameIds[i]].src = path+frameIds[i]+"-top-left.jpg";
	}
}

function changePreviewBg(col) {
	document.getElementById('preview').style.background = col;
}

function number_format(number, decimals, dec_point,thousands_sep) {
	number = Math.round( number * Math.pow(10, decimals ) ) / Math.pow(10, decimals );
	str_number = number+"";
	arr_int = str_number.split(".");
	if (!arr_int[0]) arr_int[0] = "0";
	if (!arr_int[1]) arr_int[1] = "";
	if (arr_int[1].length < decimals ) {
		nachkomma = arr_int[1];
		for (i=arr_int[1].length+1; i <= decimals ; i++) {
			nachkomma += "0";  
		}
		arr_int[1] = nachkomma;
	}
	if (thousands_sep != "" && arr_int[0].length > 3) {
			Begriff = arr_int[0];
		arr_int[0] = "";
		for (j = 3; j < Begriff.length ; j+=3) {
			Extrakt = Begriff.slice(Begriff.length - j, Begriff.length - j + 3);
			arr_int[0] = thousands_sep + Extrakt +  arr_int[0] + "";
		}
		str_first = Begriff.substr(0, (Begriff.length % 3 == 0)?3:(Begriff.length % 3));
		arr_int[0] = str_first + arr_int[0];
	}
	return arr_int[0]+dec_point+arr_int[1];
}

function changeFrame(frameId, imgWidth, fidPage) {
	document.getElementById('preview-frame-top-left').style.height = frameTop[frameId].height+"px";
	document.getElementById('preview-frame-top-left').style.width = frameTopLeft[frameId].width+"px";
	document.getElementById('preview-frame-top-left').style.background = "url("+frameTopLeft[frameId].src+")";
	document.getElementById('preview-frame-top').style.height = frameTop[frameId].height+"px";
	document.getElementById('preview-frame-top').style.width = (frameTopRight[frameId].width*2)+imgWidth+"px";
	document.getElementById('preview-frame-top').style.background = "url("+frameTop[frameId].src+")";
	document.getElementById('preview-frame-top-right').style.height = frameTop[frameId].height+"px";
	document.getElementById('preview-frame-top-right').style.width = frameTopRight[frameId].width+"px";
	document.getElementById('preview-frame-top-right').style.background = "url("+frameTopRight[frameId].src+")";

	if (document.all) {
		document.getElementById('preview-frame-sided').style.paddingLeft = (frameLeft[frameId].width-1)+"px";
	} else {
		document.getElementById('preview-frame-sided').style.paddingLeft = frameLeft[frameId].width+"px";
	}
	document.getElementById('preview-frame-sided').style.background = "url("+frameLeft[frameId].src+") repeat-y";
	if (document.all) {
		document.getElementById('preview-frame-sided').style.paddingRight = (frameRight[frameId].width-1)+"px";
	} else {
		document.getElementById('preview-frame-sided').style.paddingRight = frameRight[frameId].width+"px";
	}
	document.getElementById('preview-frame-right').style.width = frameRight[frameId].width+"px";
	document.getElementById('preview-frame-right').style.background = "url("+frameRight[frameId].src+") repeat-y";

	document.getElementById('preview-frame-bottom-left').style.height = frameBottom[frameId].height+"px";
	document.getElementById('preview-frame-bottom-left').style.width = frameBottomLeft[frameId].width+"px";
	document.getElementById('preview-frame-bottom-left').style.background = "url("+frameBottomLeft[frameId].src+")";
	document.getElementById('preview-frame-bottom').style.height = frameBottom[frameId].height+"px";
	document.getElementById('preview-frame-bottom').style.width = (frameBottomLeft[frameId].width+frameBottomRight[frameId].width)+imgWidth+"px";
	document.getElementById('preview-frame-bottom').style.background = "url("+frameBottom[frameId].src+")";
	document.getElementById('preview-frame-bottom-right').style.height = frameBottom[frameId].height+"px";
	document.getElementById('preview-frame-bottom-right').style.width = frameBottomRight[frameId].width+"px";
	document.getElementById('preview-frame-bottom-right').style.background = "url("+frameBottomRight[frameId].src+")";

	document.getElementById('order-frame-id').value = fidPage;
	
	var pricePicture = document.getElementById('price-picture').innerHTML;
	pricePicture = parseFloat(pricePicture.replace(",", "."));
	
	var priceFrame = (document.getElementById('p-'+frameId).innerHTML);
	priceFrame = parseFloat(priceFrame.replace(",", "."));	
	
	var priceTotal = pricePicture + priceFrame;
	priceTotal = priceTotal - priceTotal*0.1;
	
	document.getElementById('price-total').innerHTML = number_format(priceTotal, 2, ',', '');
	document.getElementById('combinationStr').style.display = 'inline';
}

var toolTipLib = { 
	xCord : 0,
	yCord : 0,
	obj : null,
	tipElements : ['img','em'],
	attachToolTipBehavior: function() {
		if ( !document.getElementById ||
			!document.createElement ||
			!document.getElementsByTagName ) {
			return;
		}
		var i,j;
		addEvent(document,'mousemove',toolTipLib.updateXY,false);
		if ( document.captureEvents ) {
				document.captureEvents(Event.MOUSEMOVE);
		}
		for ( i=0;i<toolTipLib.tipElements.length;i++ ) {
			var current = document.getElementsByTagName(toolTipLib.tipElements[i]);
			for ( j=0;j<current.length;j++ ) {
				addEvent(current[j],'mouseover',toolTipLib.tipOver,false);
				addEvent(current[j],'mouseout',toolTipLib.tipOut,false);
				current[j].setAttribute('tip',current[j].title);
				current[j].removeAttribute('title');
			}
		}
	},
	updateXY : function(e) {
		if ( document.captureEvents ) {
			toolTipLib.xCord = e.pageX;
			toolTipLib.yCord = e.pageY;
		} else if ( window.event.clientX ) {
			toolTipLib.xCord = window.event.clientX+document.documentElement.scrollLeft;
			toolTipLib.yCord = window.event.clientY+document.documentElement.scrollTop;
		}
	},
	tipOut: function(e) {
		if ( window.tID ) {
			clearTimeout(tID);
		}
		if ( window.opacityID ) {
			clearTimeout(opacityID);
		}
		var l = getEventSrc(e);
		var div = document.getElementById('toolTip');
		if ( div ) {
			div.parentNode.removeChild(div);
		}
	},
	checkNode : function(obj) {
		var trueObj = obj;
		if (trueObj.nodeName.toLowerCase() == 'img' || trueObj.nodeName.toLowerCase() == 'em') {
			return trueObj;
		} else {
			return trueObj.parentNode;
		}
	},
	tipOver : function(e) {
		toolTipLib.obj = getEventSrc(e);
		tID = setTimeout("toolTipLib.tipShow()",500)
	},
	tipShow : function() {
		var newDiv = document.createElement('div');
		var scrX = Number(toolTipLib.xCord);
		var scrY = Number(toolTipLib.yCord);
		var tp = parseInt(scrY+15);
		var lt = parseInt(scrX+10);
		var anch = toolTipLib.checkNode(toolTipLib.obj);
		var addy = '';
		var access = '';
		var tip = '';
		newDiv.id = 'toolTip';
		document.getElementsByTagName('body')[0].appendChild(newDiv);
		newDiv.style.opacity = '.1';
		tip = anch.getAttribute('tip');
		if (tip == '') {
			tip = anch.innerHTML;
		}
		
		newDiv.innerHTML = "<p>"+tip+"</p>";
		if ( parseInt(document.documentElement.clientWidth+document.documentElement.scrollLeft) < parseInt(newDiv.offsetWidth+lt) ) {
			newDiv.style.left = parseInt(lt-(newDiv.offsetWidth+10))+'px';
		} else {
			newDiv.style.left = lt+'px';
		}
		if ( parseInt(document.documentElement.clientHeight+document.documentElement.scrollTop) < parseInt(newDiv.offsetHeight+tp) ) {
			newDiv.style.top = parseInt(tp-(newDiv.offsetHeight+10))+'px';
		} else {
			newDiv.style.top = tp+'px';
		}
		toolTipLib.tipFade('toolTip',10);
	},
	tipFade: function(div,opac) {
		var obj = document.getElementById(div);
		var passed = parseInt(opac);
		var newOpac = parseInt(passed+10);
		if ( newOpac < 99 ) {
			obj.style.opacity = '.'+newOpac;
			obj.style.filter = "alpha(opacity:"+newOpac+")";
			opacityID = setTimeout("toolTipLib.tipFade('toolTip','"+newOpac+"')",20);
		}
		else { 
			obj.style.opacity = '.99';
			obj.style.filter = "alpha(opacity:99)";
		}
	}
};

function addEvent(elm, evType, fn, useCapture) {
	if (elm.addEventListener) { 
	elm.addEventListener(evType, fn, useCapture); 
	return true; 
	}
	else if (elm.attachEvent) { 
	var r = elm.attachEvent('on' + evType, fn); 
	EventCache.add(elm, evType, fn);
	return r; 
	}
	else {
	elm['on' + evType] = fn;
	}
};
function getEventSrc(e) {
	if (!e) e = window.event;

	if (e.originalTarget)
	return e.originalTarget;
	else if (e.srcElement)
	return e.srcElement;
};
function addLoadEvent(func) {
var oldonload = window.onload;
	if (typeof window.onload != 'function') {
	window.onload = func;
	} else {
	window.onload = 
		function() {
		oldonload();
		func();
		}
	}
};
var EventCache = function(){
	var listEvents = [];
	return {
		listEvents : listEvents,
	
		add : function(node, sEventName, fHandler, bCapture){
			listEvents.push(arguments);
		},
	
		flush : function(){
			var i, item;
			for(i = listEvents.length - 1; i >= 0; i = i - 1){
				item = listEvents[i];
				
				if(item[0].removeEventListener){
					item[0].removeEventListener(item[1], item[2], item[3]);
				};
				
				/* From this point on we need the event names to be prefixed with 'on" */
				if(item[1].substring(0, 2) != "on"){
					item[1] = "on" + item[1];
				};
				
				if(item[0].detachEvent){
					item[0].detachEvent(item[1], item[2]);
				};
				
				item[0][item[1]] = null;
			};
		}
	};
}();

addEvent(window, 'load', toolTipLib.attachToolTipBehavior, false);
addEvent(window, 'unload', EventCache.flush, false);