/*
	MonxTools for MooTools
	by Robert Slootjes - MediaMonks, www.mediamonks.com
	Copyright 2007
	
	version history:
	
	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');
		
		if(objCheckbox.checked == true)
		{
			objCheckbox.objImage.src = strCheckedImage;
		}
		else
		{
			objCheckbox.objImage.src = strUncheckedImage;
		}
		
		objCheckbox.objImage.addEvent('click', function()
		{
			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.injectAfter(objCheckbox);
	}
	);
}

/************************************************************************************************************
 *	
 *	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');

		if(objRadio.checked == true)
		{
			objRadio.objImage.src = strCheckedImage;
		}
		else
		{
			objRadio.objImage.src = strUncheckedImage;
		}
		
		objRadio.objImage.addEvent('click', function()
		{
			$$('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.injectAfter(objRadio);
	}
	);
}


/************************************************************************************************************
 *	
 *	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', '900');
			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', '900');
			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 objWrapper = new Element('div',
		{
			'events':
	    	{
				'click': function()
	        	{
	        		if('none' == objFakeOptions.getStyle('display') && false == objSelect.blnOpen)
	        		{
		        		objSelect.openOptions();
	        		}
	        		else
	        		{
	        			objSelect.closeOptions();
	        		}
	        	}
	    	},
	        'class': argSetClass
		}).injectBefore(objSelect)
		
		// 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);
	        	},
	        	'click': function()
	        	{
	        		objSelect.blnOpen = false;
	        		objSelect.checkClose.delay(1);
	        	}
	    	},
		    'class': 'options'
		}).injectInside(objWrapper);
		
		
		// add the options to the option wrapper
		var a = 1;
		objOptions.each(function(option)
		{
			var objItem = new Element('div',
			{
			    'events':
		    	{
					'mouseenter': function()
		        	{
		        		if(objItem.number == 1)
						{
							objItem.addClass('first_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');
						}
						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();
		        		
		        		// triggers event on original select
		        		objSelect.fireEvent('change');
		        	}
			    },
		        'class': 'item'
			}).set('html', option.text).injectInside(objFakeOptions);
				
			objItem.number = a;
			
			if(objItem.number == 1)
			{
				objItem.addClass('first');
			}
			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();
	});
	
}

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