// -----------------------------------------------------------------------------------
//
//  Loadbox V1.0
//  by Konrad Abmeier
//
//  uses parts from
//	Lightbox v2.02
//	by Lokesh Dhakar
//
// -----------------------------------------------------------------------------------

//	Configuration
//
var fileLoadingImage = "/img/site/loading.gif";		
// -----------------------------------------------------------------------------------

//	Global Variables
//
var imageArray = new Array;
var activeImage;
// -----------------------------------------------------------------------------------

//	Additional methods for Element
Object.extend(Element, {
	getWidth: function(element) {
	   	element = $(element);
	   	return element.offsetWidth; 
	},  
	setWidth: function(element,w) {
	   	element = $(element);
    	element.style.width = w +"px";
	},
	setSrc: function(element,src) {
    	element = $(element);
    	element.src = src; 
	}
});
// -----------------------------------------------------------------------------------

//	Extending built-in Array object
//	- array.removeDuplicates()
//	- array.empty()
//
Array.prototype.removeDuplicates = function () {
	for(i = 1; i < this.length; i++){
		if(this[i][0] == this[i-1][0]){
			this.splice(i,1);
		}
	}
}

Array.prototype.empty = function () {
	for(i = 0; i <= this.length; i++){
		this.shift();
	}
}
// -----------------------------------------------------------------------------------

var Loadbox = Class.create();

Loadbox.prototype = {
	initialize: function() {	
		if (!document.getElementsByTagName){ return; }
		var anchors = document.getElementsByTagName('a');
		var startimage = "";

		// loop through all anchor tags
		var aryParts = new Object();
		for (var i=0; i<anchors.length; i++){
			var anchor = anchors[i];
			var part = "";
			
			var relAttribute = String(anchor.getAttribute('rel'));
			
			// use the string.match() method to catch 'loadbox' references in the rel attribute
			if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('loadbox'))){
			  relAttribute.match(/^loadbox\[(.+)\]$/i);
        aryParts[RegExp.$1] = RegExp.$1;
			  if( !startimage ){
          startimage = RegExp.$1 + 'image';
        }        
				anchor.onclick = function () {myLoadbox.start(this); return false;}
			}
		}
    
    // expand DOM
    for (var boxname in aryParts){
      if( document.getElementById(boxname + "box") ){
        //breite
        if( startimage ){
          Element.setWidth(boxname + 'box', $(startimage).getWidth());
        }
        
        var objBox = document.getElementById(boxname + "box");

        // loading
    		var objLoading = document.createElement("div");
    		objLoading.setAttribute('id','loading');
    		objLoading.style.display = 'none';
    		objBox.appendChild(objLoading);
	
    		var objLoadingImage = document.createElement("img");
    		objLoadingImage.setAttribute('src', fileLoadingImage);
    		objLoading.appendChild(objLoadingImage);
		
		  }
		}
	},
	
	//
	//	start()
	start: function(imageLink) {	

		// stretch overlay to fill page and fade in

		imageArray = [];
		imageNum = 0;		

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

		// if image is NOT part of a set..
		if((imageLink.getAttribute('rel') == 'loadbox')){
			// add single image to imageArray
			imageArray.push(new Array(imageLink.getAttribute('href')));			
		} else {
		// if image is part of a set..

			// loop through anchors, find other images in set, and add them to imageArray
			for (var i=0; i<anchors.length; i++){
				var anchor = anchors[i];
				if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))){
				  imageLink.getAttribute('rel').match(/^loadbox\[(.+)\]$/i);
					imageArray.push(new Array(anchor.getAttribute('href'), RegExp.$1));
				}
			}
			imageArray.removeDuplicates();
			while(imageArray[imageNum][0] != imageLink.getAttribute('href')) { imageNum++;}
		}
    if( activeImage == imageNum || (!activeImage && imageNum == 0) ){ return; }
		//Element.show('loadbox');
		myimage = imageArray[imageNum][1] + 'image';
		this.wCur = $(myimage).getWidth();
		Element.setWidth('loading', this.wCur);
		Element.setWidth(imageArray[imageNum][1] + 'box', this.wCur);
		$('loading').show();
		//new Effect.Appear('overlay', { duration: 0.2, from: 0.0, to: 0.8 });
		new Effect.Fade(imageArray[imageNum][1] + 'image', { duration: 0.4, from: 1.0, to: 0.1, queue: 'end', afterFinish: function(){	myLoadbox.changeImage(imageNum); } });
		//this.changeImage(imageNum);
	},

	//
	//	changeImage()
	//	Hide most elements and preload image in preparation for resizing image container.
	//
	changeImage: function(imageNum) {	
		
		activeImage = imageNum;	// update global var

		// hide elements during transition
		//Element.hide('pimage');
		
		imgPreloader = new Image();
		
		// once image is preloaded, resize image container
		imgPreloader.onload=function(){
			Element.setSrc(imageArray[imageNum][1] + 'image', imageArray[activeImage][0]);
			myLoadbox.showImage();
		}
		imgPreloader.src = imageArray[activeImage][0];
	},

	
	//
	//	showImage()
	//	Display image and begin preloading neighbors.
	//
	showImage: function(){
		new Effect.Appear(imageArray[imageNum][1] + 'image', { duration: 0.4, from: 0.1, to: 1.0, queue: 'end', afterFinish: function(){	myLoadbox.end(); } });
		this.preloadNeighborImages();
	},

	//
	//	preloadNeighborImages()
	//	Preload previous and next images.
	//
	preloadNeighborImages: function(){

		if((imageArray.length - 1) > activeImage){
			preloadNextImage = new Image();
			preloadNextImage.src = imageArray[activeImage + 1][0];
		}
		if(activeImage > 0){
			preloadPrevImage = new Image();
			preloadPrevImage.src = imageArray[activeImage - 1][0];
		}
	
	},

	//
	//	end()
	//
	end: function() {
		//new Effect.Fade('overlay', { duration: 0.2, afterFinish: function(){$('loading').hide();} });
		$('loading').hide();		
	}
}

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

function initLoadbox() { myLoadbox = new Loadbox(); }
Event.observe(window, 'load', initLoadbox, false);