Merge branch 'jquery' of https://github.com/pradosoft/prado into jquery

12 files changed, 397 insertions, 383 deletions

diff --git a/demos/quickstart/protected/pages/Controls/Samples/TSlider/Home.page b/demos/quickstart/protected/pages/Controls/Samples/TSlider/Home.page
index bfbbe8e3..6c79fae4 100755
--- a/demos/quickstart/protected/pages/Controls/Samples/TSlider/Home.page
+++ b/demos/quickstart/protected/pages/Controls/Samples/TSlider/Home.page
@@ -16,7 +16,7 @@ Horizontal slider from -50 to 50,  Javascript 'onSlide' handler, ServerSide 'onS
 </td><td class="sampleaction">
 <com:TSlider id="slider2" AutoPostBack="true"  Direction="Horizontal" Value="0" Enabled="true" MinValue="-50" MaxValue="50" OnValueChanged="slider2Changed">
 	<prop:ClientSide.onSlide>
-		$('slider2value').innerHTML = value;
+		$('#slider2value').get(0).innerHTML = value;
 	</prop:ClientSide.onSlide>
 </com:TSlider>
 Value  : <span id="slider2value"><%=$this->slider2->value%></span>
@@ -28,14 +28,14 @@ Vertical slider from 0 to 1, Javascript 'onSlide' handler, ServerSide 'onSliderC
 </td><td class="sampleaction">
 <com:TSlider id="slider3" AutoPostBack="false" Direction="Vertical" Enabled="true" MinValue="0" MaxValue="1" StepSize="0.1" OnValueChanged="slider3Changed">
 	<prop:ClientSide.onSlide>
-		$('slider3value').innerHTML = value;
+		$('#slider3value').get(0).innerHTML = value;
 	</prop:ClientSide.onSlide>
 </com:TSlider>
 Value  : <span id="slider3value"><%=$this->slider3->value%></span>
 </td><td class="sampleaction">
 <com:TButton Text="Submit"/>
 <com:TLabel id="slider3Result"/>
-</td></tr>

-</table>

+</td></tr>
+</table>
 
 </com:TContent>
\ No newline at end of file
diff --git a/framework/Web/Javascripts/packages.php b/framework/Web/Javascripts/packages.php
index 6f962760..bc3bae1e 100644
--- a/framework/Web/Javascripts/packages.php
+++ b/framework/Web/Javascripts/packages.php
@@ -114,20 +114,21 @@ $dependencies = array(
 		'ajax'				=> array('jquery', 'prado', 'ajax'),
 		'logger'			=> array('jquery', 'prado', 'logger'),
 		'activefileupload'	=> array('jquery', 'prado', 'ajax', 'activefileupload'),
-
-		'effects'			=> array('prototype', 'prado', 'effects'),
-		'datepicker'		=> array('prototype', 'prado', 'datepicker'),
-		'colorpicker'		=> array('prototype', 'prado', 'colorpicker'),
+		'effects'			=> array('jquery', 'jqueryui'),
+		'datepicker'		=> array('jquery', 'prado', 'datepicker'),
+		'activedatepicker'	=> array('jquery', 'prado', 'datepicker', 'ajax', 'activedatepicker'),
+		'colorpicker'		=> array('jquery', 'prado', 'colorpicker'),
+		'htmlarea'			=> array('jquery', 'prado', 'htmlarea'),
+		'htmlarea4'			=> array('jquery', 'prado', 'htmlarea4'),
+		'keyboard'			=> array('jquery', 'prado', 'keyboard'),
+		'slider'			=> array('jquery', 'prado', 'slider'),
+/*
 		'dragdrop'			=> array('prototype', 'prado', 'effects', 'ajax', 'dragdrop'),
-		'slider'			=> array('prototype', 'prado', 'slider'),
-		'keyboard'			=> array('prototype', 'prado', 'keyboard'),
-		'activedatepicker'	=> array('prototype', 'prado', 'datepicker', 'ajax', 'activedatepicker'),
 		'dragdropextra'		=> array('prototype', 'prado', 'effects', 'ajax', 'dragdrop','dragdropextra'),
 		'accordion'			=> array('prototype', 'prado', 'effects', 'accordion'),
-		'htmlarea'			=> array('prototype', 'prado', 'htmlarea'),
-		'htmlarea4'			=> array('prototype', 'prado', 'htmlarea4'),
 		'ratings'			=> array('prototype', 'prado', 'effects', 'ajax', 'ratings'),
 		'inlineeditor'		=> array('prototype', 'prado', 'effects', 'ajax', 'inlineeditor'),
+		*/
 		'jqueryui'			=> array('jquery', 'jqueryui'),
 );
 
diff --git a/framework/Web/Javascripts/source/prado/activecontrols/activedatepicker.js b/framework/Web/Javascripts/source/prado/activecontrols/activedatepicker.js
index b6d94b0b..c0268077 100755
--- a/framework/Web/Javascripts/source/prado/activecontrols/activedatepicker.js
+++ b/framework/Web/Javascripts/source/prado/activecontrols/activedatepicker.js
@@ -6,7 +6,7 @@ Prado.WebUI.TActiveDatePicker = jQuery.klass(Prado.WebUI.TDatePicker,
 	onInit : function(options)
 	{
 		this.options = options || [];
-		this.control = $(options.ID);
+		this.control = $('#'+options.ID).get(0);
 		this.dateSlot = new Array(42);
 		this.weekSlot = new Array(6);
 		this.minimalDaysInFirstWeek	= 4;
@@ -17,7 +17,7 @@ Prado.WebUI.TActiveDatePicker = jQuery.klass(Prado.WebUI.TDatePicker,
 		//which element to trigger to show the calendar
 		if(this.options.Trigger)
 		{
-			this.trigger = $(this.options.Trigger) ;
+			this.trigger = $('#'+this.options.Trigger).get(0) ;
 			var triggerEvent = this.options.TriggerEvent || "click";
 		}
 		else
@@ -32,7 +32,7 @@ Prado.WebUI.TActiveDatePicker = jQuery.klass(Prado.WebUI.TDatePicker,
 			this.positionMode = this.options.PositionMode;
 		}
 
-		Object.extend(this,options);
+		jQuery.extend(this,options);
 
 		if (this.options.ShowCalendar)
 			this.observe(this.trigger, triggerEvent, jQuery.proxy(this.show,this));
diff --git a/framework/Web/Javascripts/source/prado/colorpicker/colorpicker.js b/framework/Web/Javascripts/source/prado/colorpicker/colorpicker.js
index 14195090..54680922 100644
--- a/framework/Web/Javascripts/source/prado/colorpicker/colorpicker.js
+++ b/framework/Web/Javascripts/source/prado/colorpicker/colorpicker.js
@@ -79,7 +79,7 @@ Rico.Color.prototype = {
    },
 
    asHex: function() {
-      return "#" + this.rgb.r.toColorPart() + this.rgb.g.toColorPart() + this.rgb.b.toColorPart();
+      return "#" + this.toColorPart(this.rgb.r) + this.toColorPart(this.rgb.g) + this.toColorPart(this.rgb.b);
    },
 
    asHSB: function() {
@@ -88,8 +88,13 @@ Rico.Color.prototype = {
 
    toString: function() {
       return this.asHex();
-   }
+   },
 
+   toColorPart: function(number) {
+        number = (number > 255 ? 255 : (number < 0 ? 0 : number));
+        var hex = number.toString(16);
+        return hex.length < 2 ? "0" + hex : hex;               
+    }
 };
 
 Rico.Color.createFromHex = function(hexCode) {
@@ -122,7 +127,7 @@ Rico.Color.createFromHex = function(hexCode) {
  */
 Rico.Color.createColorFromBackground = function(elem) {
 
-   var actualColor = Element.getStyle($(elem), "background-color");
+   var actualColor = jQuery(elem).css("background-color");
   if ( actualColor == "transparent" && elem.parent )
       return Rico.Color.createColorFromBackground(elem.parent);
 
@@ -241,40 +246,9 @@ Rico.Color.RGBtoHSB = function(r, g, b) {
    return { h : hue, s : saturation, b : brightness };
 };
 
+Prado.WebUI.TColorPicker = jQuery.klass(Prado.WebUI.Control, {
 
-Prado.WebUI.TColorPicker = jQuery.klass();
-
-Object.extend(Prado.WebUI.TColorPicker,
-{
-	palettes:
-	{
-		Small : [["fff", "fcc", "fc9", "ff9", "ffc", "9f9", "9ff", "cff", "ccf", "fcf"],
-				["ccc", "f66", "f96", "ff6", "ff3", "6f9", "3ff", "6ff", "99f", "f9f"],
-				["c0c0c0", "f00", "f90", "fc6", "ff0", "3f3", "6cc", "3cf", "66c", "c6c"],
-				["999", "c00", "f60", "fc3", "fc0", "3c0", "0cc", "36f", "63f", "c3c"],
-				["666", "900", "c60", "c93", "990", "090", "399", "33f", "60c", "939"],
-				["333", "600", "930", "963", "660", "060", "366", "009", "339", "636"],
-				["000", "300", "630", "633", "330", "030", "033", "006", "309", "303"]],
-
-		Tiny : [["ffffff"/*white*/, "00ff00"/*lime*/, "008000"/*green*/, "0000ff"/*blue*/],
-				["c0c0c0"/*silver*/, "ffff00"/*yellow*/, "ff00ff"/*fuchsia*/, "000080"/*navy*/],
-				["808080"/*gray*/, "ff0000"/*red*/, "800080"/*purple*/, "000000"/*black*/]]
-	},
-
-	UIImages :
-	{
-		'button.gif' : 'button.gif',
-//		'target_black.gif' : 'target_black.gif',
-//		'target_white.gif' : 'target_white.gif',
-		'background.png' : 'background.png'
-//		'slider.gif' : 'slider.gif',
-//		'hue.gif' : 'hue.gif'
-	}
-});
-
-Object.extend(Prado.WebUI.TColorPicker.prototype,
-{
-	initialize : function(options)
+	onInit : function(options)
 	{
 		var basics =
 		{
@@ -289,16 +263,16 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 		this.element = null;
 		this.showing = false;
 
-		options = Object.extend(basics, options);
+		options = jQuery.extend(basics, options);
 		this.options = options;
-		this.input = $(options['ID']);
-		this.button = $(options['ID']+'_button');
-		this._buttonOnClick = this.buttonOnClick.bind(this);
+		this.input = $('#'+options['ID']).get(0);
+		this.button = $('#'+options['ID']+'_button').get(0);
+		this._buttonOnClick = jQuery.proxy(this.buttonOnClick, this);
 		if(options['ShowColorPicker'])
-			Event.observe(this.button, "click", this._buttonOnClick);
-		Event.observe(this.input, "change", this.updatePicker.bind(this));
+			this.observe(this.button, "click", this._buttonOnClick);
+		this.observe(this.input, "change", jQuery.proxy(this.updatePicker, this));
 		
-		Prado.Registry.set(options.ID, this);
+		Prado.Registry[options.ID] = this;
 	},
 
 	updatePicker : function(e)
@@ -317,15 +291,6 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 			this.input.parentNode.appendChild(this.element);
 			this.element.style.display = "none";
 
-			if(Prado.Browser().ie)
-			{
-				this.iePopUp = document.createElement('iframe');
-				this.iePopUp.src = Prado.WebUI.TColorPicker.UIImages['button.gif'];
-				this.iePopUp.style.position = "absolute"
-				this.iePopUp.scrolling="no"
-				this.iePopUp.frameBorder="0"
-				this.input.parentNode.appendChild(this.iePopUp);
-			}
 			if(mode == "Full")
 				this.initializeFullPicker();
 		}
@@ -336,20 +301,18 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 	{
 		if(!this.showing)
 		{
-			var pos = this.input.positionedOffset();
-			pos[1] += this.input.offsetHeight;
+			var pos = jQuery(this.input).position();
+			pos['top'] += this.input.offsetHeight;
 
-			this.element.style.top = (pos[1]-1) + "px";
-			this.element.style.left = pos[0] + "px";
+			this.element.style.top = (pos['top']-1) + "px";
+			this.element.style.left = pos['left'] + "px";
 			this.element.style.display = "block";
 
-			this.ieHack(type);
-
 			//observe for clicks on the document body
-			this._documentClickEvent = this.hideOnClick.bindEvent(this, type);
-			this._documentKeyDownEvent = this.keyPressed.bindEvent(this, type);
-			Event.observe(document.body, "click", this._documentClickEvent);
-			Event.observe(document,"keydown", this._documentKeyDownEvent);
+			this._documentClickEvent = jQuery.bind(this.hideOnClick, this, type);
+			this._documentKeyDownEvent = jQuery.bind(this.keyPressed, this, type);
+			this.observe(document.body, "click", this._documentClickEvent);
+			this.observe(document,"keydown", this._documentKeyDownEvent);
 			this.showing = true;
 
 			if(type == "Full")
@@ -366,17 +329,14 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 	{
 		if(this.showing)
 		{
-			if(this.iePopUp)
-				this.iePopUp.style.display = "none";
-
 			this.element.style.display = "none";
 			this.showing = false;
-			Event.stopObserving(document.body, "click", this._documentClickEvent);
-			Event.stopObserving(document,"keydown", this._documentKeyDownEvent);
+			this.stopObserving(document.body, "click", this._documentClickEvent);
+			this.stopObserving(document,"keydown", this._documentKeyDownEvent);
 
 			if(this._observingMouseMove)
 			{
-				Event.stopObserving(document.body, "mousemove", this._onMouseMove);
+				this.stopObserving(document.body, "mousemove", this._onMouseMove);
 				this._observingMouseMove = false;
 			}
 		}
@@ -384,14 +344,15 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 
 	keyPressed : function(event,type)
 	{
-		if(Event.keyCode(event) == Event.KEY_ESC)
+		// esc
+		if(event.keyCode == 27)
 			this.hide(event,type);
 	},
 
 	hideOnClick : function(ev)
 	{
 		if(!this.showing) return;
-		var el = Event.element(ev);
+		var el = ev.target;
 		var within = false;
 		do
 		{	within = within || String(el.className).indexOf('FullColorPicker') > -1
@@ -404,53 +365,60 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 		if(!within) this.hide(ev);
 	},
 
-	ieHack : function()
-	{
-		// IE hack
-		if(this.iePopUp)
-		{
-			this.iePopUp.style.display = "block";
-			this.iePopUp.style.top = (this.element.offsetTop) + "px";
-			this.iePopUp.style.left = (this.element.offsetLeft)+ "px";
-			this.iePopUp.style.width = Math.abs(this.element.offsetWidth)+ "px";
-			this.iePopUp.style.height = (this.element.offsetHeight + 1)+ "px";
-		}
-	},
-
 	getBasicPickerContainer : function(pickerID, palette)
 	{
-		var table = TABLE({className:'basic_colors palette_'+palette},TBODY());
+		var div;
+		var table;
+		var tbody;
+		var tr;
+		var td;
+
+		// main div
+		div = document.createElement("div");
+		div.className = this.options['ClassName']+" BasicColorPicker";
+		div.id = pickerID+"_picker";
+
+		table = document.createElement("table");
+		table.className = 'basic_colors palette_'+palette;
+		div.appendChild(table);
+
+		tbody = document.createElement("tbody");
+		table.appendChild(tbody);
+
 		var colors = Prado.WebUI.TColorPicker.palettes[palette];
 		var pickerOnClick = this.cellOnClick.bind(this);
-		colors.each(function(color)
+		var obj=this;
+		jQuery.each(colors, function(idx, color)
 		{
 			var row = document.createElement("tr");
-			color.each(function(c)
+			jQuery.each(color, function(idx, c)
 			{
 				var td = document.createElement("td");
-				var img = IMG({src:Prado.WebUI.TColorPicker.UIImages['button.gif'],width:16,height:16});
+				var img = document.createElement("img");
+				img.src=Prado.WebUI.TColorPicker.UIImages['button.gif'];
+				img.width=16;
+				img.height=16;
 				img.style.backgroundColor = "#"+c;
-				Event.observe(img,"click", pickerOnClick);
-				Event.observe(img,"mouseover", function(e)
+				obj.observe(img,"click", pickerOnClick);
+				obj.observe(img,"mouseover", function(e)
 				{
-					Element.addClassName(Event.element(e), "pickerhover");
+					jQuery(e.target).addClass("pickerhover");
 				});
-				Event.observe(img,"mouseout", function(e)
+				obj.observe(img,"mouseout", function(e)
 				{
-					Element.removeClassName(Event.element(e), "pickerhover");
+					jQuery(e.target).removeClass("pickerhover");
 				});
 				td.appendChild(img);
 				row.appendChild(td);
 			});
 			table.childNodes[0].appendChild(row);
 		});
-		return DIV({className:this.options['ClassName']+" BasicColorPicker",
-					id:pickerID+"_picker"}, table);
+		return div;
 	},
 
 	cellOnClick : function(e)
 	{
-		var el = Event.element(e);
+		var el = e.target;
 		if(el.tagName.toLowerCase() != "img")
 			return;
 		var color = Rico.Color.createColorFromBackground(el);
@@ -469,98 +437,148 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 
 	getFullPickerContainer : function(pickerID)
 	{
-		//create the 3 buttons
+		//create the buttons
+		var okBtn = document.createElement("input");
+		okBtn.className = 'button';
+		okBtn.type = 'button';
+		okBtn.value = this.options.OKButtonText;
+
+		var cancelBtn = document.createElement("input");
+		cancelBtn.className = 'button';
+		cancelBtn.type = 'button';
+		cancelBtn.value = this.options.CancelButtonText;
+
 		this.buttons =
 		{
-			//Less   : INPUT({value:'Less Colors', className:'button', type:'button'}),
-			OK	   : INPUT({value:this.options.OKButtonText, className:'button', type:'button'}),
-			Cancel : INPUT({value:this.options.CancelButtonText, className:'button', type:'button'})
+			OK	   : okBtn,
+			Cancel : cancelBtn
 		};
 
 		//create the 6 inputs
 		var inputs = {};
-		['H','S','V','R','G','B'].each(function(type)
+		jQuery.each(['H','S','V','R','G','B'], function(idx, type)
 		{
-			inputs[type] = INPUT({type:'text',size:'3',maxlength:'3'});
+			inputs[type] = document.createElement("input");
+			inputs[type].type='text';
+			inputs[type].size='3';
+			inputs[type].maxlength='3';
 		});
 
 		//create the HEX input
-		inputs['HEX'] = INPUT({className:'hex',type:'text',size:'6',maxlength:'6'});
+		inputs['HEX'] = document.createElement("input");
+		inputs['HEX'].className = 'hex';
+		inputs['HEX'].type='text';
+		inputs['HEX'].size='6';
+		inputs['HEX'].maxlength='6';
+
 		this.inputs = inputs;
 
 		var images = Prado.WebUI.TColorPicker.UIImages;
 
-		this.inputs['currentColor'] = SPAN({className:'currentColor'});
-		this.inputs['oldColor'] = SPAN({className:'oldColor'});
-
-		var inputsTable =
-			TABLE({className:'inputs'}, TBODY(null,
-				TR(null,
-					TD({className:'currentcolor',colSpan:2},
-						this.inputs['currentColor'], this.inputs['oldColor'])),
-
-				TR(null,
-					TD(null,'H:'),
-					TD(null,this.inputs['H'], '??')),
+		this.inputs['currentColor'] = document.createElement("span");
+		this.inputs['currentColor'].className='currentColor';
+		this.inputs['oldColor'] = document.createElement("span");
+		this.inputs['oldColor'].className='oldColor';
 
-				TR(null,
-					TD(null,'S:'),
-					TD(null,this.inputs['S'], '%')),
+		var inputsTable = document.createElement("table");
+		inputsTable.className='inputs';
 
-				TR(null,
-					TD(null,'V:'),
-					TD(null,this.inputs['V'], '%')),
+		var tbody = document.createElement("tbody");
+		inputsTable.appendChild(tbody);
 
-				TR(null,
-					TD({className:'gap'},'R:'),
-					TD({className:'gap'},this.inputs['R'])),
+		var tr = document.createElement("tr");
+		tbody.appendChild(tr);
 
-				TR(null,
-					TD(null,'G:'),
-					TD(null, this.inputs['G'])),
+		var td= document.createElement("td");
+		tr.appendChild(td);
+		td.className='currentcolor';
+		td.colSpan=2;
+		td.appendChild(this.inputs['currentColor']);
+		td.appendChild(this.inputs['oldColor']);
 
-				TR(null,
-					TD(null,'B:'),
-					TD(null, this.inputs['B'])),
-
-				TR(null,
-					TD({className:'gap'},'#'),
-					TD({className:'gap'},this.inputs['HEX']))
-			));
+		this.internalAddRow(tbody, 'H:', this.inputs['H'], '°');
+		this.internalAddRow(tbody, 'S:', this.inputs['S'], '%');
+		this.internalAddRow(tbody, 'V:', this.inputs['V'], '%');
+		this.internalAddRow(tbody, 'R:', this.inputs['R'], null, 'gap');
+		this.internalAddRow(tbody, 'G:', this.inputs['G']);
+		this.internalAddRow(tbody, 'B:', this.inputs['B']);
+		this.internalAddRow(tbody, '#', this.inputs['HEX'], null, 'gap');
 
 		var UIimages =
 		{
-			selector : SPAN({className:'selector'}),
-			background : SPAN({className:'colorpanel'}),
-			slider : SPAN({className:'slider'}),
-			hue : SPAN({className:'strip'})
+			selector : document.createElement("span"),
+			background : document.createElement("span"),
+			slider : document.createElement("span"),
+			hue : document.createElement("span")
 		}
 
-		//png alpha channels for IE
-		if(Prado.Browser().ie)
-		{
-			var filter = "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader";
-			UIimages['background'] = SPAN({className:'colorpanel',style:filter+"(src='"+images['background.png']+"' sizingMethod=scale);"})
-		}
+		UIimages['selector'].className='selector';
+		UIimages['background'].className='colorpanel';
+		UIimages['slider'].className='slider';
+		UIimages['hue'].className='strip';
+
+		this.inputs = jQuery.extend(this.inputs, UIimages);
+
+		var pickerTable = document.createElement("table");
+		tbody=document.createElement("tbody");
+		pickerTable.appendChild(tbody);
+
+		var tr = document.createElement("tr");
+		tr.className='selection';
+		tbody.appendChild(tr);
+
+		var td= document.createElement("td");
+		tr.appendChild(td);
+		td.className='colors';
+		td.appendChild(UIimages['selector']);
+		td.appendChild(UIimages['background']);
+
+		var td= document.createElement("td");
+		tr.appendChild(td);
+		td.className='hue';
+		td.appendChild(UIimages['slider']);
+		td.appendChild(UIimages['hue']);
+
+		var td= document.createElement("td");
+		tr.appendChild(td);
+		td.className='inputs';
+		td.appendChild(inputsTable);
+
+		var tr = document.createElement("tr");
+		tr.className='options';
+		tbody.appendChild(tr);
+
+		var td= document.createElement("td");
+		tr.appendChild(td);
+		td.colSpan=3;
+		td.appendChild(this.buttons['OK']);
+		td.appendChild(this.buttons['Cancel']);
+
+		var div = document.createElement('div');
+		div.className=this.options['ClassName']+" FullColorPicker";
+		div.id=pickerID+"_picker";
+		div.appendChild(pickerTable);
+		return div;
+	},
 
-		this.inputs = Object.extend(this.inputs, UIimages);
-
-		var pickerTable =
-			TABLE(null,TBODY(null,
-				TR({className:'selection'},
-					TD({className:'colors'},UIimages['selector'],UIimages['background']),
-					TD({className:'hue'},UIimages['slider'],UIimages['hue']),
-					TD({className:'inputs'}, inputsTable)
-				),
-				TR({className:'options'},
-					TD({colSpan:3},
-						this.buttons['OK'],
-						this.buttons['Cancel'])
-				)
-			));
-
-		return DIV({className:this.options['ClassName']+" FullColorPicker",
-						id:pickerID+"_picker"},pickerTable);
+	internalAddRow : function(tbody, label1, object2, label2, className)
+	{
+		var tr = document.createElement("tr");
+		tbody.appendChild(tr);
+
+		var td= document.createElement("td");
+		if(className!==undefined && className!==null)
+			td.className=className;
+		tr.appendChild(td);
+		td.appendChild(document.createTextNode(label1));
+
+		var td= document.createElement("td");
+		if(className!==undefined && className!==null)
+			td.className=className;
+		tr.appendChild(td);
+		td.appendChild(object2);
+		if(label2!==undefined && label2!==null)
+			td.appendChild(document.createTextNode(label2));
 	},
 
 	initializeFullPicker : function()
@@ -572,7 +590,7 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 		var i = 0;
 		for(var type in this.inputs)
 		{
-			Event.observe(this.inputs[type], "change",
+			this.observe(this.inputs[type], "change",
 				jQuery.proxy(this.onInputChanged,this,type));
 			i++;
 
@@ -587,24 +605,24 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 		this._onMouseUp = this.onMouseUp.bind(this);
 		this._onMouseMove = this.onMouseMove.bind(this);
 
-		Event.observe(this.inputs.background, "mousedown", this._onColorMouseDown);
-		Event.observe(this.inputs.selector, "mousedown", this._onColorMouseDown);
-		Event.observe(this.inputs.hue, "mousedown", this._onHueMouseDown);
-		Event.observe(this.inputs.slider, "mousedown", this._onHueMouseDown);
+		this.observe(this.inputs.background, "mousedown", this._onColorMouseDown);
+		this.observe(this.inputs.selector, "mousedown", this._onColorMouseDown);
+		this.observe(this.inputs.hue, "mousedown", this._onHueMouseDown);
+		this.observe(this.inputs.slider, "mousedown", this._onHueMouseDown);
 
-		Event.observe(document.body, "mouseup", this._onMouseUp);
+		this.observe(document.body, "mouseup", this._onMouseUp);
 
 		this.observeMouseMovement();
 
-		Event.observe(this.buttons.Cancel, "click", jQuery.proxy(this.hide,this,this.options['Mode']));
-		Event.observe(this.buttons.OK, "click", this.onOKClicked.bind(this));
+		this.observe(this.buttons.Cancel, "click", jQuery.proxy(this.hide,this,this.options['Mode']));
+		this.observe(this.buttons.OK, "click", this.onOKClicked.bind(this));
 	},
 
 	observeMouseMovement : function()
 	{
 		if(!this._observingMouseMove)
 		{
-			Event.observe(document.body, "mousemove", this._onMouseMove);
+			this.observe(document.body, "mousemove", this._onMouseMove);
 			this._observingMouseMove = true;
 		}
 	},
@@ -613,21 +631,21 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 	{
 		this.isMouseDownOnColor = true;
 		this.onMouseMove(ev);
-		Event.stop(ev);
+		ev.stopPropagation();
 	},
 
 	onHueMouseDown : function(ev)
 	{
 		this.isMouseDownOnHue = true;
 		this.onMouseMove(ev);
-		Event.stop(ev);
+		ev.stopPropagation();
 	},
 
 	onMouseUp : function(ev)
 	{
 		this.isMouseDownOnColor = false;
 		this.isMouseDownOnHue = false;
-		Event.stop(ev);
+		ev.stopPropagation();
 	},
 
 	onMouseMove : function(ev)
@@ -636,17 +654,17 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 			this.changeSV(ev);
 		if(this.isMouseDownOnHue)
 			this.changeH(ev);
-		Event.stop(ev);
+		ev.stopPropagation();
 	},
 
 	changeSV : function(ev)
 	{
-		var px = Event.pointerX(ev);
-		var py = Event.pointerY(ev);
-		var pos = this.inputs.background.cumulativeOffset();
+		var px = ev.pageX;
+		var py = ev.pageY;
+		var pos = jQuery(this.inputs.background).offset();
 
-		var x = this.truncate(px - pos[0],0,255);
-		var y = this.truncate(py - pos[1],0,255);
+		var x = this.truncate(px - pos['left'],0,255);
+		var y = this.truncate(py - pos['top'],0,255);
 
 
 		var s = x/255;
@@ -673,9 +691,9 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 
 	changeH : function(ev)
 	{
-		var py = Event.pointerY(ev);
-		var pos = this.inputs.background.cumulativeOffset();
-		var y = this.truncate(py - pos[1],0,255);
+		var py = ev.pageY;
+		var pos = jQuery(this.inputs.background).offset();
+		var y = this.truncate(py - pos['top'],0,255);
 
 		var h = (255-y)/255;
 		var current_h = this.truncate(this.inputs.H.value,0,360);
@@ -750,8 +768,10 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 
 		var images = Prado.WebUI.TColorPicker.UIImages;
 
-		var changeCss = color.isBright() ? 'removeClassName' : 'addClassName';
-		Element[changeCss](this.inputs.selector, 'target_white');
+		if(color.isBright())
+			jQuery(this.inputs.selector).removeClass('target_white');
+		else
+			jQuery(this.inputs.selector).addClass('target_white');
 
 		if(update)
 			this.updateSelectors(color);
@@ -778,3 +798,32 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
 		return value < min ? min : value > max ? max : value;
 	}
 });
+
+jQuery.extend(Prado.WebUI.TColorPicker,
+{
+	palettes:
+	{
+		Small : [["fff", "fcc", "fc9", "ff9", "ffc", "9f9", "9ff", "cff", "ccf", "fcf"],
+				["ccc", "f66", "f96", "ff6", "ff3", "6f9", "3ff", "6ff", "99f", "f9f"],
+				["c0c0c0", "f00", "f90", "fc6", "ff0", "3f3", "6cc", "3cf", "66c", "c6c"],
+				["999", "c00", "f60", "fc3", "fc0", "3c0", "0cc", "36f", "63f", "c3c"],
+				["666", "900", "c60", "c93", "990", "090", "399", "33f", "60c", "939"],
+				["333", "600", "930", "963", "660", "060", "366", "009", "339", "636"],
+				["000", "300", "630", "633", "330", "030", "033", "006", "309", "303"]],
+
+		Tiny : [["ffffff"/*white*/, "00ff00"/*lime*/, "008000"/*green*/, "0000ff"/*blue*/],
+				["c0c0c0"/*silver*/, "ffff00"/*yellow*/, "ff00ff"/*fuchsia*/, "000080"/*navy*/],
+				["808080"/*gray*/, "ff0000"/*red*/, "800080"/*purple*/, "000000"/*black*/]]
+	},
+
+	UIImages :
+	{
+		'button.gif' : 'button.gif',
+//		'target_black.gif' : 'target_black.gif',
+//		'target_white.gif' : 'target_white.gif',
+//		'background.png' : 'background.png'
+//		'slider.gif' : 'slider.gif',
+//		'hue.gif' : 'hue.gif'
+	}
+});
+
diff --git a/framework/Web/Javascripts/source/prado/controls/controls.js b/framework/Web/Javascripts/source/prado/controls/controls.js
index 619e924b..69632cfb 100644
--- a/framework/Web/Javascripts/source/prado/controls/controls.js
+++ b/framework/Web/Javascripts/source/prado/controls/controls.js
@@ -121,7 +121,7 @@ Prado.WebUI.Control = jQuery.klass({
 	{
 		var idx = this.findObserver(element,eventName,handler);
 		if (idx!=-1)
-			this.observers = this.observers.without(this.observers[idx]);
+			this.observers.splice(idx, 1);
 		else
 			debugger; // shouldn't happen
 
@@ -369,7 +369,12 @@ Prado.WebUI.TTextBox = jQuery.klass(Prado.WebUI.PostBackControl,
 		if(this.options['TextMode'] != 'MultiLine')
 			this.observe(this.element, "keydown", this.handleReturnKey.bind(this));
 		if(this.options['AutoPostBack']==true)
-			this.observe(this.element, "change", jQuery.proxy(Prado.PostBack,this,options));
+			this.observe(this.element, "change", jQuery.proxy(this.doPostback,this,options));
+	},
+
+	doPostback : function(options, event)
+	{
+		new Prado.PostBack(options, event);
 	},
 
 	handleReturnKey : function(e)
@@ -413,24 +418,24 @@ Prado.WebUI.DefaultButton = jQuery.klass(Prado.WebUI.Control,
 	onInit : function(options)
 	{
 		this.options = options;
-		this.observe(options['Panel'], "keydown", jQuery.proxy(this.triggerEvent,this));
+		this.observe(jQuery('#'+options['Panel']), "keydown", jQuery.proxy(this.triggerEvent,this));
 	},
 
-	triggerEvent : function(ev, target)
+	triggerEvent : function(ev)
 	{
-		var enterPressed = Event.keyCode(ev) == Event.KEY_RETURN;
-		var isTextArea = Event.element(ev).tagName.toLowerCase() == "textarea";
-		var isHyperLink = Event.element(ev).tagName.toLowerCase() == "a" && Event.element(ev).hasAttribute("href");
-		var isValidButton = Event.element(ev).tagName.toLowerCase() == "input" &&  Event.element(ev).type.toLowerCase() == "submit";
+		var enterPressed = ev.keyCode == 13;
+		var isTextArea = ev.target.tagName.toLowerCase() == "textarea";
+		var isHyperLink = ev.target.tagName.toLowerCase() == "a" && ev.target.hasAttribute("href");
+		var isValidButton = ev.target.tagName.toLowerCase() == "input" &&  ev.target.type.toLowerCase() == "submit";
 		
 		if(enterPressed && !isTextArea && !isValidButton && !isHyperLink)
 		{
-			var defaultButton = $(this.options['Target']);
+			var defaultButton = $('#'+this.options['Target']);
 			if(defaultButton)
 			{
 				this.triggered = true;
-				Event.fireEvent(defaultButton, this.options['Event']);
-				Event.stop(ev);
+				defaultButton.trigger(this.options['Event']);
+				ev.preventDefault();
 			}
 		}
 	}
diff --git a/framework/Web/Javascripts/source/prado/controls/htmlarea.js b/framework/Web/Javascripts/source/prado/controls/htmlarea.js
index a425e697..819e853c 100644
--- a/framework/Web/Javascripts/source/prado/controls/htmlarea.js
+++ b/framework/Web/Javascripts/source/prado/controls/htmlarea.js
@@ -20,19 +20,13 @@ Prado.WebUI.THtmlArea = jQuery.klass(Prado.WebUI.Control,
 	{
 		this.options = options;
 
-		var obj = this;
-		this.ajaxresponder = {
-			onComplete : function(request) 
-			{
-				if(request && (request instanceof Prado.AjaxRequest))
-					obj.checkInstance();
-			}
-		};
 		this.registerAjaxHook();
 
 		this.registerInstance();
 	},
 	
+
+
 	registerInstance: function()
 	{
 		if (typeof tinyMCE_GZ == 'undefined')
@@ -74,7 +68,7 @@ Prado.WebUI.THtmlArea = jQuery.klass(Prado.WebUI.Control,
 		Prado.WebUI.THtmlArea.tinyMCELoadState = 255;
 		var wrapper;
 		while(Prado.WebUI.THtmlArea.pendingRegistrations.length>0)
-			if (wrapper = Prado.Registry.get(Prado.WebUI.THtmlArea.pendingRegistrations.pop()))
+			if (wrapper = Prado.Registry[Prado.WebUI.THtmlArea.pendingRegistrations.pop()])
 				wrapper.initInstance();
 	},
 
@@ -103,17 +97,19 @@ Prado.WebUI.THtmlArea = jQuery.klass(Prado.WebUI.Control,
 
 	registerAjaxHook: function()
 	{
-		if (typeof(Ajax)!="undefined")
-			if (typeof(Ajax.Responders)!="undefined")
-				Ajax.Responders.register(this.ajaxresponder);
+		jQuery(document).on('ajaxComplete', this.ajaxresponder.bind(this));
 	},
 
 
 	deRegisterAjaxHook: function()
 	{
-		if (typeof(Ajax)!="undefined")
-			if (typeof(Ajax.Responders)!="undefined")
-				Ajax.Responders.unregister(this.ajaxresponder);
+		jQuery(document).off('ajaxComplete', this.ajaxresponder.bind(this));
+	},
+
+	ajaxresponder: function(request)
+	{
+		if(request && (request instanceof Prado.AjaxRequest))
+			obj.checkInstance();
 	},
 
 	onDone: function()
@@ -126,9 +122,9 @@ Prado.WebUI.THtmlArea = jQuery.klass(Prado.WebUI.Control,
 			tinyMCE.execCommand('mceFocus', false, this.ID); 
 			// when removed, tinyMCE restores its content to the textarea. If the textarea content has been
 			// updated in this same callback, it will be overwritten with the old content. Workaround this.
-			var curtext = $(this.ID).value;
+			var curtext = $('#'+this.ID).get(0).value;
 			tinyMCE.execCommand('mceRemoveControl', false, this.ID);
-			$(this.ID).value = curtext;
+			$('#'+this.ID).get(0).value = curtext;
 		}
 		catch (e) 
 		{
@@ -143,7 +139,7 @@ Prado.WebUI.THtmlArea = jQuery.klass(Prado.WebUI.Control,
 	}
 });
 
-Object.extend(Prado.WebUI.THtmlArea, 
+jQuery.extend(Prado.WebUI.THtmlArea, 
 {
 	pendingRegistrations : [],
 	tinyMCELoadState : 0
diff --git a/framework/Web/Javascripts/source/prado/controls/slider.js b/framework/Web/Javascripts/source/prado/controls/slider.js
index 2e26ee51..28d7d4ac 100644
--- a/framework/Web/Javascripts/source/prado/controls/slider.js
+++ b/framework/Web/Javascripts/source/prado/controls/slider.js
@@ -3,21 +3,21 @@
  * This clas is mainly based on Scriptaculous Slider control (http://script.aculo.us)
  */
 
-Prado.WebUI.TSlider = Class.extend(Prado.WebUI.PostBackControl,
+Prado.WebUI.TSlider = jQuery.klass(Prado.WebUI.PostBackControl,
 {
 	onInit : function (options)
 	{
 		var slider = this;
 		this.options=options || {};
-		this.track = $(options.ID+'_track');
-		this.handle =$(options.ID+'_handle');
-		this.progress = $(options.ID+'_progress');
+		this.track = $('#'+options.ID+'_track').get(0);
+		this.handle =$('#'+options.ID+'_handle').get(0);
+		this.progress = $('#'+options.ID+'_progress').get(0);
 		this.axis  = this.options.axis || 'horizontal';
-		this.range = this.options.range || $R(0,1);
+		this.range = this.options.range || [0, 1];
 		this.value = 0;
-		this.maximum   = this.options.maximum || this.range.end;
-		this.minimum   = this.options.minimum || this.range.start;
-		this.hiddenField=$(this.options.ID+'_1');
+		this.maximum   = this.options.maximum || this.range[1];
+		this.minimum   = this.options.minimum || this.range[0];
+		this.hiddenField=$('#'+this.options.ID+'_1').get(0);
 		
 		// Will be used to align the handle onto the track, if necessary
 		this.alignX = parseInt(this.options.alignX || - this.track.offsetLeft);
@@ -37,19 +37,18 @@ Prado.WebUI.TSlider = Class.extend(Prado.WebUI.PostBackControl,
 		if(this.options.disabled) this.setDisabled();
 	
 		// Allowed values array
-		this.allowedValues = this.options.values ? this.options.values.sortBy(Prototype.K) : false;
+		this.allowedValues = this.options.values ? this.options.values.sort() : false;
 		if(this.allowedValues) {
-			this.minimum = this.allowedValues.min();
-			this.maximum = this.allowedValues.max();
+			this.minimum = Math.min.apply( Math, this.allowedValues );
+			this.maximum = Math.max.apply( Math, this.allowedValues );
 		}
 
-		this.eventMouseDown = this.startDrag.bindAsEventListener(this);
-		this.eventMouseUp   = this.endDrag.bindAsEventListener(this);
-		this.eventMouseMove = this.update.bindAsEventListener(this);
+		this.eventMouseDown = this.startDrag.bind(this);
+		this.eventMouseUp   = this.endDrag.bind(this);
+		this.eventMouseMove = this.update.bind(this);
 
 		// Initialize handle
 		this.setValue(parseFloat(slider.options.sliderValue));
-		Element.makePositioned(this.handle); // fix IE
 		this.observe (this.handle, "mousedown", this.eventMouseDown);
 		
 		this.observe (this.track, "mousedown", this.eventMouseDown);
@@ -60,10 +59,13 @@ Prado.WebUI.TSlider = Class.extend(Prado.WebUI.PostBackControl,
 		
 		this.initialized=true;
 		
-		
 		if(this.options['AutoPostBack']==true)
-			this.observe(this.hiddenField, "change", Prado.PostBack.bindEvent(this,options));
-    
+			this.observe(this.hiddenField, "change", jQuery.proxy(this.doPostback,this,options));
+	},
+
+	doPostback : function(options, event)
+	{
+		new Prado.PostBack(options, event);
 	},
   
 	setDisabled: function(){
@@ -74,12 +76,14 @@ Prado.WebUI.TSlider = Class.extend(Prado.WebUI.PostBackControl,
 	},  
 	getNearestValue: function(value){
 		if(this.allowedValues){
-			if(value >= this.allowedValues.max()) return(this.allowedValues.max());
-			if(value <= this.allowedValues.min()) return(this.allowedValues.min());
+			var max = Math.max.apply( Math, this.allowedValues );
+			var min = Math.min.apply( Math, this.allowedValues );
+			if(value >= max) return(max);
+			if(value <= min) return(min);
       
 			var offset = Math.abs(this.allowedValues[0] - value);
 			var newValue = this.allowedValues[0];
-			this.allowedValues.each( function(v) {
+			jQuery.each(this.allowedValues, function(idx, v) {
 				var currentOffset = Math.abs(v - value);
 				if(currentOffset <= offset){
 					newValue = v;
@@ -88,8 +92,8 @@ Prado.WebUI.TSlider = Class.extend(Prado.WebUI.PostBackControl,
 			});
 			return newValue;
 		}
-		if(value > this.range.end) return this.range.end;
-		if(value < this.range.start) return this.range.start;
+		if(value > this.range[1]) return this.range[1];
+		if(value < this.range[0]) return this.range[0];
 		return value;
 	},
 	
@@ -113,19 +117,13 @@ Prado.WebUI.TSlider = Class.extend(Prado.WebUI.PostBackControl,
 	
 	translateToPx: function(value) {
 		return Math.round(
-      		((this.trackLength-this.handleLength)/(this.range.end-this.range.start)) * (value - this.range.start)) + "px";
+      		((this.trackLength-this.handleLength)/(this.range[1]-this.range[0])) * (value - this.range[0])) + "px";
 	},
 	
 	translateToValue: function(offset) {
-		return ((offset/(this.trackLength-this.handleLength) * (this.range.end-this.range.start)) + this.range.start);
+		return ((offset/(this.trackLength-this.handleLength) * (this.range[1]-this.range[0])) + this.range[0]);
 	},
-	
-	getRange: function(range) {
-		var v = this.values.sortBy(Prototype.K); 
-		range = range || 0;
-		return $R(v[range],v[range+1]);
-	},
-	
+		
 	minimumOffset: function(){
 		return(this.isVertical() ? this.alignY : this.alignX);
   	},
@@ -144,35 +142,36 @@ Prado.WebUI.TSlider = Class.extend(Prado.WebUI.PostBackControl,
 	
 	updateStyles: function() {
 		if (this.active) 
-			Element.addClassName(this.handle, 'selected');
+			jQuery(this.handle).addClass('selected');
 		else
-			Element.removeClassName(this.handle, 'selected');
+			jQuery(this.handle).removeClass('selected');
 	},
 	
 	startDrag: function(event) {
-		if(Event.isLeftClick(event)) {
+		if (event.which === 1) {
+			// left click
 			if(!this.disabled){
 				this.active = true;
-				var handle = Event.element(event);
-				var pointer  = [Event.pointerX(event), Event.pointerY(event)];
+				var handle = event.target;
+				var pointer  = [event.pageX, event.pageY];
 				var track = handle;
 				if(track==this.track) {
-					var offsets  = this.track.cumulativeOffset(); 
+					var offsets  = jQuery(this.track).offset();
 					this.event = event;
 					this.setValue(this.translateToValue( 
-						(this.isVertical() ? pointer[1]-offsets[1] : pointer[0]-offsets[0])-(this.handleLength/2)
+						(this.isVertical() ? pointer[1]-offsets['top'] : pointer[0]-offsets['left'])-(this.handleLength/2)
 					));
-					var offsets  = this.handle.cumulativeOffset();
-					this.offsetX = (pointer[0] - offsets[0]);
-					this.offsetY = (pointer[1] - offsets[1]);
+					var offsets  = jQuery(this.handle).offset();
+					this.offsetX = (pointer[0] - offsets['left']);
+					this.offsetY = (pointer[1] - offsets['top']);
 				} else {
 					this.updateStyles();
-					var offsets  = this.handle.cumulativeOffset();
-					this.offsetX = (pointer[0] - offsets[0]);
-					this.offsetY = (pointer[1] - offsets[1]);
+					var offsets  = jQuery(this.handle).offset();
+					this.offsetX = (pointer[0] - offsets['left']);
+					this.offsetY = (pointer[1] - offsets['top']);
 				}
 			}
-			Event.stop(event);
+			event.stopPropagation();
 		}
 	},
 	
@@ -180,16 +179,15 @@ Prado.WebUI.TSlider = Class.extend(Prado.WebUI.PostBackControl,
 		if(this.active) {
 			if(!this.dragging) this.dragging = true;
 			this.draw(event);
-			if(Prototype.Browser.WebKit) window.scrollBy(0,0);
-			Event.stop(event);
+			event.stopPropagation();
 		}
 	},
 	
 	draw: function(event) {
-		var pointer = [Event.pointerX(event), Event.pointerY(event)];
-		var offsets = this.track.cumulativeOffset();
-		pointer[0] -= this.offsetX + offsets[0];
-		pointer[1] -= this.offsetY + offsets[1];
+		var pointer = [event.pageX, event.pageY];
+		var offsets = jQuery(this.track).offset();
+		pointer[0] -= this.offsetX + offsets['left'];
+		pointer[1] -= this.offsetY + offsets['top'];
 		this.event = event;
 		this.setValue(this.translateToValue( this.isVertical() ? pointer[1] : pointer[0] ));
 		if(this.initialized && this.options.onSlide)
@@ -199,7 +197,7 @@ Prado.WebUI.TSlider = Class.extend(Prado.WebUI.PostBackControl,
 	endDrag: function(event) {
 		if(this.active && this.dragging) {
 			this.finishDrag(event, true);
-			Event.stop(event);
+			event.stopPropagation();
 		}
 		this.active = false;
 		this.dragging = false;
@@ -219,7 +217,7 @@ Prado.WebUI.TSlider = Class.extend(Prado.WebUI.PostBackControl,
 		this.event = null;
 		if (this.options['AutoPostBack']==true)
 		{
-			Event.fireEvent(this.hiddenField,"change");
+			jQuery(this.hiddenField).trigger("change");
 		}
 	}
 
diff --git a/framework/Web/Javascripts/source/prado/datepicker/datepicker.js b/framework/Web/Javascripts/source/prado/datepicker/datepicker.js
index bb581751..e74f586a 100644
--- a/framework/Web/Javascripts/source/prado/datepicker/datepicker.js
+++ b/framework/Web/Javascripts/source/prado/datepicker/datepicker.js
@@ -22,18 +22,18 @@ Prado.WebUI.TDatePicker = jQuery.klass(Prado.WebUI.Control,
 	onInit : function(options)
 	{
 		this.options = options || [];
-		this.control = $(options.ID);
+		this.control = $('#'+options.ID).get(0);
 		this.dateSlot = new Array(42);
 		this.weekSlot = new Array(6);
 		this.minimalDaysInFirstWeek	= 4;
 		this.positionMode = 'Bottom';
 		
-		Prado.Registry.set(options.ID, this);
+		Prado.Registry[options.ID] = this;
 
 		//which element to trigger to show the calendar
 		if(this.options.Trigger)
 		{
-			this.trigger = $(this.options.Trigger) ;
+			this.trigger = $('#'+this.options.Trigger).get(0);
 			var triggerEvent = this.options.TriggerEvent || "click";
 		}
 		else
@@ -48,27 +48,27 @@ Prado.WebUI.TDatePicker = jQuery.klass(Prado.WebUI.Control,
 			this.positionMode = this.options.PositionMode;
 		}
 
-		Object.extend(this,options);
+		jQuery.extend(this,options);
 		// generate default date _after_ extending options
 		this.selectedDate = this.newDate();
 		
-		Event.observe(this.trigger, triggerEvent, jQuery.proxy(this.show,this));
+		this.observe(this.trigger, triggerEvent, jQuery.proxy(this.show,this));
 		
 		// Listen to change event if needed
 		if (typeof(this.options.OnDateChanged) == "function")
 		{
 			if(this.options.InputMode == "TextBox")
 			{
-				Event.observe(this.control, "change", jQuery.proxy(this.onDateChanged,this));
+				this.observe(this.control, "change", jQuery.proxy(this.onDateChanged,this));
 			} 
 			else
 			{
 				var day = Prado.WebUI.TDatePicker.getDayListControl(this.control);
 				var month = Prado.WebUI.TDatePicker.getMonthListControl(this.control);
 				var year = Prado.WebUI.TDatePicker.getYearListControl(this.control);
-				Event.observe (day, "change", jQuery.proxy(this.onDateChanged,this));
-				Event.observe (month, "change", jQuery.proxy(this.onDateChanged,this));
-				Event.observe (year, "change", jQuery.proxy(this.onDateChanged,this));
+				this.observe (day, "change", jQuery.proxy(this.onDateChanged,this));
+				this.observe (month, "change", jQuery.proxy(this.onDateChanged,this));
+				this.observe (year, "change", jQuery.proxy(this.onDateChanged,this));
 				
 			}
 			
@@ -214,8 +214,8 @@ Prado.WebUI.TDatePicker = jQuery.klass(Prado.WebUI.Control,
 				tmp.data = text;
 				this.dateSlot[(week*7)+day] = tmp;
 
-				Event.observe(td, "mouseover", jQuery.proxy(this.hover,this));
-				Event.observe(td, "mouseout", jQuery.proxy(this.hover,this));
+				this.observe(td, "mouseover", jQuery.proxy(this.hover,this));
+				this.observe(td, "mouseout", jQuery.proxy(this.hover,this));
 
 			}
 		}
@@ -233,60 +233,28 @@ Prado.WebUI.TDatePicker = jQuery.klass(Prado.WebUI.Control,
 		todayButton.value = buttonText;
 		div.appendChild(todayButton);
 
-		if(Prado.Browser().ie)
-		{
-			this.iePopUp = document.createElement('iframe');
-			this.iePopUp.src = Prado.WebUI.TDatePicker.spacer;
-			this.iePopUp.style.position = "absolute"
-			this.iePopUp.scrolling="no"
-			this.iePopUp.frameBorder="0"
-			this.control.parentNode.appendChild(this.iePopUp);
-		}
-
 		this.control.parentNode.appendChild(this._calDiv);
 
 		this.update();
 		this.updateHeader();
 
-		this.ieHack(true);
-
-		// IE55+ extension
-		previousMonth.hideFocus = true;
-		nextMonth.hideFocus = true;
-		todayButton.hideFocus = true;
-		// end IE55+ extension
-
 		// hook up events
-		Event.observe(previousMonth, "click", jQuery.proxy(this.prevMonth,this));
-		Event.observe(nextMonth, "click", jQuery.proxy(this.nextMonth,this));
-		Event.observe(todayButton, "click", jQuery.proxy(this.selectToday,this));
+		this.observe(previousMonth, "click", jQuery.proxy(this.prevMonth,this));
+		this.observe(nextMonth, "click", jQuery.proxy(this.nextMonth,this));
+		this.observe(todayButton, "click", jQuery.proxy(this.selectToday,this));
 		//Event.observe(clearButton, "click", jQuery.proxy(this.clearSelection,this));
-		Event.observe(this._monthSelect, "change", jQuery.proxy(this.monthSelect,this));
-		Event.observe(this._yearSelect, "change", jQuery.proxy(this.yearSelect,this));
+		this.observe(this._monthSelect, "change", jQuery.proxy(this.monthSelect,this));
+		this.observe(this._yearSelect, "change", jQuery.proxy(this.yearSelect,this));
 
 		// ie, opera
-		Event.observe(this._calDiv, "mousewheel", jQuery.proxy(this.mouseWheelChange,this));
+		this.observe(this._calDiv, "mousewheel", jQuery.proxy(this.mouseWheelChange,this));
 		// ff
-		Event.observe(this._calDiv, "DOMMouseScroll", jQuery.proxy(this.mouseWheelChange,this));
-
-		Event.observe(calendarBody, "click", jQuery.proxy(this.selectDate,this));
+		this.observe(this._calDiv, "DOMMouseScroll", jQuery.proxy(this.mouseWheelChange,this));
 
-		Prado.Element.focus(this.control);
+		this.observe(calendarBody, "click", jQuery.proxy(this.selectDate,this));
 
-	},
+		jQuery(this.control).focus();
 
-	ieHack : function(cleanup)
-	{
-		// IE hack
-		if(this.iePopUp)
-		{
-			this.iePopUp.style.display = "block";
-			this.iePopUp.style.left = (this._calDiv.offsetLeft -1)+ "px";
-			this.iePopUp.style.top = (this._calDiv.offsetTop -1 ) + "px";
-			this.iePopUp.style.width = Math.abs(this._calDiv.offsetWidth -2)+ "px";
-			this.iePopUp.style.height = (this._calDiv.offsetHeight + 1)+ "px";
-			if(cleanup) this.iePopUp.style.display = "none";
-		}
 	},
 
 	keyPressed : function(ev)
@@ -295,15 +263,18 @@ Prado.WebUI.TDatePicker = jQuery.klass(Prado.WebUI.Control,
 		if (!ev) ev = document.parentWindow.event;
 		var kc = ev.keyCode != null ? ev.keyCode : ev.charCode;
 
-		if(kc == Event.KEY_RETURN || kc == Event.KEY_SPACEBAR || kc == Event.KEY_TAB)
+		// return, space, tab
+		if(kc == 13 || kc == 32 || kc == 9)
 		{
 			this.setSelectedDate(this.selectedDate);
-			Event.stop(ev);
+			ev.preventDefault();
 			this.hide();
 		}
-		if(kc == Event.KEY_ESC)
+		// esc
+		if(kc == 27)
 		{
-			Event.stop(ev); this.hide();
+			ev.preventDefault();
+			this.hide();
 		}
 
 		var getDaysPerMonth = function (nMonth, nYear)
@@ -320,7 +291,7 @@ Prado.WebUI.TDatePicker = jQuery.klass(Prado.WebUI.Control,
 
 		var current = this.selectedDate;
 		var d = current.valueOf();
-		if(kc == Event.KEY_LEFT)
+		if(kc == 37) // left
 		{
 			if(ev.ctrlKey || ev.shiftKey) // -1 month
 			{
@@ -330,7 +301,7 @@ Prado.WebUI.TDatePicker = jQuery.klass(Prado.WebUI.Control,
 			else
 				d -= 86400000; //-1 day
 		}
-		else if (kc == Event.KEY_RIGHT)
+		else if (kc == 39) // right
 		{
 			if(ev.ctrlKey || ev.shiftKey) // +1 month
 			{
@@ -340,7 +311,7 @@ Prado.WebUI.TDatePicker = jQuery.klass(Prado.WebUI.Control,
 			else
 				d += 86400000; //+1 day
 		}
-		else if (kc == Event.KEY_UP)
+		else if (kc == 38) // up
 		{
 			if(ev.ctrlKey || ev.shiftKey) //-1 year
 			{
@@ -350,7 +321,7 @@ Prado.WebUI.TDatePicker = jQuery.klass(Prado.WebUI.Control,
 			else
 				d -= 604800000; // -7 days
 		}
-		else if (kc == Event.KEY_DOWN)
+		else if (kc == 40) // down
 		{
 			if(ev.ctrlKey || ev.shiftKey) // +1 year
 			{
@@ -361,12 +332,12 @@ Prado.WebUI.TDatePicker = jQuery.klass(Prado.WebUI.Control,
 				d += 7 * 24 * 61 * 60 * 1000; // +7 days
 		}
 		this.setSelectedDate(d);
-		Event.stop(ev);
+		ev.preventDefault();
 	},
 
 	selectDate : function(ev)
 	{
-		var el = Event.element(ev);
+		var el = ev.target;
 		while (el.nodeType != 1)
 			el = el.parentNode;
 
@@ -403,12 +374,12 @@ Prado.WebUI.TDatePicker = jQuery.klass(Prado.WebUI.Control,
 
 	monthSelect : function(ev)
 	{
-		this.setMonth(Form.Element.getValue(Event.element(ev)));
+		this.setMonth(ev.target.value);
 	},
 
 	yearSelect : function(ev)
 	{
-		this.setYear(Form.Element.getValue(Event.element(ev)));
+		this.setYear(ev.target.value);
 	},
 
 	mouseWheelChange : function (event)
@@ -460,12 +431,12 @@ Prado.WebUI.TDatePicker = jQuery.klass(Prado.WebUI.Control,
 					obj.changeeventtimer = null;
 				}
 				obj.changeeventtimer = setTimeout(
-					function() { obj.changeeventtimer = null; Event.fireEvent(element, "change"); },
+					function() { obj.changeeventtimer = null; jQuery(element).trigger("change"); },
 					1500
 				);
 			}
 		else
-			Event.fireEvent(element, "change");
+			jQuery(element).trigger("change");
 	},
 	
 	onChange : function(ref, date, capevents)
@@ -598,39 +569,36 @@ Prado.WebUI.TDatePicker = jQuery.klass(Prado.WebUI.Control,
 
 		if(!this.showing)
 		{
-			var pos = this.control.positionedOffset();
+			var pos = jQuery(this.control).position();
 
 			pos[1] += this.getDatePickerOffsetHeight();
 			this._calDiv.style.top = (pos[1]-1) + "px";
 			this._calDiv.style.display = "block";
 			this._calDiv.style.left = pos[0] + "px";
 
-			this.documentClickEvent = this.hideOnClick.bindEvent(this);
-			this.documentKeyDownEvent = this.keyPressed.bindEvent(this);
-			Event.observe(document.body, "click", this.documentClickEvent);
+			this.documentClickEvent = jQuery.bind(this.hideOnClick, this);
+			this.documentKeyDownEvent = jQuery.bind(this.keyPressed, this);
+			this.observe(document.body, "click", this.documentClickEvent);
 			var date = this.getDateFromInput();
 			if(date)
 			{
 				this.selectedDate = date;
 				this.setSelectedDate(date);
 			}
-			Event.observe(document,"keydown", this.documentKeyDownEvent);
+			this.observe(document,"keydown", this.documentKeyDownEvent);
 			this.showing = true;
 			
 			if(this.positionMode=='Top')
 			{
 				this._calDiv.style.top = ((pos[1]-1) - this.getDatePickerOffsetHeight() - this._calDiv.offsetHeight) + 'px';
-				if(Prado.Browser().ie)
-					this.iePopup = this._calDiv.style.top;					
 			}
-			this.ieHack(false);
 		}
 	},
 
 	getDateFromInput : function()
 	{
 		if(this.options.InputMode == "TextBox")
-			return Date.SimpleParse($F(this.control), this.Format);
+			return Date.SimpleParse(this.control.value, this.Format);
 		else
 			return Prado.WebUI.TDatePicker.getDropDownDate(this.control);
 	},
@@ -639,11 +607,11 @@ Prado.WebUI.TDatePicker = jQuery.klass(Prado.WebUI.Control,
 	hideOnClick : function(ev)
 	{
 		if(!this.showing) return;
-		var el = Event.element(ev);
+		var el = ev.target;
 		var within = false;
 		do
 		{
-			within = within || (el.className && Element.hasClassName(el, "TDatePicker_"+this.CalendarStyle));
+			within = within || (el.className && jQuery(el).hasClass("TDatePicker_"+this.CalendarStyle));
 			within = within || el == this.trigger;
 			within = within || el == this.control;
 			if(within) break;
@@ -662,8 +630,8 @@ Prado.WebUI.TDatePicker = jQuery.klass(Prado.WebUI.Control,
 			if(this.iePopUp)
 				this.iePopUp.style.display = "none";
 			this.showing = false;
-			Event.stopObserving(document.body, "click", this.documentClickEvent);
-			Event.stopObserving(document,"keydown", this.documentKeyDownEvent);
+			this.stopObserving(document.body, "click", this.documentClickEvent);
+			this.stopObserving(document,"keydown", this.documentKeyDownEvent);
 		}
 	},
 
@@ -721,12 +689,12 @@ Prado.WebUI.TDatePicker = jQuery.klass(Prado.WebUI.Control,
 
 	hover : function(ev)
 	{
-		if(Event.element(ev).tagName)
+		if(ev.target.tagName)
 		{
 			if(ev.type == "mouseover")
-				Event.element(ev).addClassName("hover");
-				else
-				Event.element(ev).removeClassName("hover");
+				jQuery(ev.target).addClass("hover");
+			else
+				jQuery(ev.target).removeClass("hover");
 		}
 	},
 
@@ -753,7 +721,7 @@ Prado.WebUI.TDatePicker = jQuery.klass(Prado.WebUI.Control,
 	}
 });
 
-Object.extend(Prado.WebUI.TDatePicker,
+jQuery.extend(Prado.WebUI.TDatePicker,
 {
 	/**
 	 * @return Date the date from drop down list options.
@@ -769,25 +737,25 @@ Object.extend(Prado.WebUI.TDatePicker,
 	 	var day_list = Prado.WebUI.TDatePicker.getDayListControl(control);
 	 	var year_list = Prado.WebUI.TDatePicker.getYearListControl(control);
 
-		var day = day_list ? $F(day_list) : 1;
-		var month = month_list ? $F(month_list) : now.getMonth();
-		var year = year_list ? $F(year_list) : now.getFullYear();
+		var day = day_list ? day_list.value : 1;
+		var month = month_list ? month_list.value : now.getMonth();
+		var year = year_list ? year_list.value : now.getFullYear();
 
 		return new Date(year,month,day, 0, 0, 0);
 	},
 
 	getYearListControl : function(control)
 	{
-		return $(control.id+"_year");
+		return $('#'+control.id+"_year").get(0);
 	},
 
 	getMonthListControl : function(control)
 	{
-		return $(control.id+"_month");
+		return $('#'+control.id+"_month").get(0);
 	},
 
 	getDayListControl : function(control)
 	{
-		return $(control.id+"_day");
+		return $('#'+control.id+"_day").get(0);
 	}
 });
\ No newline at end of file
diff --git a/framework/Web/UI/ActiveControls/TActiveDatePicker.php b/framework/Web/UI/ActiveControls/TActiveDatePicker.php
index bfac83a0..279739a8 100755
--- a/framework/Web/UI/ActiveControls/TActiveDatePicker.php
+++ b/framework/Web/UI/ActiveControls/TActiveDatePicker.php
@@ -139,7 +139,7 @@ class TActiveDatePicker extends TDatePicker  implements ICallbackEventHandler, I
 		$cs->registerPradoScript("activedatepicker");
 	}
 
-	protected function registerCalendarClientScriptPost()
+	protected function renderClientControlScript($writer)
 	{
 		$cs = $this->getPage()->getClientScript();
 		if(!$cs->isEndScriptRegistered('TDatePicker.spacer'))
diff --git a/framework/Web/UI/TClientScriptManager.php b/framework/Web/UI/TClientScriptManager.php
index 80a71ea0..a9f6c5b4 100644
--- a/framework/Web/UI/TClientScriptManager.php
+++ b/framework/Web/UI/TClientScriptManager.php
@@ -340,11 +340,10 @@ class TClientScriptManager extends TApplicationComponent
 	 */
 	public function registerFocusControl($target)
 	{
-		$this->registerPradoScriptInternal('effects');
+		$this->registerPradoScriptInternal('jquery');
 		if($target instanceof TControl)
 			$target=$target->getClientID();
-		$id = TJavaScript::quoteString($target);
-		$this->_endScripts['prado:focus'] = 'new Effect.ScrollTo('.$id.'); Prado.Element.focus('.$id.');';
+		$this->_endScripts['prado:focus'] = 'new Prado.Element.scrollTo(\''.$target.'\'); jQuery(\'#'.$target.'\').focus();';
 
 		$params=func_get_args();
 		$this->_page->registerCachingAction('Page.ClientScript','registerFocusControl',$params);
diff --git a/framework/Web/UI/WebControls/TDatePicker.php b/framework/Web/UI/WebControls/TDatePicker.php
index b5ed8a86..275fc557 100644
--- a/framework/Web/UI/WebControls/TDatePicker.php
+++ b/framework/Web/UI/WebControls/TDatePicker.php
@@ -428,7 +428,7 @@ class TDatePicker extends TTextBox
 			$this->renderDropDownListCalendar($writer);
 			if($this->hasDayPattern())
 			{
-				$this->registerCalendarClientScriptPost();
+				$this->renderClientControlScript($writer);
 				$this->renderDatePickerButtons($writer);
 			}
 		}
@@ -850,10 +850,8 @@ class TDatePicker extends TTextBox
 	{
 		parent::addAttributesToRender($writer);
 		$writer->addAttribute('id',$this->getClientID());
-		$this->registerCalendarClientScriptPost();
 	}
 
-
 	/**
 	 * Registers the javascript code to initialize the date picker.
 	 */
@@ -866,7 +864,7 @@ class TDatePicker extends TTextBox
 		}
 	}
 
-	protected function registerCalendarClientScriptPost()
+	protected function renderClientControlScript($writer)
 	{
 		if($this->getShowCalendar())
 		{
diff --git a/framework/Web/UI/WebControls/TSlider.php b/framework/Web/UI/WebControls/TSlider.php
index dcf34bfc..a07c995f 100644
--- a/framework/Web/UI/WebControls/TSlider.php
+++ b/framework/Web/UI/WebControls/TSlider.php
@@ -457,7 +457,7 @@ class TSlider extends TWebControl implements IPostBackDataHandler, IDataRenderer
 		$options['axis'] = strtolower($this->getDirection());
 		$options['maximum'] = $maxValue;
 		$options['minimum'] = $minValue;
-		$options['range'] = TJavascript::quoteJsLiteral('$R('.$minValue.",".$maxValue.")");
+		$options['range'] = array($minValue, $maxValue);
 		$options['sliderValue'] = $this->getValue();
 		$options['disabled'] = !$this->getEnabled();
 		$values=$this->getValues();