Event.observe(window, 'load', function() {
	
	 // fck
	$$('textarea.editor').each(function(element) {
		
		var width, height;
		
		if (element.hasClassName('small')) {
			width = 780;
			height = 250;
		} else {
			width = 780;
			height = 600;
		}
		
		
		var editor = new FCKeditor(element.name, width, height);
		
		var match = /stylesheet:(.*?)(?:\s|$)/.exec(element.className);
		
		if (match) {
			editor.Config.EditorAreaCSS = WEBPATH + '/css/' + match[1] + '.css';
			editor.Config.BodyClass = match[1];
		}
		
		editor.ReplaceTextarea();
	});

	$$('div.listSelectionContainer').each(function(element) {
		
		var selectElements = element.select('select');
		var list1Elements = element.select('.list1Button');
		var list2Elements = element.select('.list2Button');
		
		new ListSelection(
			selectElements[0], selectElements[1], {
				list1SwapButton: (list1Elements.length > 0) ? list1Elements[0] : false,
				list2SwapButton: (list2Elements.length > 0) ? list2Elements[0] : false
			}
		);
	});
	
	
	
	
	$$('h2.lowerStripe').each(function(element) {
		
		element = $(element);
		
		var el = $(document.createElement('SPAN'));
		
		element.setStyle({
			position: 'relative',
			marginBottom: '12px'
		});
		el.setStyle({
			background: '#fff',
			position: 'relative',
			bottom: '-5px',
			paddingRight: '5px'
		});
		el.innerHTML = element.innerHTML;
		
		element.innerHTML = '';
		element.insert(el);
	});
	
	
	
	
	
	
	
	var currentSubmenu;
	
	$$('#Container #mainHeader #menuBar > div').each(function(element) {
		
		var subMenu = element.getElementsByTagName('ul');
		
		var show 	= function() {
			
			if (hideTimeoutID) {
				clearTimeout(hideTimeoutID);
				hideTimeoutID = null;
			}
			
			if (currentSubmenu) {
				currentSubmenu.hide();
			}
			
			if (subMenu) {
				if(subMenu.length != '0'){
				subMenu.show();
				currentSubmenu = subMenu;
				}
			}
		};
		var hide = function() {
			if(subMenu.length != '0'){
				if (hideTimeoutID) {
					clearTimeout(hideTimeoutID);
				}
				hideTimeoutID = setTimeout(function() {
		    		subMenu.hide();
				}, 500);
			}
		};
		
		if (subMenu.length > 0) {
			
			var hideTimeoutID;
			subMenu = $(subMenu[0]);
			
			subMenu.hide();
			subMenu.setStyle({
				visibility: 'visible'/*,
				opacity: 0.80*/
			});
			
			subMenu.observe('mouseover', show);
			subMenu.observe('mouseout', hide);
		}
			
		element.observe('mouseover', show);
		element.observe('mouseout', hide);
	});
	
});

TableRowRepeater = Class.create({
						
	initialize: function(element, options) {
		
		this.options = {
			onRowApplied: Prototype.emptyFunction,
			onRowAdded: Prototype.emptyFunction
		};
		Object.extend(this.options, options || {});
		
		if ($(element).tagName == 'TABLE') {
			this.table = $(element);
			this.currentRow = this.table.select('tr:last-child')[0];
		} else {
			this.currentRow = $(element);
			this.table 		= this.currentRow.up('table');
		}
		this.initializeCurrentRow();
	},
	
	initializeCurrentRow: function() {
		
		if (this.inputs) {
			
			// huidige changeoverservers ontkoppelen
			this.inputs.each(function(input) {
				if (input.changedObserver) {
					input.stopObserving('change', input.changedObserver);
				}
			}.bind(this));
		}
		
		this.inputs = this.currentRow.select('input');
		
		this.inputs.each(function(input) {
			
			input.changedObserver = function() {
				this.onInputChanged(input);
			}.bindAsEventListener(this)
			
			input.value = '';
			input.observe('change', input.changedObserver);
			
		}.bind(this));
	},
	
	addRow: function() {
		
		var newRow = $(this.currentRow.cloneNode(true));
		
		$(this.currentRow.parentNode).insert(newRow);
		
		this.currentRow = newRow;
		
		this.initializeCurrentRow();
		
		this.options.onRowAdded(newRow);
	},
	
	onInputChanged: function(inputElement) {
		
		if (inputElement.value != '') {
			
			var appliedRow = this.currentRow;
			
			this.addRow();
			
			this.options.onRowApplied(appliedRow);
		}
	}
});
Preloader = Class.create({
	
	initialize: function(image, options) {
		
		this.options = Object.extend({
			onComplete: Prototype.emptyFunction,
			onFailure: Prototype.emptyFunction,
			autoLoad: true
		}, options || {});
		
		this.image = image;
		this.imageObj = new Image();
		
		if (this.options.autoLoad) {
			this.load();
		}
	},
	
	onImageLoaded: function() {
		this.options.onComplete([this.imageObj.width, this.imageObj.height]);
	},
	
	onImageError: function() {
		this.options.onFailure(this.image);
	},
	
	load: function() {
		this.imageObj.src = this.image;
		this.imageObj.onload = this.onImageLoaded.bind(this);
		this.imageObj.onerror = this.onImageError.bind(this);
	}
});

ListSelection = Class.create({
	
	initialize: function(list1, list2, options) {
		
		this.options = Object.extend({
			list1SwapButton: false,
			list2SwapButton: false,
			onList1ItemAdded: Prototype.emptyFunction,
			onList2ItemAdded: Prototype.emptyFunction,
			onList1ItemRemoved: Prototype.emptyFunction,
			onList2ItemRemoved: Prototype.emptyFunction
		}, options || {});
		
		this.list1 = $(list1);
		this.list2 = $(list2);
		
		this.list1.observe('dblclick', this.onList1DblClick.bind(this));
		this.list2.observe('dblclick', this.onList2DblClick.bind(this));
		
		if (this.options.list1SwapButton) {
			
			this.options.list1SwapButton = $(this.options.list1SwapButton);
			this.options.list1SwapButton.observe('click', function() {
				this.swapFromList1(this.list1.selectedIndex);
			}.bind(this));
		}
		
		if (this.options.list2SwapButton) {
			
			this.options.list2SwapButton = $(this.options.list2SwapButton);
			this.options.list2SwapButton.observe('click', function() {
				this.swapFromList2(this.list2.selectedIndex);
			}.bind(this));
		}
	},
	
	onList1DblClick: function() {
		this.swapFromList1(this.list1.selectedIndex);
	},
	
	onList2DblClick: function() {
		this.swapFromList2(this.list2.selectedIndex);
	},
	
	swapFromList1: function(index) {
		
		var index = this.list1.selectedIndex;
		
		if (index < 0) return;
		
		var option = this.list1.options[index];
		
		this.removeFromList1(index);
		this.addToList2(option);
	},
	
	swapFromList2: function(index) {
		
		var index = this.list2.selectedIndex;
		
		if (index < 0) return;
		
		var option = this.list2.options[index];
		
		this.removeFromList2(index);
		this.addToList1(option);
	},
	
	addToList1: function(option) {
		
		var index = this.list1.options.length;
		
		this.list1.options[index] = option;
		
		this.options.onList1ItemAdded(option, index);
	},
	
	removeFromList1: function(index) {
		
		var option = this.list1.options[index];
		
		this.list1.remove(index);
		
		this.options.onList1ItemRemoved(option, index);
	},
	
	addToList2: function(option) {
		
		var index = this.list2.options.length;
		
		this.list2.options[index] = option;
		
		this.options.onList2ItemAdded(option, index);
	},
	
	removeFromList2: function(index) {
		
		var option = this.list2.options[index];
		
		this.list2.remove(index);
		
		this.options.onList2ItemRemoved(option, index);
	}
	
});

var Tooltip = Class.create();
Tooltip.prototype = {
  initialize: function(element, tool_tip) {
    var options = Object.extend({
      default_css: false,
      margin: "0px",
	  padding: "5px",
	  backgroundColor: "#d6d6fc",
	  delta_x: 5,
	  delta_y: 5,
      zindex: 1000
    }, arguments[1] || {});

    this.element      = $(element);
    this.tool_tip     = $(tool_tip);

    this.options      = options;

	if (this.tool_tip.parentNode != document.body) {
		this.tool_tip.parentNode.removeChild(this.tool_tip);
		document.body.insertBefore(this.tool_tip, document.body.firstChild);
	}
	
    // hide the tool-tip by default
    this.tool_tip.hide();

    this.eventMouseOver = this.showTooltip.bindAsEventListener(this);
    this.eventMouseOut   = this.hideTooltip.bindAsEventListener(this);

    this.registerEvents();
  },

  destroy: function() {
    Event.stopObserving(this.element, "mouseover", this.eventMouseOver);
    Event.stopObserving(this.element, "mouseout", this.eventMouseOut);
  },

  registerEvents: function() {
    Event.observe(this.element, "mouseover", this.eventMouseOver);
    Event.observe(this.element, "mouseout", this.eventMouseOut);
  },

  showTooltip: function(event){
	Event.stop(event);
	// get Mouse position
    var mouse_x = Event.pointerX(event);
	var mouse_y = Event.pointerY(event);
	
	
	// decide if wee need to switch sides for the tooltip
	var dimensions = Element.getDimensions( this.tool_tip );
	var element_width = dimensions.width;
	var element_height = dimensions.height;
	
	if ( (element_width + mouse_x) >= ( this.getWindowWidth() - this.options.delta_x) ){ // too big for X
		mouse_x = mouse_x - element_width;
		// apply delta to make sure that the mouse is not on the tool-tip
		mouse_x = mouse_x - this.options.delta_x;
	} else {
		mouse_x = mouse_x + this.options.delta_x;
	}
	
	if ( (element_height + mouse_y) >= ( this.getWindowHeight() - this.options.delta_y) ){ // too big for Y
		mouse_y = mouse_y - element_height;
	    // apply delta to make sure that the mouse is not on the tool-tip
		mouse_y = mouse_y - this.options.delta_y;
	} else {
		mouse_y = mouse_y + this.options.delta_y;
	} 
	
	// now set the right styles
	this.setStyles(mouse_x, mouse_y);
	
		
	// finally show the Tooltip
	//new Effect.Appear(this.tool_tip);
	new Element.show(this.tool_tip);

  },
  
  setStyles: function(x, y){
    // set the right styles to position the tool tip
	Element.setStyle(this.tool_tip, { position:'absolute',
	 								  top:y + "px",
	 								  left:x + "px",
									  zindex:this.options.zindex
	 								});
	
	// apply default theme if wanted
	if (this.options.default_css){
	  	Element.setStyle(this.tool_tip, { margin:this.options.margin,
		 								  padding:this.options.padding,
		                                  backgroundColor:this.options.backgroundColor,
										  zindex:this.options.zindex
		 								});	
	}	
  },

  hideTooltip: function(event){
	//new Effect.Fade(this.tool_tip);
	new Element.hide(this.tool_tip);
  },

  getWindowHeight: function(){
    var innerHeight;
	if (navigator.appVersion.indexOf('MSIE')>0) {
		innerHeight = document.body.clientHeight;
    } else {
		innerHeight = window.innerHeight;
    }
    return innerHeight;	
  },
 
  getWindowWidth: function(){
    var innerWidth;
	if (navigator.appVersion.indexOf('MSIE')>0) {
		innerWidth = document.body.clientWidth;
    } else {
		innerWidth = window.innerWidth;
    }
    return innerWidth;	
  }

}