/*
	MonxTools for MooTools
	by Robert Slootjes - MediaMonks, www.mediamonks.com
	Modified by Floris ten Hove - www.floristenhove.nl
	Copyright 2007-2010
	
	version history:
	
	v1.13 (24/01/2010)
	- Several options added and tuned to the dropdownbox
	
	v1.12a (09/09/2008)
	- custom dropdown working with mootools 1.12
	
	v1.11 (09/10/2007)
	- custom textarea changed, now its possible to make toggle the size with a custom image
	
	v1.1 : (08/10/2007)
	- custom dropdown
	- custom radiobutton is rewritten
	- custom checkbox is rewritten 
	- custom textarea added
	
	v1.0 : (initial version, date unknown...)
	- user friendly popup; monxbox
	- custom radiobutton
	- custom checkbox
	
*/

/************************************************************************************************************
 *	
 *	showMonxBox
 *	
 *  usage:
 *	onclick="showMonxBox('http://www.mediamonks.com/', '800', '600');"
 *
************************************************************************************************************/
function showMonxBox(strUrl, intWidth, intHeight, strTitle, blnDisableClose)
{
	new Fx.Style($('ufoverlay'), 'opacity').start(0, 1);
	new Fx.Style($('ufoverlay1'), 'opacity').start(0, 0.75);
	var intPageWidth			= getWidth();
	var intPageHeight			= getHeight();
	var intPageScrollHeight		= getScrollHeight();
	var intScrollTop			= getScrollTop();

	intCloseHeight = 27;
	
	objDivContent = new Element('div');
	objDivContent.setProperty('id', 'overlay-page');
	objDivContent.setStyle('position', 'relative');
	objDivContent.setStyle('width', intWidth + 'px');
	if(blnDisableClose != false)
	{
		objDivContent.setStyle('height', (parseInt(intHeight) + parseInt(intCloseHeight)) + 'px');
	}
	else
	{
		objDivContent.setStyle('height', intHeight + 'px');
	}
	objDivContent.setStyle('left', ((intPageWidth / 2) - (intWidth / 2)) + 'px');
	objDivContent.setStyle('top', ((intScrollTop + (intPageHeight / 2)) - (intHeight / 2)) + 'px');
	objDivContent.setStyle('background-color', '#FFFFFF');
	objDivContent.setStyle('border', '1px solid #0F2235');
	objDivContent.injectInside($('ufoverlay'));
	
	if(blnDisableClose != false)
	{
		objHeader = new Element('div');
		objHeader.setStyle('position', 'relative');
		objHeader.setStyle('cursor', 'move');
		objHeader.setStyle('width', (intWidth - 10) + 'px');
		objHeader.setStyle('height', intCloseHeight + 'px');
		objHeader.setStyle('background-image', 'url(../images/admin/monxbog_bg.gif)');
		objHeader.setStyle('color', '#FFFFFF');
		objHeader.setStyle('padding', '10px 0px 0px 10px');
		
		objHeader.injectInside(objDivContent);
		
		objTitle = new Element('span');
		objTitle.setStyle('font-family', 'Verdana');
		objTitle.setStyle('font-size', '16px');
		objTitle.setStyle('font-weight', 'bold');
		objTitle.appendText(strTitle);
		objTitle.injectInside(objHeader);
		
		objImage = new Element('img');
		objImage.setProperty('src', 'images/admin/monxbox_close.gif');
		objImage.setStyle('cursor', 'pointer');
		objImage.setStyle('position', 'absolute');
		objImage.setStyle('top', '0px');
		objImage.setStyle('right', '3px');
		objImage.addEvent('click', function(){closeMonxBox()});
		objImage.injectInside(objHeader);
		
		var draggableOptions = {
		    handle:function()
		    {
		      $('objHeader');
		    }
		};
		
		objDivContent.makeDraggable(draggableOptions);
	}
	
	objIframe = new Element('iframe');
	objIframe.setProperty('src', strUrl);
	objIframe.setProperty('frameborder', '0');
	objIframe.setStyle('width', intWidth + 'px');
	objIframe.setStyle('height', intHeight + 'px');
	objIframe.injectInside(objDivContent);
	
}

function closeMonxBox()
{
	new Fx.Style($('ufoverlay'), 'opacity', {duration:500, onComplete: function(){ $('overlay-page').remove() } }).start(1, 0);
	new Fx.Style($('ufoverlay1') , 'opacity').start(0.75, 0);
}

function createMonxBox()
{
	var objBogus	= new Element('div');
	objBogus.setProperty('id', 'ufoverlay1');
	objBogus.setStyle('position', 'absolute');
	objBogus.setStyle('left', '0px');
	objBogus.setStyle('width', '100%');
	objBogus.setStyle('opacity', '0');
	objBogus.setStyle('z-index', '5');
	objBogus.setStyle('background-color', '#0F2235');
	objBogus.setStyles({top: '0px', height: getScrollHeight() +'px'});
	objBogus.injectInside(document.body);
	
	var objDivMain	= new Element('div');
	objDivMain.setProperty('id', 'ufoverlay');
	objDivMain.setStyle('position', 'absolute');
	objDivMain.setStyle('left', '0px');
	objDivMain.setStyle('width', '100%');
	objDivMain.setStyle('opacity', '0');
	objDivMain.setStyle('z-index', '15');
	objDivMain.setStyles({top: '0px', height: getScrollHeight() +'px'});
	objDivMain.injectInside(document.body);
}


/************************************************************************************************************
 *	
 *	customCheckbox
 *	
 *  usage:
 *	customCheckbox('CheckboxClass', 'check.png', 'delete.png' );
 *
************************************************************************************************************/
function customCheckbox(argInputClass, strCheckedImage, strUncheckedImage)
{
	$$('input.' + argInputClass).each(function(objCheckbox)
	{
		objCheckbox.setStyle('display', 'none');
		objCheckbox.objImage = new Element('img');
		objCheckbox.objImage.addClass('checkbox');
		objCheckbox.objImage.tabIndex = objCheckbox.tabIndex;
		
		if(objCheckbox.checked == true)
		{
			objCheckbox.objImage.src = strCheckedImage;
		}
		else
		{
			objCheckbox.objImage.src = strUncheckedImage;
		}
		
		objCheckbox.objImage.addEvents(
		{
			'click': function()
			{
				toggleCheckbox()
			},
			'keyup': function(event)
			{
				if(event.code == 32)
				{
					toggleCheckbox();	
				}
			}
		});
		
		if(objCheckbox.getNext('label'))
		{
			objCheckbox.getNext().addEvent('click', function()
			{
				toggleCheckbox();
			});
		}
		
		function toggleCheckbox()
		{
			if(objCheckbox.checked == true)
			{
				objCheckbox.objImage.src	= strUncheckedImage;
				objCheckbox.checked			= false;
				objCheckbox.defaultChecked	= false;
			}
			else
			{
				objCheckbox.objImage.src	= strCheckedImage;
				objCheckbox.checked			= true;
				objCheckbox.defaultChecked	= true;
			}	
		}
		
		//objCheckbox.objImage.setStyle('cursor', 'pointer');
		objCheckbox.objImage.inject(objCheckbox, 'after');
	});
}

/************************************************************************************************************
 *	
 *	customRadioButton
 *	
 *  usage:
 *	customRadioButton('radioButtonClass', 'check.png', 'delete.png' );
 *
************************************************************************************************************/
function customRadioButton(argInputClass, strCheckedImage, strUncheckedImage)
{
	$$('input.' + argInputClass).each(function(objRadio)
	{		
		objRadio.setStyle('display', 'none');
		objRadio.strName = objRadio.getProperty('name');
		objRadio.objImage = new Element('img');
		objRadio.objImage.addClass('radio');
		objRadio.objImage.tabIndex = objRadio.tabIndex;

		if(objRadio.checked == true)
		{
			objRadio.objImage.src = strCheckedImage;
		}
		else
		{
			objRadio.objImage.src = strUncheckedImage;
		}
		
		objRadio.objImage.addEvents(
		{
			'click': function()
			{
				toggleRadio();
				objRadio.click();
			},
			'keyup': function(event)
			{
				if(event.code == 32)
				{
					toggleRadio();
				}
			}
		});
		
		if(objRadio.getNext('label'))
		{
			objRadio.getNext().addEvent('click', function()
			{
				toggleRadio();
			});
		}
		
		function toggleRadio()
		{
			$$('input[name$=' + objRadio.strName + ']').each(function(objRadio2)
			{
				objRadio2.checked = 'false';
				objRadio2.objImage.src = strUncheckedImage;
			});
			
			objRadio.objImage.src = strCheckedImage;
			objRadio.checked = true;
			objRadio.defaultChecked = true;	
		}
		
		//objRadio.objImage.setStyle('cursor', 'pointer');
		objRadio.objImage.inject(objRadio, 'after');
	});
}


/************************************************************************************************************
 *	
 *	customDropdown
 *	
 *  usage:
 *  customDropdown('class', 'base');
 *
************************************************************************************************************/
function customDropdown(argInputClass, argSetClass)
{
	$$('select.' + argInputClass).each(function(objSelect)
	{
		// hide the original select
		objSelect.setStyle('display', 'none');
		
		// open state
		objSelect.blnOpen = false;
		
		// function to open options
		objSelect.openOptions = function()
		{
			objCurrentOption.setStyle('z-index', '1');
			objFakeOptions.setStyle('display', 'block');
			objFakeOptions.setStyle('z-index', '999');
			objWrapper.setStyle('z-index', '100');
			objFakeOptions.setStyle('overflow', 'visible');
			objWrapper.addClass(argSetClass + '_open');
		}
		
		// function to close options
		objSelect.closeOptions = function()
		{
			objFakeOptions.setStyle('display', 'none');
			objFakeOptions.setStyle('overflow', 'hidden');
			objFakeOptions.setStyle('z-index', '1');
			objCurrentOption.setStyle('z-index', '999');
			objWrapper.setStyle('z-index', '1');
			objWrapper.removeClass(argSetClass + '_open');
		}
		
		objSelect.checkClose = function()
		{
			if(objSelect.blnOpen == false)
    		{
				objSelect.closeOptions();
			}	
		}
		
		// get options
		var objOptions = objSelect.getElements('option');
		
		// create relative wrapper
		var blnResetTyped = false;
		var strTyped = '';
		var intIndex = 0;
		var objWrapper = new Element('div',
		{
			'events':
	    	{
				'focus': function()
				{
					
				},
				'blur': function()
				{
					objSelect.closeOptions();
				},
				'click': function()
	        	{
	        		if('none' == objFakeOptions.getStyle('display') && false == objSelect.blnOpen)
	        		{
		        		objSelect.openOptions();
						
						//highlight current selected option in dropdownbox
						objFakeOptions.getChildren().each(function(option, index)
						{
							option.removeClass('selected');
							if(option.innerHTML == objCurrentOption.innerHTML)
							{
								option.addClass('selected');	
							}
						});
						
						/*
						// support select by keyinput
						window.addEvent('keyup', function(event)
						{
							if(blnResetTyped == true)
							{
								strTyped = '';
								blnResetTyped = false;
							}
							
							//if key = enter or key = tab or key = escape, then close the dropdownbox
							if(event.code == 13 || event.code == 9 || event.code == 27)
							{
								objSelect.checkClose();
							}
							
							var arrExcludedKeys = [13, 9, 27, 37, 38, 39, 40, 16];
							if(arrExcludedKeys.indexOf(event.code) == -1) 
							{
								strTyped += event.key;
								objFakeOptions.getChildren().each(function(option, index)
								{
									option.set('class', 'item');
									if(option.innerHTML.test(strTyped, 'i'))
									{
										objCurrentOption.innerHTML = option.innerHTML;
										option.addClass('selected');
										
										console.log(option.innerHTML.capitalize() == strTyped.capitalize());
										if(option.innerHTML.capitalize() == strTyped.capitalize())
										{
											blnResetTyped = true;	
										}
									}
								});
							}
						});*/
	        		}
	        		else
	        		{
	        			objSelect.closeOptions();
	        		}
	        	},
				'keyup': function(event)
				{
					if(blnResetTyped == true)
					{
						strTyped = '';
						blnResetTyped = false;
					}
					
					//if key = enter or key = tab or key= escape, then close the dropdownbox
					if(event.code == 13 || event.code == 9 || event.code == 27)
					{
						objSelect.checkClose();
					}
					//if key = arrow down, open dropdown
					if(event.code == 40)
					{
						if(objSelect.blnOpen == false)
						{
							objSelect.openOptions();
						}
						/*
						console.log(objFakeOptions.getChildren().length);
						if(intIndex > 0 && intIndex < objFakeOptions.getChildren().length)
						{
							objFakeOptions.getChildren()[intIndex - 1].removeClass('item_hover');
						}
						if(intIndex < objFakeOptions.getChildren().length)
						{
							objFakeOptions.getChildren()[intIndex].addClass('item_hover');
							intIndex++;
						}
						*/
					}
					if(event.code == 38)
					{
						objSelect.checkClose();
						/*
						console.log(objFakeOptions.getChildren().length);
						if(intIndex > 0 && intIndex < objFakeOptions.getChildren().length)
						{
							objFakeOptions.getChildren()[intIndex + 1].removeClass('item_hover');
						}
						if(intIndex < objFakeOptions.getChildren().length)
						{
							objFakeOptions.getChildren()[intIndex].addClass('item_hover');
							intIndex--;
						}
						*/
					}

					var arrExcludedKeys = [13, 9, 27, 37, 38, 39, 40, 16];
					if(arrExcludedKeys.indexOf(event.code) == -1) 
					{
						strTyped += event.key;
						objFakeOptions.getChildren().each(function(option, index)
						{
							option.set('class', 'item');
							if(option.innerHTML.test(strTyped, 'i'))
							{
								objCurrentOption.innerHTML = option.innerHTML;
								option.addClass('selected');
								
								//console.log(option.innerHTML.capitalize() == strTyped.capitalize());
								if(option.innerHTML.capitalize() == strTyped.capitalize())
								{
									blnResetTyped = true;	
								}
							}
						});
					}
				}
	    	},
	        'class': argSetClass,
			'tabindex': objSelect.tabIndex
		}).inject(objSelect, 'before')
		
		// create the current option and put it in the wrapper
		var objCurrentOption = new Element('div',
		{
		    'events':
	    	{
	        	'mouseleave': function()
	        	{
	        		objSelect.checkClose.delay(500);
	        	}
	    	},
	        'class': 'currentoption'
		}).set('html', objOptions[objSelect.selectedIndex].innerHTML).inject(objWrapper, 'inside');
		
		
		// create option wrapper and put them in the wrapper
		var objFakeOptions = new Element('div',
		{
		    'events':
	    	{
	        	'mouseleave': function()
	        	{
	        		objSelect.blnOpen = false;
	        		objSelect.checkClose.delay(500);
	        	}
	    	},
		    'class': 'options'
		}).inject(objWrapper, 'inside');
		
		
		// add the options to the option wrapper
		var a = 1;
		objOptions.each(function(option)
		{
			var objItem = new Element('div',
			{
			    'events':
		    	{
					'mouseenter': function()
		        	{
						objItem.getParent().getChildren().each(function(option)
						{
							if(option.hasClass('selected'))
							{
								option.removeClass('selected');
							}
						});
		        		if(objItem.number == 1)
						{
							objItem.addClass('first_hover');
						}
						if(objItem.number == 2)
						{
							objItem.addClass('first_real_hover');	
						}
						else if(objItem.number == objOptions.length)
						{
							objItem.addClass('last_hover');
						}
						else
						{
							objItem.addClass('item_hover');
						}
						
						objSelect.blnOpen = true;
		        	},
		        	'mouseleave': function()
		        	{
						if(objItem.number == 1)
						{
							objItem.removeClass('first_hover');
						}
						if(objItem.number == 2)
						{
							objItem.removeClass('first_real_hover');
						}
						else if(objItem.number == objOptions.length)
						{
							objItem.removeClass('last_hover');
						}
						else
						{
							objItem.removeClass('item_hover');
						}
		        	},
		        	'click': function()
		        	{
		        		objSelect.value = option.value;
		        		objCurrentOption.set('html', option.text);
		        		objSelect.closeOptions();
						
						var string = document.location.href;
						var regex = new RegExp('/(en|nl)/', 'ig');
						var string = string.replace(regex, '/' + option.value + '/');
						
						if(string != document.location.href)
						{
							document.location.href = string;
						}
		        	}
			    },
		        'class': 'item'
			}).set('html', option.text).injectInside(objFakeOptions);
				
			objItem.number = a;
			
			if(objItem.number == 1)
			{
				objItem.addClass('first');
			}
			if(objItem.number == 2)
			{
				objItem.addClass('first_real');
			}
			else if(objItem.number == objOptions.length)
			{
				objItem.addClass('last');
			}
			
			a++;
		});
		
	});
}

function customTextarea(argInputClass, argResizeToWidth, argResizeToHeight, argMaximizeIcon, argMinimizeIcon, argImageWidth, argImageHeight)
{
	$$('textarea.' + argInputClass).each(function(objTextarea)
	{
		objTextarea.intStartHeight = objTextarea.getStyle('height');
		objTextarea.intStartWidth = objTextarea.getStyle('width');
		objTextarea.intStartBorder = objTextarea.getStyle('border');
		//objTextarea.intStartBackground = objTextarea.getStyle('background');
		objTextarea.intStartBackground = 'none';
		
		objTextarea.strName = objTextarea.getProperty('name');
		objTextarea.strId = objTextarea.getProperty('id');
		
		var objSizer = new Element('img', {'src': argMaximizeIcon});
		var intImageWidth = argImageWidth;
		var intImageHeight = argImageHeight;
		var intOffset = 4;
		
		// create a wrapper to hold the textarea
		var objTextareaWrapper = new Element('div',
		{
			'styles':
			{
		        'position': 'relative',
		        'width': parseInt(objTextarea.intStartWidth) - (intImageWidth) + 'px',
		        'height': objTextarea.intStartHeight,
		        'border': 'none',
		        'background': objTextarea.intStartBackground
		    }
		}).injectBefore(objTextarea);
		
		// create the textarea
		var objNewTextarea = new Element('textarea',
		{	
			'name': objTextarea.strName,
			'id': objTextarea.strId,
			'styles':
			{
		        'position': 'absolute',
				'top': '0px',
				'left': '0px',
				'height': parseInt(objTextarea.intStartHeight) - intOffset + 'px',
				'width': parseInt(objTextarea.intStartWidth) - (intImageWidth + intOffset + 1) + 'px',
				'overflow' : 'auto',
				'z-index': '10'
		    }
		}).injectInside(objTextareaWrapper);
		
		objSizer.setStyles(
		{
			'position': 'absolute',
			'top': '1px',
			'right': '-' + (intImageWidth + intOffset) + 'px',
			'z-index': '999' ,
			'cursor': 'pointer'
		});
		
		objSizer.addEvent('click', function()
		{
			if(objTextareaWrapper.getStyle('height') == objTextarea.intStartHeight)
    		{
    			objSizer.setProperty('src', argMinimizeIcon);
    				
    			new Fx.Styles(objTextareaWrapper, {duration: 200, transition: Fx.Transitions.linear}).start(
    			{
				    'height': argResizeToHeight,
				    'width': argResizeToWidth
				});
				
				new Fx.Styles(objNewTextarea, {duration: 200, transition: Fx.Transitions.linear}).start(
				{
				    'height': (argResizeToHeight - intOffset),
				    'width': (argResizeToWidth - intOffset)
				});
    			
    		}
    		else
    		{
    			objSizer.setProperty('src', argMaximizeIcon);

    			new Fx.Styles(objTextareaWrapper, {duration: 200, transition: Fx.Transitions.linear}).start(
    			{
				    'height': objTextarea.intStartHeight,
				    'width': (parseInt(objTextarea.intStartWidth) - intImageWidth)
				});
				
				new Fx.Styles(objNewTextarea, {duration: 200, transition: Fx.Transitions.linear}).start(
				{
				    'height': (parseInt(objTextarea.intStartHeight) - intOffset),
				    'width': (parseInt(objTextarea.intStartWidth) - (intImageWidth + intOffset))
				});
    			
    		}
		});
		
		objSizer.setProperty('name', objTextarea.strName);
		objSizer.setProperty('id', objTextarea.strId);
		
		objSizer.injectInside(objTextareaWrapper);
		
		objTextarea.remove();
	});
	
}

// Custom Dropdown
var CustomSelect = new Class(
{
	arrSelect: null,
	initialize:function()
	{		
		this.arrSelect = $$('select');
		
		this.arrSelect.each(function(elSelect, i)
		{
			//var intWidth = elSelect.measure(function(){ return elSelect.getSize().x; });
			var intWidth = elSelect.getDimensions().x;
			var elDiv = new Element('div',
			{
				'class': 'custom_dropdown_wrapper',
				'styles':
				{
					'width': intWidth
				}
			});
			
			var strSelected = $defined(elSelect.getSelected()[0].text) ? elSelect.getSelected()[0].text : '';
			
			var elLabel = new Element('span',
			{
				'class': 'label',
				'text': elSelect.getSelected()[0].text
			});
			
			var elArrow = new Element('span',
			{
				'class': 'arrow'
			});
			
			elDiv.wraps(elSelect);
			elLabel.inject(elSelect, 'before');
			elArrow.inject(elSelect, 'before');
			
			//elSelect.getParent().getElement(elLabel).set('text', elSelect.get('value'));
			elSelect.addEvents(
			{
				mouseenter:function()
				{
					elDiv.addClass('hover');
				},
				mouseleave:function()
				{
					elDiv.removeClass('hover');
				},
				change:function()
				{
					elLabel.set('text', elSelect.getSelected()[0].text);
				}
			});
		});
	}
	
});


// autostart monxbox
//window.addEvent('load', function() {createMonxBox()});