////////////////////////////////////////////////////////
// GENERIEKE FUNCTIES 
////////////////////////////////////////////////////////

function getParameters(string) {

	var params = {};
	var search = new RegExp('([a-z0-9_-]+):([^\\s]*)', 'gi');
	
	while (match = search.exec(string)) {
	
		if (/:/.test(match[2])) {
			params[match[1]] = match[2].split(':');
		}
		else {
			params[match[1]] = match[2];
		}
		
	}
	
	return params;
	
}

if (typeof(getPageSize) == 'undefined') {
	function getPageSize() {
	
		var xScroll, yScroll;
	
		if (window.innerHeight && window.scrollMaxY) {
			xScroll = document.body.scrollWidth;
			yScroll = window.innerHeight + window.scrollMaxY;
		} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
			xScroll = document.body.scrollWidth;
			yScroll = document.body.scrollHeight;
		} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
			xScroll = document.body.offsetWidth;
			yScroll = document.body.offsetHeight;
		}
	
		var windowWidth, windowHeight;
		if (self.innerHeight) {	// all except Explorer
			windowWidth = self.innerWidth;
			windowHeight = self.innerHeight;
		} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
			windowWidth = document.documentElement.clientWidth;
			windowHeight = document.documentElement.clientHeight;
		} else if (document.body) { // other Explorers
			windowWidth = document.body.clientWidth;
			windowHeight = document.body.clientHeight;
		}
	
		// for small pages with total height less then height of the viewport
		if(yScroll < windowHeight){
			pageHeight = windowHeight;
		} else {
			pageHeight = yScroll;
		}
	
		// for small pages with total width less then width of the viewport
		if(xScroll < windowWidth){
			pageWidth = windowWidth;
		} else {
			pageWidth = xScroll;
		}
	
	
		arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight);
		return arrayPageSize;
	}
}

var Overlay = Class.create();

Overlay.prototype = {
	
	overlay: undefined,
	
	initialize: function() {
		
		this.options = Object.extend({
			afterCreation: false
		}, arguments[0] || {});
		
		var b = document.getElementsByTagName("body").item(0);
		this.overlay = document.createElement("div");
		this.overlay.setAttribute('id','overlay');
		this.overlay.style.display = 'none';
		this.overlay.style.position = 'absolute';
		this.overlay.style.top = '0';
		this.overlay.style.left = '0';
		this.overlay.style.zIndex = '90';
	 	this.overlay.style.width = '100%';
		b.insertBefore(this.overlay, b.firstChild);
		
		var arrayPageSize = getPageSize();
		this.overlay.style.height = (arrayPageSize[1] + 'px');		
		
		Effect.Appear(this.overlay, {
			to: 0.1,
			duration: 0.25,
			afterFinish: (function() {
				if (this.options.afterCreation) {
					this.options.afterCreation.bind(this)();
				}
			}).bind(this)
		});
		
		
	},
	
	remove: function() {
		new Effect.Fade(this.overlay, { 
			duration: 0.25, 
			afterFinish: (function() { 
				Element.remove(this.overlay); 
			}).bind(this)
		});
		
	}	

};

Object.extend(Event, {
    
    _domReady : function() {  

     if (arguments.callee.done) return;  
     arguments.callee.done = true;  
   
     if (this._timer)  clearInterval(this._timer);  
       
     this._readyCallbacks.each(function(f) { f() });  
     this._readyCallbacks = null;  
 },  
   onDOMReady : function(f) {  
     if (!this._readyCallbacks) {  
       var domReady = this._domReady.bind(this);  
         
       if (document.addEventListener)  
         document.addEventListener("DOMContentLoaded", domReady, false);  
           
        // for Internet Explorer (using conditional comments)
        /*@cc_on @*/
        /*@if (@_win32)
        document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
        var script = document.getElementById("__ie_onload");
        script.onreadystatechange = function() {
            if (this.readyState == "complete") {
                domReady(); // call the onload handler
            }
        };
        /*@end @*/

         if (/WebKit/i.test(navigator.userAgent)) {   
           this._timer = setInterval(function() {  
             if (/loaded|complete/.test(document.readyState)) domReady();   
           }, 10);  
         }  
           
         Event.observe(window, 'load', domReady);  
         Event._readyCallbacks =  [];  
     }  
     Event._readyCallbacks.push(f);  
   }  
});  

////////////////////////////////////////////////////////
// FOTOALBUM POPUP
////////////////////////////////////////////////////////

var AlbumManager = Class.create();

AlbumManager.prototype = {

	initialize: function() { 
		this.options = Object.extend({
			albumID: false,
			menuID: false,
			catID: false
		}, arguments[0] || {});
		
		if (!this.__popupExists()) {
			this.renderPopup();
		}
		
		if (this.options.albumID) {
			this.loadAlbum(this.options.albumID, this.options.menuID, this.options.catID);
		}
		
		
	},
	
	renderPopup: function() {
		var popupContainer = document.createElement('div');
		popupContainer.id = 'albumPopup';
		popupContainer.style.display = 'none';
		
		var content = document.createElement('div');
		content.id = 'popupContent';
		
		var closer = document.createElement('div');
		closer.id = 'closer';
		
		popupContainer.appendChild(closer);
		popupContainer.appendChild(content);		
		
		this.closer = closer;
		this.popupContainer = popupContainer;
		this.content = content;
		
		document.getElementsByTagName('body')[0].appendChild(popupContainer);		
		
		Event.observe(this.closer, 'click', this.destroyPopup.bind(this));		
		
	},
	
	destroyPopup: function() {
		
		new Effect.Fade(this.popupContainer, { 
			duration: 0.25, 
			afterFinish: function() { 
				Element.remove(this.popupContainer),
				this.overlay.remove();
			}.bind(this) 
		} );
		
	},
	
	attachEvents: function() { 
	
		var photos = $A($('albumPopup').getElementsByClassName('photolink'));
		
		photos.each(function(photo, key) {
			
			Event.observe(photo, 'mouseover', function() { 
			
				var preloader = new Image();
				preloader.onload = function() { 
				
					$('popupLargePhoto').src = preloader.src;
				
				};
				
				var img = photo.getElementsByTagName('img')[0];
				var link = getParameters(photo.className).link;
				
				preloader.src = link;
			
			} );
			
		} );
		
		Event.observe('prevAlbum', 'click', function() { 
			var params = getParameters($('prevAlbum').className);
			this.loadAlbum(params.albumID, params.menuID, params.catID);
		}.bind(this) );
		
		Event.observe('nextAlbum', 'click', function() { 
			var params = getParameters($('nextAlbum').className);		
			this.loadAlbum(params.albumID, params.menuID, params.catID);			
		}.bind(this) );
		
	},
	
	loadAlbum: function(albumID, menuID, catID) {
		
		new Ajax.Request('/fotoboek/showalbum/'+albumID+'/'+menuID+'/'+catID+'/', { 
			onLoading: function() { },
			onComplete: (function(t) { 
				
				this.content.innerHTML = t.responseText;
				
				if (!this.__popupIsVisible()) {
					this.showPopup();
				} else {
					this.attachEvents();
				}
				
			}).bind(this)
		});
		
		
	},
	
	showPopup: function() { 
		this.overlay = new Overlay();
		new Effect.Appear(this.popupContainer, { 
			duration: 0.25,
			afterFinish: (function() { 
			
				this.attachEvents();
			
			} ).bind(this)
		} );
	},
	
	showLargePhoto: function() { },
	
	__popupIsVisible: function() { 
		return $('albumPopup').style.display != 'none';
	},
	
	__popupExists: function() {
		return $('albumPopup');
	}

};

function attachMenuHandlers() {
	
	var menus = $A($('menu').getElementsByTagName('li'));
	
	menus.each(function(menu, key) { 
	
		if (Element.hasClassName(menu, 'hasChildren')) {
		
			var link = menu.getElementsByTagName('a')[0];
			var submenu = menu.getElementsByClassName('submenu')[0];			
			
			if (submenu && submenu.getElementsByTagName('li').length > 0) {
			
				Event.observe(link, 'click', function(event){
					
					var id = link.id.split('_')[2];
					
					Event.stop(event);
					Element.show(submenu);
					
					if (currentMenuItem) {
						
						var activemenuListItem = $('menu_item_'+currentMenuItem).parentNode;
						
						Element.removeClassName(activemenuListItem, 'currentMenuItem');
						
						
					}
					
					Element.addClassName(link.parentNode, 'currentMenuItem');
					
					currentMenuItem = id;
					
				});
				
			}
			
		}
		
			
	} );
	
	
}

var catID, activeLink;
function attachAlbumHandlers() {
	
	var links = $A(document.getElementsByClassName('albumlink'));
	
	links.each(function(link, key) { 
	
		Event.observe(link, 'click', function(event) { 
			Event.stop(event);
			
			if (windowloading===true) {
				return false;
			}
			
			var params = getParameters(link.className);
			
			if ($('albumPopup')) {
				
				$('albumPopup').AlbumManager.loadAlbum(params.albumID, params.menuID, params.catID);
				
			} else {
				var A = new AlbumManager(
					{
						albumID: params.albumID,
						menuID: params.menuID,
						catID: params.catID
					}
				);
				
			}
			
		
		} );
	
	} );
	
	var catlinks = $A(document.getElementsByClassName('catLink'));
	
	catlinks.each(function(link, key) { 
		
		Event.observe(link, 'click', function(event) { 
		
			var params = getParameters(link.className);
			
			if (catID) {
				
				if (activeLink) {
					Element.removeClassName(activeLink, 'active');
				}
				
				$A(document.getElementsByClassName('category_'+catID)).each(function(li) { 
					li.hide();
				} );
			}
			
			$A(document.getElementsByClassName('category_'+params.catID)).each(function(li) { 			
				li.show();
			} );
			
			catID = params.catID;
			
			activeLink = link;
			
			Element.addClassName(link, 'active');
			
		} );
		
	} );
	
	var albumImages = $A(document.getElementsByClassName('albumImage'));
	
	albumImages.each(function(image) { 
	
		Event.observe(image, 'mouseover', function() { 
		
			var srcRegex = new RegExp('^(.*)(\/resize.*)$');
			var result = srcRegex.exec(image.src);
			var src = result[2];
		
			showLargePhoto('/resize/width_320/height_300/'+src.replace('/resize/width_90/height_90/square_1/', ''));
		} );
		
	} );
	
}

////////////////////////////////////////////////////////
// OVERIG
////////////////////////////////////////////////////////

var loading;
function showLargePhoto(src) {
	
	if (loading) return false;
	
	loading = true;
	
	var e = $('largePhoto');
	var p = $('photo');
	
	var img = new Image();
	
	img.onload = function() {
		
		loading = false;
		
		if (!p) {
			
			p = document.createElement('img');
			p.id = 'photo';
			
			e.appendChild(p);
		}
		
		p.src = img.src;	
//		p.width = 320;
//		p.height = 300;
	}
	
	img.src = src;
	
}


////////////////////////////////////////////////////////
// ONLOAD HANDLERS
////////////////////////////////////////////////////////

var windowloading = true;

Event.observe(window,'load',function(e) {
	windowloading = false;
});

Event.onDOMReady(function(){

	attachMenuHandlers();
	attachAlbumHandlers();

	var albumImages = $A(document.getElementsByClassName('albumImage'));
	
	for (var i = 0; i < albumImages.length; i++) {	
	
		var image = albumImages[i];
	
		var srcRegex = new RegExp('^(.*)(\/resize.*)$');
		var result = srcRegex.exec(image.src);
		var src = result[2];	
		
		if (image.parentNode.parentNode.style.display != 'none') {
			
			showLargePhoto('/resize/width_320/height_300/'+src.replace('/resize/width_90/height_90/square_1/', ''));
			break;
			
		}
	
	}
	
} );