// $Id: nicewindow.js,v 1.2 2006/01/05 11:53:43 kcislo Exp $
// Janmedia Interactive

// default position in 3d
var NiceWindowZIndex = 50;
var currentNiceWindow = false;

function NiceWindow( windowTitle )
{
	var imageArray = new Array(); 	// images array
	var currentImage;				// current image
	var windowId = generateId(new Date);
	var isMoving = false;
	var zIndex = 100;
	var resetPosition = true;
	
	/* CONSTRUCTOR */
	
	createWindow(windowTitle, windowId);
	
	/*-------------------
		PUBLIC METHODS
	-------------------*/
	
	/*---------------------------------------------------------
		addImage
		params:
		- image: url
	---------------------------------------------------------*/
	this.addImage = function(image)
	{
		addImage(image);
	}
	
	/*---------------------------------------------------------
		showImage
		params:
		- event: pass event
		- image: image URL - image
		- resetPos: reset window position (optional)
		- resetMode: 0 - no reset, 1 - stick to cursor,
					  2 - move window to center (optional)
		- offsetX/Y: used only if resetPos = 1 and
					  resetMode = 1, distance from cursor
					  (optional)
	---------------------------------------------------------*/
	this.showImage = function( event, image , resetPos, resetMode, offsetX, offsetY )
	{
		var container = document.getElementById(windowId);
		
		if(resetPos || resetPosition)
		{
			if(!resetMode || resetMode == 1)
			{
				// if offset is undefined, set default values
				if(!offsetX) { offsetX = 10; }
				if(!offsetY) { offsetY = 10; }
				
				moveWindowToCursor(event, offsetX, offsetY);
			}
			else if(resetMode == 2)
				moveWindowToCenter();

			resetPosition = false;
		}
		
		container.style.display = "block";
		
		setImage(image);
		
		// create navigation only if there is at least 2 images
		if(imageArray.length > 1)
		{
			container.lastChild.style.display="block";
			createNavigation(image);
		}	
		else
			container.lastChild.style.display="none";

		return false;
	}
	
	/*-------------------
		PRIVATE METHODS
	-------------------*/
	function generateId(d)
	{
		var id = "window" + d.getSeconds() + d.getMilliseconds();
		while(document.getElementById(id))
		{
			id += "1";
		}
		return id;
	}
	
	function addImage(image)
	{
		for(var i = 0; i < imageArray.length; i++)
		{
			if(imageArray[i] == image)
				return;
		}
		imageArray[imageArray.length] = image;
	}
	
	function setImage(image)
	{
		addImage(image);
		var imageDiv = document.getElementById(windowId).getElementsByTagName("div").item(1);
		imageDiv.style.backgroundColor = "";
		imageDiv.style.backgroundPosition = "center";
		imageDiv.style.backgroundRepeat = "no-repeat";
		imageDiv.style.backgroundImage = "url(/converter?heightMax=" + (imageDiv.offsetHeight-20) + "&widthMax=" + (imageDiv.offsetWidth-20) + "&img="+ image +")";
	}
	
	function setImageByNo(no)
	{
		setImage(imageArray[no]);
	}
	
	function createWindow(windowTitle, windowId)
	{
		var container = document.createElement("div");
		container.onmousedown = getWindowUp;
		container.onmouseup = dropWindowDown;
		container.onselectstart = new Function("return false");
		container.setAttribute("id", windowId );
		container.className = "nice_window";
		
		var tmp = document.createElement("iframe");
		tmp.setAttribute("frameBorder","0")
		container.appendChild(tmp);
		
		var tmp = document.createElement("h3");
		tmp.innerHTML = windowTitle;
		container.appendChild(tmp);
		
		var tmp2 = document.createElement("span");
		tmp2.innerHTML = "Close";
		tmp = document.createElement("p");
		tmp.appendChild(tmp2);
		tmp.title = "Close";
		tmp.onmousemove = dontMoveWindow;
		tmp.onclick = hideWindow;
		container.appendChild(tmp);
		
		tmp2 = document.createElement("div");
		tmp2.className = "nice_window_src";
		tmp = document.createElement("div");
		tmp.className = "nice_window_src_bg";
		tmp.appendChild(tmp2);
		container.appendChild(tmp);
		
		tmp = document.createElement("div");
		tmp.className = "nice_window_browse";
		tmp.onmousemove = dontMoveWindow;
		container.appendChild(tmp);
		
		if(!document.getElementById("nicewindowparent")) return;
		
		document.getElementById("nicewindowparent").appendChild(container);

		// moving window		
		document.getElementsByTagName("body").item(0).onmousemove = followWindowByCursor;
		
		return container;
	}
	
	// container event methods
	function dontMoveWindow(e)
	{
		e = e||event;
		e.cancelBubble = true;
		currentNiceWindow = false;
		return false;
	}
	
	function hideWindow()
	{
		document.getElementById(windowId).style.display = "none";
	}
	
	// set window position
	function moveWindowToCursor(e, offsetX, offsetY)
	{
		containerStyle = document.getElementById(windowId).style;
		containerStyle.top = ( e.clientY + offsetY + getScrollY() ) + "px";
		containerStyle.left = ( e.clientX + offsetX ) + "px";
	}
	
	function moveWindowToCenter()
	{
		var container = document.getElementById(windowId);
		container.style.top = ( ( getScrollY() + (getScreenSize("height") / 2) ) - 175 ) + "px";
		container.style.left = ( (getScreenSize("width") / 2) - 175 ) + "px";
	}
	
	function getScreenSize(mode)
	{
		if (self.innerHeight) // all except Explorer
		{
			if(mode == 'width') return self.innerWidth;
			else return self.innerHeight;
		}
		else if (document.body) // other Explorers
		{
			if(mode == 'width') return ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth );
			else return  document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight;
		}
		return 0;
	}

	// not working in IE !!!	
	function getScrollY()
	{
		return parseInt( window.pageYOffset ? window.pageYOffset :
			 document.documentElement.scrollTop - 20 );
	}
	
	// navigation
	function createNavigation(actualImage)
	{
		var browseDiv = document.getElementById(windowId).getElementsByTagName("div").item(2);
		
		// clear navi
		clearElement(browseDiv);
		
		if(imageArray.length < 5)
		{
			for(var i = 0; i < imageArray.length; i++)
			{
				var currentImage = imageArray[i];
				var tmp = document.createElement("div");
				tmp.className = "navi_img";
				if(currentImage == actualImage) { tmp.className += " current" }
				tmp.img = currentImage;
				tmp.style.backgroundImage = "url(/converter?heightMax=20&widthMax=30&img="+ currentImage +")";
				tmp.style.backgroundPosition = "center";
				tmp.style.backgroundRepeat = "no-repeat";
				tmp.onclick = setImageByEvent; // !! hmm :)
				tmp.onmouseover = function() { this.className += " hover";  }
				tmp.onmouseout = function() { this.className = this.className.replace(" hover","");  }
				browseDiv.appendChild(tmp);
			}
		}
		else
		{
			var tmp = document.createElement("div");
			tmp.className = "navi_link";
			if(imageArray[0] == actualImage) tmp.className += " disabled";
			tmp.innerHTML = "previous";
			tmp.onclick = previousImage;
			tmp.onmouseover = function() { this.className += " hover";  }
			tmp.onmouseout = function() { this.className = this.className.replace(" hover","");  }
			browseDiv.appendChild(tmp);
			
			tmp = document.createElement("div");
			tmp.className = "navi_link";
			if(imageArray[imageArray.length - 1] == actualImage) tmp.className += " disabled";
			tmp.innerHTML = "next";
			tmp.onclick = nextImage;
			tmp.onmouseover = function() { this.className += " hover";  }
			tmp.onmouseout = function() { this.className = this.className.replace(" hover","");  }
			browseDiv.appendChild(tmp);
		}
		
		setImageArrayIndex(actualImage);
	}
	
	function clearElement(el)
	{
		while( el.childNodes.length != 0 )
		{
			el.removeChild ( el.childNodes.item(0) );
		}
	}
	 
	function setImageByEvent()
	{
		setImage(this.img);
		setImageArrayIndex(this.img);
		var browseImages = document.getElementById(windowId).getElementsByTagName("div").item(2).getElementsByTagName("div");
		
		for(var i = 0; i < browseImages.length; i++)
		{
			browseImages[i].className = browseImages[i].className.replace(" current", "");
		}
		
		this.className += " current";
	}
	
	function setImageArrayIndex(image)
	{
		for(var i = 0; i < imageArray.length; i++)
		{
			if(imageArray[i] == image)
			{
				currentImage = i;
				break;
			}
		}
	}
	
	function previousImage()
	{
		if(currentImage == 0) return;
		
		var tmp = document.getElementById(windowId).getElementsByTagName("div").item(2);
		tmp.getElementsByTagName("div").item(1).className = tmp.getElementsByTagName("div").item(1).className.replace("disabled", "");
		
		currentImage--;
		setImageByNo(currentImage);
		if(currentImage == 0)
		{
			tmp.getElementsByTagName("div").item(0).className += " disabled";
		}
	}
	
	function nextImage()
	{
		if(currentImage == imageArray.length - 1) return;
		
		var tmp = document.getElementById(windowId).getElementsByTagName("div").item(2);
		tmp.getElementsByTagName("div").item(0).className = tmp.getElementsByTagName("div").item(0).className.replace(" disabled", "");
		
		currentImage++;
		setImageByNo(currentImage);
		
		if(currentImage == imageArray.length - 1)
		{
			tmp.getElementsByTagName("div").item(1).className += " disabled";
		}
	}
	
	// move window
	
	function getWindowUp(e)
	{
		currentNiceWindow = windowId;
		e = e||event;
		
		var container = document.getElementById(windowId);
		container.style.position = "absolute";
		
		// alert(e.offsetY + container.offsetTop); 
		
		container.cursorX = e.pageX ? e.pageX - container.offsetLeft : e.offsetX;
		container.cursorY = e.pageY ? e.pageY - container.offsetTop  : e.offsetY;
		
		container.style.zIndex = NiceWindowZIndex++;
	}
	
	function dropWindowDown()
	{
		currentNiceWindow = false;
	}
	
	function addEvent(obj, evType, fn)
	{
		if(obj.addEventListener)
		{
			obj.addEventListener(evType, fn, false);
			return true;
		}
		else if (obj.attachEvent)
		{
			var r = obj.attachEvent('on'+evType, fn);
			return r;
		}
		else
		{
			return false;
		}
	} 
	
} // NiceWindow
	
function followWindowByCursor(e)
{
	e = e||event;
	if(currentNiceWindow != false)
	{
		var container  = document.getElementById(currentNiceWindow);
		var leftOffset = (e.pageX ? e.pageX : e.clientX+(document.documentElement.scrollLeft?document.documentElement.scrollLeft:document.body.scrollLeft)) - container.cursorX;
		var topOffset  = (e.pageY ? e.pageY : e.clientY+(document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop)) - container.cursorY;
		if(leftOffset >= 0) { container.style.left = leftOffset + "px"; }
		if(topOffset >= 0) { container.style.top  = topOffset + "px"; }
	}
}