var sLedit = new Class({
initialize: function(sLclass) {
//start editor
 
$$(sLclass).each(function(el) {
 
var hilighter = new Fx.Style(el, 'background-color', {wait: false});
 
$(el).addEvent('mouseover', function() {
hilighter.start('#ffffcc');
});
 
$(el).addEvent('mouseout', function() {
hilighter.start('#ffffff');
});
 
if($(el).getProperty('rel').indexOf('textarea') > -1){
 
$(el).addEvent('click', function() {
 
var rel = $(el).getProperty('rel');
var params = parseQuery(rel.substr(5,999));
 
$(el).style.display = 'none';
var content = this.innerHTML;
var container = new Element('div').injectAfter(el);
 
//check params are suitable or set base attributes
if(params['rows'] == undefined)	params['rows'] = '15';
if(params['cols'] == undefined) params['cols'] = '65';
 
var txtID = 'mce_'+$(el).getProperty('id');
 
//textarea
var textarea = new Element('textarea').injectInside(container);
textarea.value = content;
textarea.setProperty('class', 'mceEditor');
textarea.setProperty('id', txtID);
textarea.setStyle('position','relative');
textarea.setProperties({
rows: params['rows'],
cols: params['cols']
});
 
setTextareaToTinyMCE(txtID);
 
//save + cancel div
var saveDiv = new Element('div').injectInside(container);
saveDiv.setProperty('class', 'txtAreaSave');
 
//cancel
var cancel = new Element('a').injectInside(saveDiv);
cancel.setProperty('href', 'javascript:;');
cancel.innerHTML = 'cancel';
 
//seperator
var span = new Element('span').injectAfter(cancel);
span.innerHTML = ' - ';
 
//save
var save = new Element('a').injectInside(saveDiv);
save.setProperty('href', 'javascript:;');
save.innerHTML = 'save';
 
//response
var response = new Element('div').injectBefore(saveDiv);
response.setStyles({'width':'600px'});
response.id = 'txtReponse';
 
save.addEvent('click', function() {
unsetTextareaToTinyMCE(txtID);
$(el).style.display = 'block';
$(el).innerHTML = textarea.value;
 
//values
var rel = $(el).getProperty('rel');
var params = parseQuery(rel.substr(5,999));
var url = '/ajax/update.php';
var pars = 'module_type='+params['module_type']
+'&type_sid='+params['type_sid']
+'&sid='+params['sid']
+'&content='+escape(textarea.value);
 
new Ajax( url, {
method: 'post',
postBody: pars,
update: $('txtReponse'),
onComplete: function(){
var responseFade = new Fx.Style('txtReponse', 'opacity', {
duration:3000,
onComplete:function(){
$('txtReponse').remove();
}
});
responseFade.start.pass([1,0],responseFade).delay(2000);
}
}
).request();
 
textarea.remove();
this.remove();
cancel.remove();
span.remove();
saveDiv.remove();
});
 
cancel.addEvent('click', function() {
unsetTextareaToTinyMCE(txtID);
$(el).style.display = 'block';
textarea.remove();
this.remove();
save.remove();
span.remove();
saveDiv.remove();
});
 
});
}
if($(el).getProperty('rel') == 'input'){
$(el).addEvent('click', function() {
$(el).style.display = 'none';
 
var content = this.innerHTML;
var container = this.parentNode;
 
//input
var textarea = new Element('input').injectInside(container);
textarea.value = content;
textarea.setProperty('size',5);
 
//save + cancel div
var saveDiv = new Element('span').injectInside(container);
saveDiv.setProperty('class', 'inputSave');
 
//cancel
var cancel = new Element('a').injectInside(saveDiv);
cancel.setProperty('href', 'javascript:;');
cancel.innerHTML = 'x';
 
//seperator
var span = new Element('span').injectAfter(cancel);
span.innerHTML = ' - ';
 
//save
var save = new Element('a').injectInside(saveDiv);
save.setProperty('href', 'javascript:;');
save.innerHTML = 's';
 
save.addEvent('click', function() {
$(el).style.display = 'block';
$(el).innerHTML = textarea.value;
 
/* new Ajax() */
textarea.remove();
this.remove();
cancel.remove();
span.remove();
saveDiv.remove();
});
cancel.addEvent('click', function() {
$(el).style.display = 'block';
textarea.remove();
this.remove();
save.remove();
span.remove();
saveDiv.remove();
});
});
}
if($(el).getProperty('rel').indexOf('image') > -1){
 
var rel = $(el).getProperty('rel');
var params = parseQuery(rel.substr(5,999));
$(el).style.cursor = 'pointer';
if( $(el).getParent().getParent().href ) $(el).getParent().getParent().href = '#';
if( $(el).getParent().href ) $(el).getParent().href = '#';
 
$(el).addEvent('click', function() {
 
var imgForm = new Element('form').setProperties({
'action': '/ajax/update.php',
'method': 'post',
'id': 'newImageForm',
'enctype':'multipart/form-data'
});
imgForm.setStyles({ 'text-align':'left' });
imgForm.innerHTML = '<img src="'+$(el).src+'" alt="'+$(el).alt+'" />
 
'
+'
 
<input id="module_type" name="module_type" value="skin_variable" type="hidden" />'
+' <input id="type_sid" name="type_sid" value="'+params[" type="hidden" />'
+' <input id="sid" name="sid" value="'+params[" type="hidden" />'
+'Alt Tag: <input class="textField" id="alt" name="alt" value="'+$(el).alt+'" style="width: 375px" type="input" />'
+'File to Upload:
<input class="textField" id="userimage" name="userimage" type="file" />';var boxHtml = new MooPrompt('Upload a New Image', imgForm, {
buttons: 2,
button1: 'Submit',
button2: 'Cancel',
width: 500,
height: 400,
onButton1: function() {
console.log($('userimage').value.length &gt; 0)
if( $('userimage').value.length &lt; 1 ||
$('userimage').value.length &gt; 0 &amp;&amp;
$('userimage').value.indexOf('.jpg') &gt; -1)
$('newImageForm').submit();
else
alert('Please only upload .jpg files');
}
});
});
}
});}
});
//////////////////////////////////////////////////////////////////////////
// TinyMCE helper functions
//////////////////////////////////////////////////////////////////////////
bTextareaWasTinyfied = false; //this should be global, could be stored in a cookie...
function setTextareaToTinyMCE(sEditorID) {
var oEditor = document.getElementById(sEditorID);
if(oEditor &amp;&amp; !bTextareaWasTinyfied) {
tinyMCE.execCommand('mceAddControl', true, sEditorID);
bTextareaWasTinyfied = true;
}
return;
}
function unsetTextareaToTinyMCE(sEditorID) {
var oEditor = document.getElementById(sEditorID);
if(oEditor &amp;&amp; bTextareaWasTinyfied) {
tinyMCE.execCommand('mceRemoveControl', true, sEditorID);
bTextareaWasTinyfied = false;
}
return;
}
//////////////////////////////////////////////////////////////////////////
// parseQuery code borrowed from ibox borrowed from thickbox, Thanks Cody!
// retrieve rel attributes with cols=x&amp;rows=x
//////////////////////////////////////////////////////////////////////////
parseQuery = function(query) {
var Params = new Object ();
if (!query) return Params;
var Pairs = query.split(/[;&amp;]/);
for ( var i = 0; i &lt; Pairs.length; i++ ) {
var KeyVal = Pairs[i].split('=');
if ( ! KeyVal || KeyVal.length != 2 ) continue;
var key = unescape( KeyVal[0] );
var val = unescape( KeyVal[1] );
val = val.replace(/\+/g, ' ');
Params[key] = val;
}
return Params;
}

 
<!-- include script dependancies --->
<script src="/skin/shared/js/moo.tools.v1.js" type="text/javascript"></script>
<script src="/skin/shared/js/moo.prompt.v1.js" type="text/javascript"></script>
<script src="/skin/shared/js/tinymce/tiny_mce.js" type="text/javascript"></script>
<script src="/skin/shared/js/sLedit.v1.js" type="text/javascript"></script>

 
Image:
<img src="/images/yeahdude.gif" alt="YEAH DUDE" class="sLedit" rel="image" border="0" />
TextArea:
<p class="sLedit" rel="textarea&amp;cols=50&amp;rows=20">TEXTTEXTTEXT</p>
input field:
<span class="sLedit" rel="input">TEXTTEXTTEXT
</span>

 
window.onload = function(){
new sLedit(".sLedit");
};

 
//////////////////////////////////////////////////////////////////////////////////////////////////
/* sLvalidate - v1.0 - 5:16 PM 20/03/2007
	@author: kc@slajax.com
	@validates entries for sLquantity before posting to update cookie
			var sLvalidateOpts = { 
					items:'select', // boxes to gather
					submitBtn: 'button', // id of submit button
					valid: true // this must be set to true for validation to occur
					};	
*/
//////////////////////////////////////////////////////////////////////////////////////////////////
 
var sLvalidate = new Class({
		initialize:function(options){
			this.setOptions(options);
			this.href(options);
		},
		setOptions:function(options){
			this.options = Object.extend( { }, options || { } );
		},
		gather:function(options){
			this.resetErrors(options);
			this.itemArr = [];
			this.itemObj = {};
			
		$$(options.items).each(function(el,i){
					this.itemArr[i] = $(el).options[$(el).selectedIndex].value;
					this.itemObj[i] = $(el);
				}.bind(this) );
				
			this.validate(options);
		},
		validate:function(options){				
			this.itemArr.each(function(el,i){ 				
				if ( this.itemArr[i] == 0 )
							this.throwError(options, i);							
				}.bind(this) );
 
		 if( options.valid ) document.forms[0].submit()
		},
		throwError:function(options, i){
			options.valid = false;
				this.itemObj[i].getParent().getParent().setStyle('background-color','#FF0000');
				this.itemObj[i].getParent().getParent().setStyle('padding','2px 0px 2px 2px');
				
		},
		resetErrors:function(options){
			options.valid = true;
			$$(options.items).each(function(el,i){
					$(el).getParent().getParent().setStyle('background-color','#FFFFFF');		
					$(el).getParent().getParent().setStyle('padding','0');
			}.bind(this) );
		},
		href:function(options){
					$(options.submitBtn).addEvent('click', function(){
								this.gather(options);	
						}.bind(this) );		
		}
});
 
var sLvalidateOpts = { 
			items:'select', // boxes to gather
			submitBtn: 'button', // id of submit button
			valid: true // this must be set to true for validation to occur
			};	
 
		var validate = new sLvalidate(sLvalidateOpts);

 
var sLquantity = new Class({
	initialize:function(options){
		this.setOptions(options);
		if($(this.options.conId))
		$(this.options.conId).addClass(this.options.conClass.split('.')[1]);
		this.gather(options);
	},
	setOptions:function(options){
		this.options = Object.extend( { }, options || {} );
	},
	gather:function(options){
	$$(options.plusClass).each(function(el){
			$(el).addEvent('mousedown',this.plusHref.pass([el], this));
		}.bind(this) );
	$$(options.minusClass).each(function(el){
			$(el).addEvent('mousedown', this.minusHref.pass([el], this));
		}.bind(this) );
	},
	fX:function(options, stack){
		introFx = new Fx.Style(stack, 'opacity', {duration: options.introDur, transition: Fx.Transitions.linear});
		introFx.start(0 ,1);
		stack = null;
	},
	minusHref:function(el){		
		if( $$(this.options.conClass).length > 1) 
				$$(this.options.conClass)[$$(this.options.conClass).length-1].remove();
	},
	plusHref:function(){			
		var stack = this.cloneObj(this.options.conClass).injectAfter( $$(this.options.conClass)[$$(this.options.conClass).length-1] ).setOpacity(0);
			stack.getChildren().each(function(el){
				if( $(el).getTag() == 'img')
					$(el).remove()
				}.bind(this) );
		this.fX(this.options, stack);
	},
	cloneObj:function(el){
		return $$(this.options.conClass)[0].clone();
	}
});	
 
			var sLquantityOpts = { 
			// sLquantity - v1.0 - 3:13 PM 15/03/2007 
			// @author: kc@slajax.com
					conId:'ShoppingDrops', // the container ID of the object to clone
					conClass:'.ShoppingDrops', // the class name of the same object (id will be phased out)
					minusClass:'.ShoppingMinus', // the button class of the element which adds new objects
					plusClass:'.ShoppingPlus', // the button class of the element which removes the last object added
					introDur: 200 // the duration of the fade in for a cloned element
					};	
 
		var quantity = new sLquantity(sLquantityOpts);