// -----------------------------------------------------------------------------------
//
//	inlinePopup v1.0
//	by Josef Leifeld - http://www.josefleifeld.de
//	02/01/08
//
//	For more information on this script, visit:
//	http://webdesign-ahlen.de/projects/ipopup/
//
//	Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
//	
//
//	I thank Lokesh Dhakar for the inspiration.
//	See also
//	Lightbox v2.03.3
//	by Lokesh Dhakar - http://www.huddletogether.com
//	5/21/06
//
//	For more information on this script, visit:
//	http://huddletogether.com/projects/lightbox2/
//
// -----------------------------------------------------------------------------------

//	Configuration
//
var fileTopNavCloseImage = "images/close_x.gif";
			

//	Additional methods for Element added by SU, Couloir
//	- further additions by Lokesh Dhakar (huddletogether.com)
//
Object.extend(Element, {
	getWidth: function(element) {
	   	element = $(element);
	   	return element.offsetWidth; 
	},
	setWidth: function(element,w) {
	   	element = $(element);
    	element.style.width = w +"px";
	},
	setHeight: function(element,h) {
   		element = $(element);
    	element.style.height = h +"px";
	},
	setSrc: function(element,src) {
    	element = $(element);
    	element.src = src; 
	},
	setInnerHTML: function(element,content) {
		element = $(element);
		element.innerHTML = content;
	}
});


// -----------------------------------------------------------------------------------

//
//	Lightbox Class Declaration
//	- initialize()
//	- updateImageList()
//	- start()
//	- changePopup()
//	- resizeImageContainer()
//	- scriptaculousDraggable()
//	- end()
//
//	Structuring of code inspired by Scott Upton (http://www.uptonic.com/)
//
var Popup = Class.create();

Popup.prototype = {

	// initialize()
	// Constructor runs on completion of the DOM loading. Calls updateImageList and then
	// the function inserts html at the bottom of the page which is used to display the shadow 
	// overlay and the image container.
	//
	initialize: function() {	
		
		this.updateImageList();
		
		// Code inserts html at the bottom of the page that looks similar to this:
		//
		//	<div id="iPopup">
		//		<div id="TopNavClose">
		//			<a href="myPopup.end" >
		//				<img id="closeImage" src="images/close_x.gif">
		//			</a>
		//		</div>		
		//		<div id="titelbox">
		//			<p id="titel">       	</p>
		//		</div>		
		//		<div id="imgContainer">
		//			<img id="iPopupImage"  src 	imageLink	< />
		//		</div>
		//	</div>
			
		var objBody = document.getElementsByTagName("body").item(0);

		var objPopup = document.createElement("div");
		objPopup.setAttribute('id','iPopup');
		objPopup.style.display = 'none';
		objBody.appendChild(objPopup);	
		
		var objTopNavCloseLink = document.createElement("a");
		objTopNavCloseLink.setAttribute('id','TopNavClose');
		objTopNavCloseLink.setAttribute('href','#');
		objTopNavCloseLink.onclick = function() { myPopup.end(); return false; }
		objPopup.appendChild(objTopNavCloseLink);
	
		var objTopNavCloseImage = document.createElement("img");
		objTopNavCloseImage.setAttribute('id','closeImage');
		objTopNavCloseImage.setAttribute('src', fileTopNavCloseImage);
		objTopNavCloseLink.appendChild(objTopNavCloseImage);
		
		var objTitelBox = document.createElement("div");
		objTitelBox.setAttribute('id','titelbox');
		objPopup.appendChild(objTitelBox);	
		
		var objTitel = document.createElement("p");
		objTitel.setAttribute('id','titel');
		objTitelBox.appendChild(objTitel);			
		
		var objImageContainer = document.createElement("div");
		objImageContainer.setAttribute('id','imgContainer');
		objPopup.appendChild(objImageContainer);
	
		var objPopupImage = document.createElement("img");
		//objPopupImage.onclick = function() { myPopup.end(); return false; }
		objPopupImage.setAttribute('id','iPopupImage');
		objImageContainer.appendChild(objPopupImage);

	},
	
	
	//
	// updateImageList()
	// Loops through anchor tags looking for 'lightbox' references and applies onclick
	// events to appropriate links. You can rerun after dynamically adding images w/ajax.
	//
	updateImageList: function() {	

		if (!document.getElementsByTagName){ return; }
		var anchors = document.getElementsByTagName('a');

		// loop through all anchor tags
		for (var i=0; i<anchors.length; i++){
			var anchor = anchors[i];
			
			var relAttribute = String(anchor.getAttribute('rel'));
			
			
			// use the string.match() method to catch 'popup' references in the rel attribute
			if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('ipopup'))){
				
				anchor.onclick = function () {			
				myPopup.start(this, this.title); return false;
				}
				

			}
		}	

	},	

	
	//
	//	start()
	//	Display overlay and lightbox. If image is part of a set, add siblings to imageArray.
	//
	start: function(imageLink, titleAttribute) {	

		//alert (imageLink);
	
		Element.show('iPopup');
		Element.setInnerHTML('titel', titleAttribute);
			
		this.changePopup(imageLink);
	},

	//
	//	changeImage()
	//	Hide most elements and preload image in preparation for resizing image container.
	//
	changePopup: function(imageLink) {	
	
		
				
		imgPreloader = new Image();
		
		// once image is preloaded, resize image container
		imgPreloader.onload=function(){
			Element.setSrc('iPopupImage', imageLink);
			myPopup.resizeImageContainer(imgPreloader.width, imgPreloader.height);
			
			imgPreloader.onload=function(){};	//	clear onLoad, IE behaves irratically with animated gifs otherwise 
		}
		imgPreloader.src = imageLink;
		
		this.scriptaculousDraggable();
		
	},

	//
	//	resizeImageContainer()
	//
	resizeImageContainer: function( imgWidth, imgHeight) {
	    
		var heightCloseButton = 16;
		Element.setHeight('iPopup', imgPreloader.height+heightCloseButton+1);
		if (browser == "f15") Element.setHeight('iPopup', imgPreloader.height+heightCloseButton+2);
		Element.setWidth('iPopup', imgPreloader.width);
		//Element.setWidth('titelbox', imgPreloader.width-16);	
		
	},
	
	//
	//	Draggable scriptaculous.js
	//
	scriptaculousDraggable: function()  {
	
		new Draggable('iPopup');
	
	},	
	
	//	end()
	//
	end: function() {

		Element.hide('iPopup');
	}
		

	
}

// ---------------------------------------------------

function initPopup() { myPopup = new Popup(); }
Event.observe(window, 'load', initPopup, false);