// ***********************************************************************************
// DWILB v1.0
//
// by Johannes Niessen - http://www.designwerkstatt.be
// Last Modification: 5/10/08
//
// For more information, visit:
// http://www.designwerkstatt.be/projekte/dwilb
//
// Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
//  - Free for use in both personal and commercial projects
//	- Attribution requires leaving author name, author link, and the license info intact.
//	
// Thanks: Lokesh Dhakar (lokeshdhakar.com) for inspiration.


// ***********************************************************************************
// WINDOW MESSSOURES

var dwilb_windowMessures = {width: 0, height: 0 ,centerX: 0, centerY: 0};
function dwilb_getWindowMessures()
{
	// ******************************* GET SIZE
	
	// IE
	if(!window.innerWidth)
	{
		//strict mode
		if(!(document.documentElement.clientWidth == 0))
		{
			dwilb_windowMessures.width = document.documentElement.clientWidth;
			dwilb_windowMessures.height = document.documentElement.clientHeight;
		}
		//quirks mode
		else
		{
			dwilb_windowMessures.width = document.body.clientWidth;
			dwilb_windowMessures.height = document.body.clientHeight;
		}
	}
	//w3c
	else
	{
		dwilb_windowMessures.width = window.innerWidth;
		dwilb_windowMessures.height = window.innerHeight;
	}
	
	// ******************************* GET CENTER
	
	var dwilb_offsetX = 0;
	var dwilb_offsetY = 0;
	
	//IE
	if(!window.pageYOffset)
	{
		//strict mode
		if(!(document.documentElement.scrollTop == 0))
		{
			dwilb_offsetY = document.documentElement.scrollTop;
			dwilb_offsetX = document.documentElement.scrollLeft;
		}
		//quirks mode
		else
		{
			dwilb_offsetY = document.body.scrollTop;
			dwilb_offsetX = document.body.scrollLeft;
		}
	}
	//w3c
	else
	{
		dwilb_offsetX = window.pageXOffset;
		dwilb_offsetY = window.pageYOffset;
	}

	dwilb_windowMessures.centerX = (dwilb_windowMessures.width/2)+dwilb_offsetX;
	dwilb_windowMessures.centerY = (dwilb_windowMessures.height/2)+dwilb_offsetY;
}

// ***********************************************************************************
// EASED OUT STEPS

function dwilb_easeOut(s,e,vario){
	var step = -(s-e)/vario;
	return step;
}

var dwilb_steps = new Array();
function dwilb_getSteps(s,e,vario){
	var resizeSteps = new Array();
	var i=0;
	var o = s//s+dwilb_easeOut(s,e,vario);
	if(s<e){
		for(o; o<e; o += dwilb_easeOut(o,e,vario)){
			resizeSteps[i] = o;
			i++;
			if((e-o) < 1) return resizeSteps;
		}
	}else{
		for(o; o>e; o += dwilb_easeOut(o,e,vario)){
			resizeSteps[i] = o;
			i++;
			if((o-e) < 1) return resizeSteps;
		}
	}
}

// ***********************************************************************************
// SET VARS AND RESIZE
 
var dwilb_stepCount = 0;
var dwilb_distY = 0;
var dwilb_distX = 0;

function dwilb_setVars(){

	dwilb_stepCount = 0;
	dwilb_sistH = dwilb_final.height - dwilb_tmb.height;
	dwilb_sistW = dwilb_final.width - dwilb_tmb.width;
	dwilb_distY = dwilb_tmb.top - (dwilb_windowMessures.centerY-(dwilb_final.height/2));
	dwilb_distX = dwilb_tmb.left - (dwilb_windowMessures.centerX-(dwilb_final.width/2));
	
	if(dwilb_final.width > dwilb_final.height){
		dwilb_steps = dwilb_getSteps(dwilb_tmb.width,dwilb_final.width,2);
	}else{
		dwilb_steps = dwilb_getSteps(dwilb_tmb.height,dwilb_final.height,2);
	}
	dwilb_resize();
}

function dwilb_resize(){
	if(dwilb_stepCount < dwilb_steps.length-1){
		
		if(dwilb_final.height > dwilb_final.width){
			var ver_size = dwilb_final.width/dwilb_final.height;
			
			dwilb_layer.style.height = dwilb_steps[dwilb_stepCount]+'px';
			dwilb_layer.style.width = (dwilb_steps[dwilb_stepCount]*ver_size)+'px';
	
			var dwilb_point = dwilb_steps[dwilb_stepCount] - dwilb_tmb.height;
			var dwilb_proz = (100 / dwilb_sistH) * dwilb_point;
			
		}else{
			var ver_size = dwilb_final.height/dwilb_final.width;
			
			dwilb_layer.style.width = dwilb_steps[dwilb_stepCount]+'px';
			dwilb_layer.style.height = (dwilb_steps[dwilb_stepCount]*ver_size)+'px';
			
			var dwilb_point = dwilb_steps[dwilb_stepCount] - dwilb_tmb.width;
			var dwilb_proz = (100 / dwilb_sistW) * dwilb_point;
			
		}
		
		var dwilb_y = dwilb_tmb.top - ((dwilb_distY/100) * dwilb_proz);
		var dwilb_x = dwilb_tmb.left - ((dwilb_distX/100) * dwilb_proz);
		
		dwilb_layer.style.left = dwilb_x+'px';
		dwilb_layer.style.top = dwilb_y+'px';
		
		dwilb_stepCount++;
		dwilb_layer.style.display = 'block';
		
		dwilb_int = window.setTimeout('dwilb_resize()',40);
		
	}else{
		dwilb_finish();
	}
}

// ***********************************************************************************
// SHOW THE REZISED IMAGE
var dwilb_is_finish = false;
var dwilb_frameThickness = 0;
function dwilb_finish(){
	var dwilb_finalWidth = (dwilb_frameThickness*2)+dwilb_final.width;
	var dwilb_finalHeight = (dwilb_frameThickness*2)+dwilb_final.height;
	dwilb_layer.style.width = dwilb_finalWidth+'px';
	dwilb_layer.style.height = dwilb_finalHeight+'px';
	
	dwilb_layer.style.top = (dwilb_windowMessures.centerY-(dwilb_finalHeight/2))+'px';
	dwilb_layer.style.left = (dwilb_windowMessures.centerX-(dwilb_finalWidth/2))+'px';
	dwilb_layer.style.backgroundImage = 'url('+dwilb_image.src+')';
	dwilb_layer.style.border = 'none';
	dwilb_layer.style.backgroundColor = 'transparent';
	//dwilb_layer.innerHTML = dwilb_FrameHtml;
	//dwilb_imageHolder.appendChild(dwilb_image);
	
	window.clearTimeout(dwilb_int);
	dwilb_fadeIn(100,5);
	dwilb_close_btn.style.visibility = 'visible';
	dwilb_is_finish = true;
	
	
}

function dwilb_fadeIn(opac,steps){ 
	if(dwilb_layer.style.opacity){
		var clipOpacity = parseFloat(dwilb_layer.style.opacity)*100;
	}else if(dwilb_layer.style.MozOpacity){
		var clipOpacity = parseFloat(dwilb_layer.style.MozOpacity)*100;
	}else if(dwilb_layer.style.KhtmlOpacity){
		var clipOpacity = parseFloat(dwilb_layer.style.KhtmlOpacity)*100;
	}else if(dwilb_layer.filters.alpha.opacity){
		var clipOpacity = parseFloat(dwilb_layer.filters.alpha.opacity);
	}
	if(clipOpacity < opac){
		var step = 100/steps;
		var newOpac = clipOpacity+step;
		
		dwilb_layer.style.opacity = (newOpac / 100);
		dwilb_layer.style.MozOpacity = (newOpac / 100);
		dwilb_layer.style.KhtmlOpacity = (newOpac / 100);
		dwilb_layer.style.filter = "alpha(opacity=" + newOpac + ")";

		dwilb_int = setTimeout("dwilb_fadeIn(100,5)",40);
	}
}

// ***********************************************************************************
// PLACE THE LAYER UPON THE THUMB

function dwilb_placeLayer(obj){
	dwilb_tmb = dwilb_getOffset(obj)
	dwilb_tmb.width = obj.width;
	dwilb_tmb.height = obj.height;
	
	dwilb_layer.style.width = dwilb_tmb.width+'px';
	dwilb_layer.style.height = dwilb_tmb.height+'px';
	dwilb_layer.style.top = dwilb_tmb.top+'px';
	dwilb_layer.style.left = dwilb_tmb.left+'px';
	dwilb_layer.style.border = '1px solid #fff';
	dwilb_layer.style.backgroundColor = '#000';
}

// ***********************************************************************************
// LOAD THE IMAGE AND START THE RESIZING 

var dwilb_image = null;
function dwilb_loadImage(obj){
	
	
	dwilb_final.src = obj.lowsrc;
	dwilb_final.alt = obj.alt;
	
	dwilb_image = null;
	dwilb_image = new Image();
	dwilb_image.onload = function(){
		dwilb_final.width = dwilb_image.width;
		dwilb_final.height = dwilb_image.height;
		if(dwilb_final.width != 0 && dwilb_final.width != null){ // Opera läd auch nicht gefundene dateien
			dwilb_setVars();
		}
	}
	dwilb_image.src = obj.lowsrc;
}

// ***********************************************************************************
// COLLECT THE TART FUNTIONS

function dwilb_start(obj){
	dwilb_reset();
	dwilb_getWindowMessures();
	dwilb_placeLayer(obj);
	dwilb_loadImage(obj);
}

// ***********************************************************************************
// RESET

function dwilb_stop(){
	if(!dwilb_over){
		dwilb_reset();
	}
}

function dwilb_reset(){
	window.clearTimeout(dwilb_int);
	dwilb_layer.style.backgroundImage = '';
	dwilb_layer.style.display = 'none';
//.innerHTML = '';
	dwilb_layer.style.opacity = 0.3; 
	dwilb_layer.style.filter = 'alpha(opacity=30)'; 
	dwilb_layer.style.MozOpacity = 0.3;
	dwilb_close_btn.style.visibility = 'hidden';
	dwilb_is_finish = false;
	
}

// ***********************************************************************************
// INIT THE DWILB

var dwilb_imgs = new Array()
var dwilb_layer;
var dwilb_tmb = Object();
var dwilb_final = Object();
var dwilb_int;
var dwilb_over = false;
var dwilb_close_btn;

function dwilb_init(){

	var imgs = Array(),i = Number();
	imgs = document.getElementsByTagName('img');
	for(i=0;i<imgs.length;i++){
		var img = imgs[i];
		if(img.className == "dwilb"){
			dwilb_imgs.push(img);
			img.onclick=function(){dwilb_start(this);};
			img.style.cursor = "hand";
			img.style.cursor = "pointer";
		//img.title = HLTxtOut[HLLang][0];
		}
	}
	
	var dwilb_path = 'http://slater.be/bilder/dwilb/';
	var HTMLScriptElements = document.getElementsByTagName("script");
	for (var i=0; i<HTMLScriptElements.length; i++) {
	 	if (HTMLScriptElements[i].src.match(/(.*)?dwilb.js$/)) 
		dwilb_path = RegExp.$1;
		dwilb_path = 'http://slater.be/bilder/dwilb/';
	}
	
	dwilb_layer = document.getElementById('dwilb_layer');
	dwilb_layer.innerHTML += dwilb_createFrame(dwilb_path+'img/',19);
	dwilb_close_btn = document.getElementById('dwilb_close_btn');
	dwilb_layer.onmouseover=function(){dwilb_mouse_over()};
	dwilb_layer.onmouseout=function(){dwilb_mouse_out()};
	dwilb_over=true;

}

dwilb_addEvent(window, "load", dwilb_init, false);
dwilb_addEvent(window, "click", dwilb_stop, false);


// ***********************************************************************************
// ROLLOVER ROLLOUT

function dwilb_mouse_over(){
	dwilb_over=true;
	if(dwilb_is_finish){
		dwilb_close_btn.style.visibility = 'visible';
	}
}
function dwilb_mouse_out(){
	dwilb_over=false;
	if(dwilb_is_finish){
		dwilb_close_btn.style.visibility = 'hidden';
	}
}

// ***********************************************************************************
// MAINLAYER

var dwilb_layerHtml = '';
dwilb_layerHtml += '<div '; 
dwilb_layerHtml += 'id="dwilb_layer" '; 
dwilb_layerHtml += 'style="position:absolute; z-index:9; display:none; opacity: 0.3; filter: alpha(opacity=30); -moz-opacity: 30; top:20px; background-repeat:no-repeat; background-position:50% 50%; border:1px solid #fff; "';  
//dwilb_layerHtml += 'style="position:absolute; z-index:9; display:none; top:20px; background-repeat:no-repeat; background-position:50% 50%; border:1px solid #fff; "';  
dwilb_layerHtml += '>'; 
dwilb_layerHtml += '</div>';

document.write(dwilb_layerHtml);

/////////////////////////////////////////////////////////////////////////////////////////////////////////// Event Listener verwalten

function dwilb_addEvent(obj, eventType, myfunction, isCapture) {
	if(obj.addEventListener){ // W3C DOM
		obj.addEventListener(eventType, myfunction, isCapture);
	}else if(obj.attachEvent){ // Internet Explorer
		obj.attachEvent("on"+eventType, myfunction);
	}else{
		alert("No addEvent-Suport from this Browser");
	}
}


function dwilb_getOffset(obj){
	var coords = {left: 0, top: 0 };
	if(obj.offsetParent){
		while(1){
			coords.left += obj.offsetLeft;
			coords.top += obj.offsetTop;
			if(!obj.offsetParent){
				break;
			}
			obj = obj.offsetParent;
		}
	}else if(obj.y){
		coords.left += obj.x;
		coords.top += obj.y;
	}
	return coords;
}

// ***********************************************************************************
// PROVIDE PNG SUPPORT IF NESSESARY

var isIE = /MSIE/.test(navigator.userAgent);

function dwilb_addPngImage(dwilb_imgPath,dwilb_imgFile,dwilb_imgWidth,dwilb_imgHieght,dwilb_additional){
	var dwilb_imgHtml = '<img ';
	if(isIE){
		dwilb_imgHtml += 'src="'+dwilb_imgPath+'trans.gif" ';
		dwilb_imgHtml += 'style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+dwilb_imgPath+dwilb_imgFile+'\');" ';
	}else{
		dwilb_imgHtml += 'src="'+dwilb_imgPath+dwilb_imgFile+'" ';
	}
	if(dwilb_imgWidth != ''){
		dwilb_imgHtml += 'width="'+dwilb_imgWidth+'" ';
	}
	if(dwilb_imgHieght != ''){
		dwilb_imgHtml += 'height="'+dwilb_imgHieght+'" ';
	}
	if(dwilb_additional != ''){
		dwilb_imgHtml += dwilb_additional;
	}
	dwilb_imgHtml += '/>';
	
	return dwilb_imgHtml ;
}

function dwilb_addPngBgImage(dwilb_imgPath,dwilb_imgFile){
	var dwilb_imgHtml = '';
	if(isIE){
		dwilb_imgHtml += 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+dwilb_imgPath+dwilb_imgFile+'\',sizingMethod=\'scale\'); ';
	}else{
		dwilb_imgHtml += 'background-image:url('+dwilb_imgPath+dwilb_imgFile+'); ';
	}
	return dwilb_imgHtml ;
}

// ***********************************************************************************
// FRAME

function dwilb_createFrame(dwilb_asstesPathVar,frameThicknessVar){
	dwilb_frameThickness = frameThicknessVar;	
	
	var dwilb_FrameHtml = '';
	dwilb_FrameHtml += '<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" onclick="dwilb_over=false;dwilb_stop()">';
	dwilb_FrameHtml += '<tr>';
	dwilb_FrameHtml += '<td width="19" height="19"> ';
	dwilb_FrameHtml += dwilb_addPngImage(dwilb_asstesPathVar,'shaddow-tl.png',19,19,'');
	dwilb_FrameHtml += '</td>';
	dwilb_FrameHtml += '<td valign="top">';
	
	dwilb_FrameHtml += '<table width="100%" border="0" cellspacing="0" cellpadding="0">';
	dwilb_FrameHtml += '<tr>';
	dwilb_FrameHtml += '<td width="31"> ';
	dwilb_FrameHtml += dwilb_addPngImage(dwilb_asstesPathVar,'shaddow-tlc.png',31,19,'');
	dwilb_FrameHtml += '</td>';
	dwilb_FrameHtml += '<td style="';
	dwilb_FrameHtml += dwilb_addPngBgImage(dwilb_asstesPathVar,'shaddow-t.png');
	dwilb_FrameHtml += '"><img src="'+dwilb_asstesPathVar+'trans.gif"/></td>';
	dwilb_FrameHtml += '<td width="31">';
	dwilb_FrameHtml += dwilb_addPngImage(dwilb_asstesPathVar,'shaddow-trc.png',31,19,'');
	dwilb_FrameHtml += '</td>';
	dwilb_FrameHtml += '</tr>';
	dwilb_FrameHtml += '</table>';
	
	dwilb_FrameHtml += '</td>';
	dwilb_FrameHtml += '<td width="19" height="19">';
	dwilb_FrameHtml += dwilb_addPngImage(dwilb_asstesPathVar,'shaddow-tr.png',19,19,'');
	dwilb_FrameHtml += '</td>';
	dwilb_FrameHtml += '</tr>';
	dwilb_FrameHtml += '<tr>';
	dwilb_FrameHtml += '<td>';
	
	dwilb_FrameHtml += '<table height="100%" border="0" cellspacing="0" cellpadding="0">';
	dwilb_FrameHtml += '<tr>';
	dwilb_FrameHtml += '<td height="31">';
	dwilb_FrameHtml += dwilb_addPngImage(dwilb_asstesPathVar,'shaddow-ltc.png',19,31,'');
	dwilb_FrameHtml += '</td>';
	dwilb_FrameHtml += '</tr>';
	dwilb_FrameHtml += '<tr>';
	dwilb_FrameHtml += '<td style="';
	dwilb_FrameHtml += dwilb_addPngBgImage(dwilb_asstesPathVar,'shaddow-l.png');
	dwilb_FrameHtml += '"><img src="'+dwilb_asstesPathVar+'trans.gif"/></td>';
	dwilb_FrameHtml += '</tr>';
	dwilb_FrameHtml += '<tr>';
	dwilb_FrameHtml += '<td height="31">';
	dwilb_FrameHtml += dwilb_addPngImage(dwilb_asstesPathVar,'shaddow-lbc.png',19,31,'');
	dwilb_FrameHtml += '</td>';
	dwilb_FrameHtml += '</tr>';
	dwilb_FrameHtml += '</table>';
	
	dwilb_FrameHtml += '</td>';
	dwilb_FrameHtml += '<td align="right" valign="top" style="padding:10px;"><div id="dwilb_close_btn" style="" > ';
	dwilb_FrameHtml += dwilb_addPngImage(dwilb_asstesPathVar,'close_btn.png','','','onclick="dwilb_over=false;dwilb_stop()"');
	dwilb_FrameHtml += '</div></td>';
	dwilb_FrameHtml += '<td>';
	
	dwilb_FrameHtml += '<table height="100%" border="0" cellspacing="0" cellpadding="0">';
	dwilb_FrameHtml += '<tr>';
	dwilb_FrameHtml += '<td height="31">';
	dwilb_FrameHtml += dwilb_addPngImage(dwilb_asstesPathVar,'shaddow-rtc.png',19,31,'');
	dwilb_FrameHtml += '</td>';
	dwilb_FrameHtml += '</tr>';
	dwilb_FrameHtml += '<tr>';
	dwilb_FrameHtml += '<td style="';
	dwilb_FrameHtml += dwilb_addPngBgImage(dwilb_asstesPathVar,'shaddow-r.png');
	dwilb_FrameHtml += '"><img src="'+dwilb_asstesPathVar+'trans.gif"/></td>';
	dwilb_FrameHtml += '</tr>';
	dwilb_FrameHtml += '<tr>';
	dwilb_FrameHtml += '<td height="31">';
	dwilb_FrameHtml += dwilb_addPngImage(dwilb_asstesPathVar,'shaddow-rbc.png',19,31,'');
	dwilb_FrameHtml += '</td>';
	dwilb_FrameHtml += '</tr>';
	dwilb_FrameHtml += '</table>';
	
	dwilb_FrameHtml += '</td>';
	dwilb_FrameHtml += '</tr>';
	dwilb_FrameHtml += '<tr>';
	dwilb_FrameHtml += '<td width="19" height="19">';
	dwilb_FrameHtml += dwilb_addPngImage(dwilb_asstesPathVar,'shaddow-bl.png',19,19,'');
	dwilb_FrameHtml += '</td>';
	dwilb_FrameHtml += '<td valign="bottom">';
	
	dwilb_FrameHtml += '<table width="100%" border="0" cellspacing="0" cellpadding="0">';
	dwilb_FrameHtml += '<tr>';
	dwilb_FrameHtml += '<td width="31">';
	dwilb_FrameHtml += dwilb_addPngImage(dwilb_asstesPathVar,'shaddow-blc.png',31,19,'');
	dwilb_FrameHtml += '</td>';
	dwilb_FrameHtml += '<td style="';
	dwilb_FrameHtml += dwilb_addPngBgImage(dwilb_asstesPathVar,'shaddow-b.png');
	dwilb_FrameHtml += '"><img src="'+dwilb_asstesPathVar+'trans.gif"/></td>';
	dwilb_FrameHtml += '<td width="31">';
	dwilb_FrameHtml += dwilb_addPngImage(dwilb_asstesPathVar,'shaddow-brc.png',31,19,'');
	dwilb_FrameHtml += '</td>';
	dwilb_FrameHtml += '</tr>';
	dwilb_FrameHtml += '</table>';
	
	dwilb_FrameHtml += '</td>';
	dwilb_FrameHtml += '<td width="19" height="19">';
	dwilb_FrameHtml += dwilb_addPngImage(dwilb_asstesPathVar,'shaddow-br.png',19,19,'');
	dwilb_FrameHtml += '</td>';
	dwilb_FrameHtml += '</tr>';
	dwilb_FrameHtml += '</table>';
	
	return dwilb_FrameHtml;
}