[47/72] [abbrv] [partial] [tizen] Add samples and templates

[an...@apache.org]

http://git-wip-us.apache.org/repos/asf/incubator-cordova-tizen/blob/f98b376a/samples/cordova-tizen-web-ui/tizen-web-ui-fw/0.1/js/tizen-web-ui-fw.js
----------------------------------------------------------------------
diff --git a/samples/cordova-tizen-web-ui/tizen-web-ui-fw/0.1/js/tizen-web-ui-fw.js b/samples/cordova-tizen-web-ui/tizen-web-ui-fw/0.1/js/tizen-web-ui-fw.js
new file mode 100644
index 0000000..c69fa5e
--- /dev/null
+++ b/samples/cordova-tizen-web-ui/tizen-web-ui-fw/0.1/js/tizen-web-ui-fw.js
@@ -0,0 +1,16145 @@
+/*
+ *
+ * This software is licensed under the MIT licence (as defined by the OSI at
+ * http://www.opensource.org/licenses/mit-license.php)
+ * 
+ * ***************************************************************************
+ * Copyright (C) 2011 by Intel Corporation Ltd.
+ * 
+ * Permission is hereby granted, free of charge, to any person obtaining a
+ * copy of this software and associated documentation files (the "Software" ),
+ * to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the
+ * Software is furnished to do so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+ * DEALINGS IN THE SOFTWARE.
+ * ***************************************************************************
+ */
+
+// Base class for widgets that need the following features:
+//
+// I. HTML prototype loading
+//
+// This class provides HTML prototype loading for widgets. That is, the widget implementation specifies its HTML portions
+// in one continuous HTML snippet, and it optionally provides an object containing selectors into the various parts of the
+// HTML snippet. This widget loads the HTML snippet into a jQuery object, and optionally assigns jQuery objects to each of
+// the selectors in the optionally provided object.
+//
+// To use this functionality you can either derive from this class, or you can call its prototype's gtype method.
+//
+// 1. Widgets deriving from this class should define _htmlProto as part of their prototype declaration. _htmlProto looks like
+// this:
+//
+// _htmlProto: {
+//     source: string|jQuery object (optional) default: string - The name of the widget
+//     ui: {
+//         uiElement1: "#ui-element-1-selector",
+//         uiElement2: "#ui-element-2-selector",
+//         ...
+//         subElement: {
+//             subElement1: "#sub-element-1-selector",
+//             subElement2: "#sub-element-2-selector",
+//             ...
+//         }
+//         ...
+//     }
+// }
+//
+// If neither 'source' nor 'ui' are defined, you must still include an empty _htmlProto key (_htmlProto: {}) to indicate
+// that you wish to make use of this feature. This will cause a prototype HTML file named after your widget to be loaded.
+// The loaded prototype will be placed into your widget's prototype's _protoHtml.source key.
+//
+// If 'source' is defined as a string, it is the name of the widget (including namespace). This is the default. If your
+// widget's HTML prototype is loaded via AJAX and the name of the AJAX file is different from the name of your widget
+// (that is, it is not "<widgetName>.prototype.html", then you should explicitly define 'source' as:
+//
+// If you wish to load HTML prototypes via AJAX, modify the getProtoPath() function defined below to reflect the directory
+// structure holding your widget HTML prototypes.
+//
+// source: "alternateWidgetName"
+//
+// If AJAX loading fails, source is set to a jQuery object containing a div with an error message. You can check whether
+// loading failed via the jQuery object's jqmData( "tizen.widgetex.ajax.fail" ) data item. If false, then the jQuery object
+// is the actual prototype loaded via AJAX or present inline. Otherwise, the jQuery object is the error message div.
+//
+// If 'source' is defined as a jQuery object, it is considered already loaded.
+//
+// if 'ui' is defined inside _htmlProto, It is assumed to be an object such that every one of its keys is either a string,
+// or another object with the same properties as itself.
+//
+// When a widget is instantiated, the HTML prototype is loaded if not already present in the prototype. If 'ui' is present
+// inside _htmlProto, the prototype is cloned. Then, a new structure is created based on 'ui' with each selector replaced
+// by a jQuery object containing the results of performing .find() on the prototype's clone with the filter set to the
+// value of the string. In the special case where the selector starts with a '#', the ID is removed from the element after
+// it is assigned into the structure being created. This structure is then made accessible from the widget instance via
+// the '_ui' key (i.e., this._ui).
+//
+// 2. Use the loadPrototype method when your widget does not derive from $.tizen.widgetex:
+// Add _htmlProto to your widget's prototype as described above. Then, in your widget's _create() method, call
+// loadPrototype in the following manner:
+//
+// $.tizen.widgetex.loadPrototype.call(this, "namespace.widgetName" );
+//
+// Thereafter, you may use the HTML prototype from your widget's prototype or, if you have specified a 'ui' key in your
+// _htmlProto key, you may use this._ui from your widget instance.
+//
+// II. realize method
+//
+// When a widget is created, some of its properties cannot be set immediately, because they depend on the widths/heights
+// of its constituent elements. They can only be calculated when the page containing the widget is made visible via the
+// "pageshow" event, because widths/heights always evaluate to 0 when retrieved from a widget that is not visible. When
+// you inherit from widgetex, you can add a "_realize" function to your prototype. This function will be called once right
+// after _create() if the element that anchors your widget is on a visible page. Otherwise, it will be called when the
+// page to which the widget belongs emits the "pageshow" event.
+//
+// NB: If your widget is inside a container which is itself not visible, such as an expandable or a collapsible, your
+// widget will remain hidden even though "pageshow" is fired and therefore _realize is called. In this case, widths and
+// heights will be unreliable even during _realize.
+//
+// III. systematic option handling
+//
+// If a widget has lots of options, the _setOption function can become a long switch for setting each recognized option.
+// It is also tempting to allow options to determine the way a widget is created, by basing decisions on various options
+// during _create(). Often, the actions based on option values in _create() are the same as those in _setOption. To avoid
+// such code duplication, this class calls _setOption once for each option after _create() has completed.
+//
+// Furthermore, to avoid writing long switches in a widget's _setOption method, this class implements _setOption in such
+// a way that, for any given option (e.g. "myOption" ), _setOption looks for a method _setMyOption in the widget's
+// implementation, and if found, calls the method with the value of the option.
+//
+// If your widget does not inherit from widgetex, you can still use widgetex' systematic option handling:
+// 1. define the _setOption method for your widget as follows:
+//      _setOption: $.tizen.widgetex.prototype._setOption
+// 2. Call this._setOptions(this.options) from your widget's _create() function.
+// 3. As with widgetex-derived widgets, implement a corresponding _setMyOptionName function for each option myOptionName
+// you wish to handle.
+//
+// IV. systematic value handling for input elements
+//
+// If your widget happens to be constructed from an <input> element, you have to handle the "value" attribute specially,
+// and you have to emit the "change" signal whenever it changes, in addition to your widget's normal signals and option
+// changes. With widgetex, you can assign one of your widget's "data-*" properties to be synchronized to the "value"
+// property whenever your widget is constructed onto an <input> element. To do this, define, in your prototype:
+//
+// _value: {
+//      attr: "data-my-attribute",
+//      signal: "signal-to-emit"
+// }
+//
+// Then, call this._setValue(newValue) whenever you wish to set the value for your widget. This will set the data-*
+// attribute, emit the custom signal (if set) with the new value as its parameter, and, if the widget is based on an
+// <input> element, it will also set the "value" attribute and emit the "change" signal.
+//
+// "attr" is required if you choose to define "_value", and identifies the data-attribute to set in addition to "value",
+// if your widget's element is an input.
+// "signal" is optional, and will be emitted when setting the data-attribute via this._setValue(newValue).
+//
+// If your widget does not derive from widgetex, you can still define "_value" as described above and call
+// $.tizen.widgetex.setValue(widget, newValue).
+//
+// V. Systematic enabled/disabled handling for input elements
+//
+// widgetex implements _setDisabled which will disable the input associated with this widget, if any. Thus, if you derive
+// from widgetex and you plan on implementing the disabled state, you should chain up to
+// $.tizen.widgetex.prototype._setDisabled(value), rather than $.Widget.prototype._setOption( "disabled", value).
+
+(function ($, undefined) {
+
+// Framework-specific HTML prototype path for AJAX loads
+	function getProtoPath() {
+		var theScriptTag = $( "script[data-framework-version][data-framework-root][data-framework-theme]" );
+
+		return (theScriptTag.attr( "data-framework-root" ) + "/" +
+				theScriptTag.attr( "data-framework-version" ) + "/themes/" +
+				theScriptTag.attr( "data-framework-theme" ) + "/proto-html" );
+	}
+
+	$.widget( "tizen.widgetex", $.mobile.widget, {
+		_createWidget: function () {
+			$.tizen.widgetex.loadPrototype.call( this, this.namespace + "." + this.widgetName );
+			$.mobile.widget.prototype._createWidget.apply( this, arguments );
+		},
+
+		_init: function () {
+			// TODO THIS IS TEMPORARY PATCH TO AVOID CTXPOPUP PAGE CRASH
+			if ( this.element === undefined ) {
+				return;
+			}
+
+			var page = this.element.closest( ".ui-page" ),
+				self = this,
+				myOptions = {};
+
+			if ( page.is( ":visible" ) ) {
+				this._realize();
+			} else {
+				page.bind( "pageshow", function () { self._realize(); } );
+			}
+
+			$.extend( myOptions, this.options );
+
+			this.options = {};
+
+			this._setOptions( myOptions );
+		},
+
+		_getCreateOptions: function () {
+			// if we're dealing with an <input> element, value takes precedence over corresponding data-* attribute, if a
+			// mapping has been established via this._value. So, assign the value to the data-* attribute, so that it may
+			// then be assigned to this.options in the superclass' _getCreateOptions
+
+			if (this.element.is( "input" ) && this._value !== undefined) {
+				var theValue =
+					( ( this.element.attr( "type" ) === "checkbox" || this.element.attr( "type" ) === "radio" )
+							? this.element.is( ":checked" )
+									: this.element.is( "[value]" )
+									? this.element.attr( "value" )
+											: undefined);
+
+				if ( theValue != undefined ) {
+					this.element.attr( this._value.attr, theValue );
+				}
+			}
+
+			return $.mobile.widget.prototype._getCreateOptions.apply( this, arguments );
+		},
+
+		_setOption: function ( key, value ) {
+			var setter = "_set" + key.replace(/^[a-z]/, function (c) { return c.toUpperCase(); } );
+
+			if ( this[setter] !== undefined ) {
+				this[setter]( value );
+			} else {
+				$.mobile.widget.prototype._setOption.apply( this, arguments );
+			}
+		},
+
+		_setDisabled: function ( value ) {
+			$.Widget.prototype._setOption.call( this, "disabled", value );
+			if ( this.element.is( "input" ) ) {
+				this.element.attr( "disabled", value );
+			}
+		},
+
+		_setValue: function ( newValue ) {
+			$.tizen.widgetex.setValue( this, newValue );
+		},
+
+		_realize: function () {}
+	} );
+
+	$.tizen.widgetex.setValue = function ( widget, newValue ) {
+		if ( widget._value !== undefined ) {
+			var valueString = ( widget._value.makeString ? widget._value.makeString(newValue) : newValue ),
+				inputType;
+
+			widget.element.attr( widget._value.attr, valueString );
+			if ( widget._value.signal !== undefined ) {
+				widget.element.triggerHandler( widget._value.signal, newValue );
+			}
+
+			if ( widget.element.is( "input" ) ) {
+				inputType = widget.element.attr( "type" );
+
+				// Special handling for checkboxes and radio buttons, where the presence of the "checked" attribute is really
+				// the value
+				if ( inputType === "checkbox" || inputType === "radio" ) {
+					if ( newValue ) {
+						widget.element.attr( "checked", true );
+					} else {
+						widget.element.removeAttr( "checked" );
+					}
+				} else {
+					widget.element.attr( "value", valueString );
+				}
+
+				widget.element.trigger( "change" );
+			}
+		}
+	};
+
+	$.tizen.widgetex.assignElements = function (proto, obj) {
+		var ret = {},
+			key;
+
+		for ( key in obj ) {
+			if ( ( typeof obj[key] ) === "string" ) {
+				ret[key] = proto.find( obj[key] );
+				if ( obj[key].match(/^#/) ) {
+					ret[key].removeAttr( "id" );
+				}
+			} else {
+				if ( (typeof obj[key]) === "object" ) {
+					ret[key] = $.tizen.widgetex.assignElements( proto, obj[key] );
+				}
+			}
+		}
+
+		return ret;
+	};
+
+	$.tizen.widgetex.loadPrototype = function ( widget, ui ) {
+		var ar = widget.split( "." ),
+			namespace,
+			widgetName,
+			htmlProto,
+			protoPath;
+
+		if ( ar.length == 2 ) {
+			namespace = ar[0];
+			widgetName = ar[1];
+			htmlProto = $( "<div></div>" )
+						.text( "Failed to load proto for widget " + namespace + "." + widgetName + "!" )
+						.css( {background: "red", color: "blue", border: "1px solid black"} )
+						.jqmData( "tizen.widgetex.ajax.fail", true );
+
+			// If htmlProto is defined
+			if ( $[namespace][widgetName].prototype._htmlProto !== undefined ) {
+				// If no source is defined, use the widget name
+				if ( $[namespace][widgetName].prototype._htmlProto.source === undefined ) {
+					$[namespace][widgetName].prototype._htmlProto.source = widgetName;
+				}
+
+				// Load the HTML prototype via AJAX if not defined inline
+				if ( typeof $[namespace][widgetName].prototype._htmlProto.source === "string" ) {
+					// Establish the path for the proto file
+					widget = $[namespace][widgetName].prototype._htmlProto.source;
+					protoPath = getProtoPath();
+
+					// Make the AJAX call
+					$.ajax( {
+						url: protoPath + "/" + widget + ".prototype.html",
+						async: false,
+						dataType: "html"
+					}).success( function (data, textStatus, jqXHR ) {
+						htmlProto = $( "<div></div>" ).html(data).jqmData( "tizen.widgetex.ajax.fail", false );
+					} );
+
+					// Assign the HTML proto to the widget prototype
+					$[namespace][widgetName].prototype._htmlProto.source = htmlProto;
+				} else { // Otherwise, use the inline definition
+					// AJAX loading has trivially succeeded, since there was no AJAX loading at all
+					$[namespace][widgetName].prototype._htmlProto.source.jqmData( "tizen.widgetex.ajax.fail", false );
+					htmlProto = $[namespace][widgetName].prototype._htmlProto.source;
+				}
+
+				// If there's a "ui" portion in the HTML proto, copy it over to this instance, and
+				// replace the selectors with the selected elements from a copy of the HTML prototype
+				if ( $[namespace][widgetName].prototype._htmlProto.ui !== undefined ) {
+					// Assign the relevant parts of the proto
+					$.extend( this, {
+						_ui: $.tizen.widgetex.assignElements( htmlProto.clone(), $[namespace][widgetName].prototype._htmlProto.ui )
+					});
+				}
+			}
+		}
+	};
+
+}( jQuery ) );
+/*
+ *
+ * This software is licensed under the MIT licence (as defined by the OSI at
+ * http://www.opensource.org/licenses/mit-license.php)
+ *
+ * ***************************************************************************
+ * Copyright (C) 2011 by Intel Corporation Ltd.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a
+ * copy of this software and associated documentation files (the "Software" ),
+ * to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the
+ * Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+ * DEALINGS IN THE SOFTWARE.
+ * ***************************************************************************
+ */
+
+(function ( $, undefined ) {
+
+	$.widget( "tizen.colorwidget", $.tizen.widgetex, {
+		options: {
+			color: "#ff0972"
+		},
+
+		_value: {
+			attr: "data-" + ( $.mobile.ns || "" ) + "color",
+			signal: "colorchanged"
+		},
+
+		_getElementColor: function ( el, cssProp ) {
+			return el.jqmData( "clr" );
+		},
+
+		_setElementColor: function ( el, hsl, cssProp ) {
+			var clrlib = $.tizen.colorwidget.clrlib,
+				clr = clrlib.RGBToHTML( clrlib.HSLToRGB( hsl ) ),
+				dclr = clrlib.RGBToHTML( clrlib.HSLToGray( hsl ) );
+
+			el.jqmData( "clr", clr );
+			el.jqmData( "dclr", dclr );
+			el.jqmData( "cssProp", cssProp );
+			el.attr( "data-" + ( $.mobile.ns || "" ) + "has-dclr", true );
+			el.css( cssProp, this.options.disabled ? dclr : clr );
+
+			return { clr: clr, dclr: dclr };
+		},
+
+		_displayDisabledState: function ( toplevel ) {
+			var self = this,
+				sel = ":jqmData(has-dclr='true')",
+				dst = toplevel.is( sel ) ? toplevel : $([]),
+				el;
+
+			dst.add( toplevel.find( sel ) )
+				.each( function () {
+					el = $( this );
+					el.css( el.jqmData( "cssProp" ), el.jqmData( self.options.disabled ? "dclr" : "clr" ) );
+				} );
+		},
+
+		_setColor: function ( value ) {
+			var currentValue = ( this.options.color );
+
+			value = value.match(/#[0-9A-Fa-f]{6}/)
+				? value
+					: currentValue.match(/#[0-9A-Fa-f]{6}/)
+					? currentValue
+							: $.tizen.colorwidget.prototype.options.color;
+
+			if ( this.options.color !== value ) {
+				this.options.color = value;
+				this._setValue( value );
+				return true;
+			}
+			return false;
+		}
+	} );
+
+	$.tizen.colorwidget.clrlib = {
+		nearestInt: function ( val ) {
+			var theFloor = Math.floor( val );
+
+			return ( ( ( val - theFloor ) > 0.5 ) ? ( theFloor + 1 ) : theFloor );
+		},
+
+		// Converts html color string to rgb array.
+		//
+		// Input: string clr_str, where
+		// clr_str is of the form "#aabbcc"
+		//
+		// Returns: [ r, g, b ], where
+		// r is in [0, 1]
+		// g is in [0, 1]
+		// b is in [0, 1]
+		HTMLToRGB: function ( clr_str ) {
+			clr_str = ( ( '#' == clr_str.charAt( 0 ) ) ? clr_str.substring( 1 ) : clr_str );
+
+			return [ parseInt(clr_str.substring(0, 2), 16) / 255.0,
+					parseInt(clr_str.substring(2, 4), 16) / 255.0,
+					parseInt(clr_str.substring(4, 6), 16) / 255.0 ];
+		},
+
+		// Converts rgb array to html color string.
+		//
+		// Input: [ r, g, b ], where
+		// r is in [0, 1]
+		// g is in [0, 1]
+		// b is in [0, 1]
+		//
+		// Returns: string of the form "#aabbcc"
+		RGBToHTML: function ( rgb ) {
+			var ret = "#", val, theFloor,
+				Nix;
+			for ( Nix in rgb ) {
+				val = rgb[Nix] * 255;
+				theFloor = Math.floor( val );
+				val = ( ( val - theFloor > 0.5 ) ? ( theFloor + 1 ) : theFloor );
+				ret = ret + ( ( ( val < 16 ) ? "0" : "" ) + ( val & 0xff ).toString( 16 ) );
+			}
+
+			return ret;
+		},
+
+		// Converts hsl to rgb.
+		//
+		// From http://130.113.54.154/~monger/hsl-rgb.html
+		//
+		// Input: [ h, s, l ], where
+		// h is in [0, 360]
+		// s is in [0,   1]
+		// l is in [0,   1]
+		//
+		// Returns: [ r, g, b ], where
+		// r is in [0, 1]
+		// g is in [0, 1]
+		// b is in [0, 1]
+		HSLToRGB: function ( hsl ) {
+			var h = hsl[0] / 360.0, s = hsl[1], l = hsl[2],
+				temp1,
+				temp2,
+				temp3,
+				ret;
+
+			if ( 0 === s ) {
+				return [ l, l, l ];
+			}
+
+			temp2 = ( ( l < 0.5 )
+					? l * ( 1.0 + s )
+					: l + s - l * s);
+
+			temp1 = 2.0 * l - temp2;
+			temp3 = {
+				r: h + 1.0 / 3.0,
+				g: h,
+				b: h - 1.0 / 3.0
+			};
+
+			temp3.r = ( ( temp3.r < 0 ) ? ( temp3.r + 1.0 ) : ( ( temp3.r > 1 ) ? ( temp3.r - 1.0 ) : temp3.r ) );
+			temp3.g = ( ( temp3.g < 0 ) ? ( temp3.g + 1.0 ) : ( ( temp3.g > 1 ) ? ( temp3.g - 1.0 ) : temp3.g ) );
+			temp3.b = ( ( temp3.b < 0 ) ? ( temp3.b + 1.0 ) : ( ( temp3.b > 1 ) ? ( temp3.b - 1.0 ) : temp3.b ) );
+
+			ret = [( ( ( 6.0 * temp3.r ) < 1 ) ? ( temp1 + ( temp2 - temp1 ) * 6.0 * temp3.r ) :
+					( ( ( 2.0 * temp3.r ) < 1 ) ? temp2 :
+							( ( ( 3.0 * temp3.r ) < 2 ) ? ( temp1 + ( temp2 - temp1 ) * ( ( 2.0 / 3.0 ) - temp3.r ) * 6.0 ) :
+									temp1) ) ),
+						( ( ( 6.0 * temp3.g ) < 1) ? ( temp1 + ( temp2 - temp1 ) * 6.0 * temp3.g ) :
+							( ( ( 2.0 * temp3.g ) < 1 ) ? temp2 :
+								( ( ( 3.0 * temp3.g ) < 2 ) ? ( temp1 + ( temp2 - temp1 ) * ( ( 2.0 / 3.0 ) - temp3.g ) * 6.0 ) :
+										temp1 ) ) ),
+									( ( ( 6.0 * temp3.b ) < 1 ) ? ( temp1 + ( temp2 - temp1 ) * 6.0 * temp3.b ) :
+										( ( ( 2.0 * temp3.b ) < 1 ) ? temp2 :
+											( ( ( 3.0 * temp3.b ) < 2 ) ? ( temp1 + ( temp2 - temp1 ) * ( ( 2.0 / 3.0 ) - temp3.b ) * 6.0 ) :
+												temp1 ) ) )];
+
+			return ret;
+		},
+
+		// Converts hsv to rgb.
+		//
+		// Input: [ h, s, v ], where
+		// h is in [0, 360]
+		// s is in [0,   1]
+		// v is in [0,   1]
+		//
+		// Returns: [ r, g, b ], where
+		// r is in [0, 1]
+		// g is in [0, 1]
+		// b is in [0, 1]
+		HSVToRGB: function ( hsv ) {
+			return $.tizen.colorwidget.clrlib.HSLToRGB( $.tizen.colorwidget.clrlib.HSVToHSL( hsv ) );
+		},
+
+		// Converts rgb to hsv.
+		//
+		// from http://coecsl.ece.illinois.edu/ge423/spring05/group8/FinalProject/HSV_writeup.pdf
+		//
+		// Input: [ r, g, b ], where
+		// r is in [0,   1]
+		// g is in [0,   1]
+		// b is in [0,   1]
+		//
+		// Returns: [ h, s, v ], where
+		// h is in [0, 360]
+		// s is in [0,   1]
+		// v is in [0,   1]
+		RGBToHSV: function ( rgb ) {
+			var min, max, delta, h, s, v, r = rgb[0], g = rgb[1], b = rgb[2];
+
+			min = Math.min( r, Math.min( g, b ) );
+			max = Math.max( r, Math.max( g, b ) );
+			delta = max - min;
+
+			h = 0;
+			s = 0;
+			v = max;
+
+			if ( delta > 0.00001 ) {
+				s = delta / max;
+
+				if ( r === max ) {
+					h = ( g - b ) / delta;
+				} else {
+					if ( g === max ) {
+						h = 2 + ( b - r ) / delta;
+					} else {
+						h = 4 + ( r - g ) / delta;
+					}
+				}
+				h *= 60;
+
+				if ( h < 0 ) {
+					h += 360;
+				}
+			}
+
+			return [h, s, v];
+		},
+
+		// Converts hsv to hsl.
+		//
+		// Input: [ h, s, v ], where
+		// h is in [0, 360]
+		// s is in [0,   1]
+		// v is in [0,   1]
+		//
+		// Returns: [ h, s, l ], where
+		// h is in [0, 360]
+		// s is in [0,   1]
+		// l is in [0,   1]
+		HSVToHSL: function ( hsv ) {
+			var max = hsv[2],
+				delta = hsv[1] * max,
+				min = max - delta,
+				sum = max + min,
+				half_sum = sum / 2,
+				s_divisor = ( ( half_sum < 0.5 ) ? sum : ( 2 - max - min ) );
+
+			return [ hsv[0], ( ( 0 == s_divisor ) ? 0 : ( delta / s_divisor ) ), half_sum ];
+		},
+
+		// Converts rgb to hsl
+		//
+		// Input: [ r, g, b ], where
+		// r is in [0,   1]
+		// g is in [0,   1]
+		// b is in [0,   1]
+		//
+		// Returns: [ h, s, l ], where
+		// h is in [0, 360]
+		// s is in [0,   1]
+		// l is in [0,   1]
+		RGBToHSL: function ( rgb ) {
+			return $.tizen.colorwidget.clrlib.HSVToHSL( $.tizen.colorwidget.clrlib.RGBToHSV( rgb ) );
+		},
+
+		// Converts hsl to grayscale
+		// Full-saturation magic grayscale values were taken from the Gimp
+		//
+		// Input: [ h, s, l ], where
+		// h is in [0, 360]
+		// s is in [0,   1]
+		// l is in [0,   1]
+		//
+		// Returns: [ r, g, b ], where
+		// r is in [0,   1]
+		// g is in [0,   1]
+		// b is in [0,   1]
+		HSLToGray: function ( hsl ) {
+			var intrinsic_vals = [0.211764706, 0.929411765, 0.71372549, 0.788235294, 0.070588235, 0.28627451, 0.211764706],
+				idx = Math.floor(hsl[0] / 60),
+				lowerHalfPercent,
+				upperHalfPercent,
+				begVal,
+				endVal,
+				val;
+
+			// Find hue interval
+			begVal = intrinsic_vals[idx];
+			endVal = intrinsic_vals[idx + 1];
+
+			// Adjust for lum
+			if ( hsl[2] < 0.5 ) {
+				lowerHalfPercent = hsl[2] * 2;
+				begVal *= lowerHalfPercent;
+				endVal *= lowerHalfPercent;
+			} else {
+				upperHalfPercent = ( hsl[2] - 0.5 ) * 2;
+				begVal += ( 1.0 - begVal ) * upperHalfPercent;
+				endVal += ( 1.0 - endVal ) * upperHalfPercent;
+			}
+
+			// This is the gray value at full sat, whereas hsl[2] is the gray value at 0 sat.
+			val = begVal + ( ( endVal - begVal ) * ( hsl[0] - ( idx * 60 ) ) ) / 60;
+
+			// Get value at hsl[1]
+			val = val + ( hsl[2] - val ) * ( 1.0 - hsl[1] );
+
+			return [val, val, val];
+		}
+	};
+
+}( jQuery ));
+(function ( $, undefined ) {
+
+	$.widget( "tizen.huegradient", $.tizen.widgetex, {
+		_create: function () {
+			this.element.addClass( "tizen-huegradient" );
+		},
+
+		// Crutches for IE: it is incapable of multi-stop gradients, so add multiple divs inside the given div, each with a
+		// two-point gradient
+		_IEGradient: function ( div, disabled ) {
+			var rainbow = disabled
+				? ["#363636", "#ededed", "#b6b6b6", "#c9c9c9", "#121212", "#494949", "#363636"]
+				: ["#ff0000", "#ffff00", "#00ff00", "#00ffff", "#0000ff", "#ff00ff", "#ff0000"],
+				Nix;
+
+			for (Nix = 0 ; Nix < 6 ; Nix++ ) {
+				$( "<div></div>" )
+					.css( {
+						position: "absolute",
+						width: ( 100 / 6 ) + "%",
+						height: "100%",
+						left: ( Nix * 100 / 6 ) + "%",
+						top: "0px",
+						filter: "progid:DXImageTransform.Microsoft.gradient (startColorstr='" + rainbow[Nix] + "', endColorstr='" + rainbow[Nix + 1] + "', GradientType = 1)"
+					} )
+					.appendTo( div );
+			}
+		},
+
+		_setDisabled: function ( value ) {
+			$.Widget.prototype._setOption.call( this, "disabled", value );
+			if ( $.mobile.browser.ie ) {
+				this._IEGradient( this.element.empty(), value );
+			}
+		}
+	} );
+}( jQuery ) );
+( function ( $, undefined ) {
+
+	$.widget( "todons.colorwidget", $.mobile.widget, {
+		options: {
+			color: "#ff0972"
+		},
+
+		_create: function () {
+			$.extend ( this, {
+				isInput: this.element.is( "input" )
+			} );
+
+			/* "value", if present, takes precedence over "data-color" */
+			if ( this.isInput ) {
+				if ( this.element.attr( "value" ).match(/#[0-9A-Fa-f]{6}/) ) {
+					this.element.attr( "data-color", this.element.attr( "value" ) );
+				}
+			}
+
+			$.mobile.todons.parseOptions( this, true );
+		},
+
+		_setOption: function ( key, value, unconditional ) {
+			if ( undefined === unconditional ) {
+				unconditional = false;
+			}
+
+			if ( key === "color" ) {
+				this._setColor(value, unconditional);
+			}
+		},
+
+		_setColor: function ( value, unconditional ) {
+			if ( value.match(/#[0-9A-Fa-f]{6}/) && ( value != this.options.color || unconditional ) ) {
+				this.options.color = value;
+				this.element.attr( "data-color", value );
+
+				if ( this.isInput ) {
+					this.element.attr( "value", value );
+				}
+
+				this.element.triggerHandler( "colorchanged", value );
+				return true;
+			}
+			return false;
+		}
+	} );
+
+}( jQuery ) );
+/*
+ * jQuery Mobile Widget @VERSION - listview autodividers
+ *
+ * This software is licensed under the MIT licence (as defined by the OSI at
+ * http://www.opensource.org/licenses/mit-license.php)
+ * 
+ * ***************************************************************************
+ * Copyright (c) 2011 by Intel Corporation Ltd.
+ * 
+ * Permission is hereby granted, free of charge, to any person obtaining a
+ * copy of this software and associated documentation files (the "Software"),
+ * to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the
+ * Software is furnished to do so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+ * DEALINGS IN THE SOFTWARE.
+ * ***************************************************************************
+ *
+ * Authors: Elliot Smith <el...@intel.com>
+ */
+
+// Applies dividers automatically to a listview, using link text
+// (for link lists) or text (for readonly lists) as the basis for the
+// divider text.
+//
+// Apply using autodividers({type: 'X'}) on a <ul> with
+// data-role="listview", or with data-autodividers="true", where X
+// is the type of divider to create. The default divider type is 'alpha',
+// meaning first characters of list item text, upper-cased.
+//
+// The element used to derive the text for the auto dividers defaults
+// to the first link inside the li; failing that, the text directly inside
+// the li element is used. This can be overridden with the
+// data-autodividers-selector attribute or via options; the selector
+// will use each li element as its context.
+//
+// Any time a new li element is added to the list, or an li element is
+// removed, this extension will update the dividers in the listview
+// accordingly.
+//
+// Note that if a listview already has dividers, applying this
+// extension will remove all the existing dividers and replace them
+// with new, generated ones.
+//
+// Also note that this extension doesn't sort the list: it only creates
+// dividers based on text inside list items. So if your list isn't
+// alphabetically-sorted, you may get duplicate dividers.
+//
+// So, for example, this markup:
+//
+// <ul id="has-no-dividers" data-role="listview" data-autodividers="alpha">
+//		<li>Barry</li>
+//		<li>Carrie</li>
+//		<li>Betty</li>
+//		<li>Harry</li>
+//		<li>Carly</li>
+//		<li>Hetty</li>
+// </ul>
+//
+// will produce dividers like this:
+//
+// <ul data-role="listview" data-autodividers="alpha">
+//	<li data-role="list-divider">B</li>
+//	<li>Barry</li>
+//	<li data-role="list-divider">C</li>
+//	<li>Carrie</li>
+//	<li data-role="list-divider">B</li>
+//	<li>Betty</li>
+//	<li data-role="list-divider">H</li>
+//	<li>Harry</li>
+//	<li data-role="list-divider">C</li>
+//	<li>Carly</li>
+//	<li data-role="list-divider">H</li>
+//	<li>Hetty</li>
+// </ul>
+//
+// with each divider occuring twice.
+//
+// Options:
+//
+//	selector: The jQuery selector to use to find text for the
+//			generated dividers. Default is to use the first 'a'
+//			(link) element. If this selector doesn't find any
+//			text, the widget automatically falls back to the text
+//			inside the li (for read-only lists). Can be set to a custom
+//			selector via data-autodividers-selector="..." or the 'selector'
+//			option.
+//
+//	 type: 'alpha' (default) sets the auto divider type to "uppercased
+//		 first character of text selected from each item"; "full" sets
+//		 it to the unmodified text selected from each item. Set via
+//		 the data-autodividers="<type>" attribute on the listview or
+//		 the 'type' option.
+//
+// Events:
+//
+//	updatelayout: Triggered if the dividers in the list change;
+//		this happens if list items are added to the listview,
+//		which causes the autodividers to be regenerated.
+
+(function ( $, undefined ) {
+
+	var autodividers = function ( options ) {
+		var list = $( this ),
+			listview = list.data( 'listview' ),
+			dividerType,
+			textSelector,
+			getDividerText,
+			mergeDividers,
+			isNonDividerLi,
+			liAdded,
+			liRemoved;
+
+		options = options || {};
+		dividerType = options.type || list.jqmData( 'autodividers' ) || 'alpha';
+		textSelector = options.selector || list.jqmData( 'autodividers-selector' ) || 'a';
+
+		getDividerText = function ( elt ) {
+			// look for some text in the item
+			var text = elt.find( textSelector ).text() || elt.text() || null;
+
+			if ( !text ) {
+				return null;
+			}
+
+			// create the text for the divider
+			if ( dividerType === 'alpha' ) {
+				text = text.slice( 0, 1 ).toUpperCase();
+			}
+
+			return text;
+		};
+
+		mergeDividers = function () {
+			var dividersChanged = false,
+				divider,
+				dividerText,
+				selector,
+				nextDividers;
+
+			// any dividers which are following siblings of a divider, where
+			// there are no dividers with different text inbetween, can be removed
+			list.find( 'li.ui-li-divider' ).each(function () {
+				divider = $( this );
+				dividerText = divider.text();
+				selector = '.ui-li-divider:not(:contains(' + dividerText + '))';
+				nextDividers = divider.nextUntil( selector );
+				nextDividers = nextDividers.filter( '.ui-li-divider:contains(' + dividerText + ')' );
+
+				if ( nextDividers.length > 0 ) {
+					nextDividers.remove();
+					dividersChanged = true;
+				}
+			} );
+
+			if ( dividersChanged ) {
+				list.trigger( 'updatelayout' );
+			}
+		};
+
+		// check that elt is a non-divider li element
+		isNonDividerLi = function ( elt ) {
+			return elt.is('li') &&
+					elt.jqmData( 'role' ) !== 'list-divider';
+		};
+
+		// li element inserted, so check whether it needs a divider
+		liAdded = function ( li ) {
+			var dividerText = getDividerText( li ),
+				existingDividers,
+				divider;
+
+			if ( !dividerText ) {
+				listview.refresh();
+				return;
+			}
+
+			// add expected divider for this li if it doesn't exist
+			existingDividers = li.prevAll( '.ui-li-divider:first:contains(' + dividerText + ')' );
+
+			if ( existingDividers.length === 0 ) {
+				divider = $( '<li>' + dividerText + '</li>' );
+				divider.attr( 'data-' + $.mobile.ns + 'role', 'list-divider' );
+				li.before( divider );
+
+				listview.refresh();
+
+				mergeDividers();
+			} else {
+				listview.refresh();
+			}
+		};
+
+		// li element removed, so check whether its divider should go
+		liRemoved = function ( li ) {
+			var dividerText = getDividerText( li ),
+				precedingItems,
+				nextItems;
+
+			if ( !dividerText ) {
+				listview.refresh();
+				return;
+			}
+
+			// remove divider for this li if there are no other
+			// li items for the divider before or after this li item
+			precedingItems = li.prevUntil( '.ui-li-divider:contains(' + dividerText + ')' );
+			nextItems = li.nextUntil( '.ui-li-divider' );
+
+			if ( precedingItems.length === 0 && nextItems.length === 0 ) {
+				li.prevAll( '.ui-li-divider:contains(' + dividerText + '):first' ).remove();
+
+				listview.refresh();
+
+				mergeDividers();
+			} else {
+				listview.refresh();
+			}
+		};
+
+		// set up the dividers on first create
+		list.find( 'li' ).each( function () {
+			var li = $( this );
+
+			// remove existing dividers
+			if ( li.jqmData( 'role' ) === 'list-divider' ) {
+				li.remove();
+			} else {			// make new dividers for list items
+				liAdded( li );
+			}
+		} );
+
+		// bind to DOM events to keep list up to date
+		list.bind( 'DOMNodeInserted', function ( e ) {
+			var elt = $( e.target );
+
+			if ( !isNonDividerLi( elt ) ) {
+				return;
+			}
+
+			liAdded( elt );
+		} );
+
+		list.bind( 'DOMNodeRemoved', function ( e ) {
+			var elt = $( e.target );
+
+			if ( !isNonDividerLi( elt ) ) {
+				return;
+			}
+
+			liRemoved( elt );
+		} );
+	};
+
+	$.fn.autodividers = autodividers;
+
+	$( ":jqmData(role=listview)" ).live( "listviewcreate", function () {
+		var list = $( this );
+
+		if ( list.is( ':jqmData(autodividers)' ) ) {
+			list.autodividers();
+		}
+	} );
+}( jQuery ) );
+/* ***************************************************************************
+ * Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a
+ * copy of this software and associated documentation files (the "Software" ),
+ * to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the
+ * Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+ * DEALINGS IN THE SOFTWARE.
+ * ***************************************************************************
+ */
+
+// most of following codes are derived from jquery.mobile.scrollview.js
+(function ( $, window, document, undefined ) {
+
+	function circularNum( num, total ) {
+		var n = num % total;
+		if ( n < 0 ) {
+			n = total + n;
+		}
+		return n;
+	}
+
+	function setElementTransform( $ele, x, y ) {
+		var v = "translate3d( " + x + "," + y + ", 0px)";
+		$ele.css({
+			"-moz-transform": v,
+			"-webkit-transform": v,
+			"transform": v
+		} );
+	}
+
+	function MomentumTracker( options ) {
+		this.options = $.extend( {}, options );
+		this.easing = "easeOutQuad";
+		this.reset();
+	}
+
+	var tstates = {
+		scrolling : 0,
+		done : 1
+	};
+
+	function getCurrentTime() {
+		return ( new Date()).getTime();
+	}
+
+	$.extend( MomentumTracker.prototype, {
+		start: function ( pos, speed, duration ) {
+			this.state = ( speed != 0 ) ? tstates.scrolling : tstates.done;
+			this.pos = pos;
+			this.speed = speed;
+			this.duration = duration;
+
+			this.fromPos = 0;
+			this.toPos = 0;
+
+			this.startTime = getCurrentTime();
+		},
+
+		reset: function () {
+			this.state = tstates.done;
+			this.pos = 0;
+			this.speed = 0;
+			this.duration = 0;
+		},
+
+		update: function () {
+			var state = this.state,
+				duration,
+				elapsed,
+				dx,
+				x;
+
+			if ( state == tstates.done ) {
+				return this.pos;
+			}
+
+			duration = this.duration;
+			elapsed = getCurrentTime() - this.startTime;
+			elapsed = elapsed > duration ? duration : elapsed;
+
+			dx = this.speed * ( 1 - $.easing[this.easing](elapsed / duration, elapsed, 0, 1, duration ) );
+
+			x = this.pos + dx;
+			this.pos = x;
+
+			if ( elapsed >= duration ) {
+				this.state = tstates.done;
+			}
+
+			return this.pos;
+		},
+
+		done: function () {
+			return this.state == tstates.done;
+		},
+
+		getPosition: function () {
+			return this.pos;
+		}
+	} );
+
+	jQuery.widget( "mobile.circularview", jQuery.mobile.widget, {
+		options: {
+			fps:				60,
+
+			scrollDuration:		2000,
+
+			moveThreshold:		10,
+			moveIntervalThreshold:	150,
+
+			startEventName:		"scrollstart",
+			updateEventName:	"scrollupdate",
+			stopEventName:		"scrollstop",
+
+			eventType:			$.support.touch	? "touch" : "mouse",
+
+			delayedClickSelector: "a, .ui-btn",
+			delayedClickEnabled: false
+		},
+
+		_makePositioned: function ( $ele ) {
+			if ( $ele.css( 'position' ) == 'static' ) {
+				$ele.css( 'position', 'relative' );
+			}
+		},
+
+		_create: function () {
+			this._$clip = $( this.element).addClass( "ui-scrollview-clip" );
+			var $child = this._$clip.children(),
+				self;
+			//if ( $child.length > 1 ) {
+			$child = this._$clip.wrapInner( "<div></div>" ).children();
+			//}
+			this._$view = $child.addClass( "ui-scrollview-view" );
+			this._$list = $child.children();
+
+			this._$clip.css( "overflow", "hidden" );
+			this._makePositioned( this._$clip );
+
+			this._$view.css( "overflow", "hidden" );
+			this._tracker = new MomentumTracker( this.options );
+
+			this._timerInterval = 1000 / this.options.fps;
+			this._timerID = 0;
+
+			self = this;
+			this._timerCB = function () { self._handleMomentumScroll(); };
+
+			this.refresh();
+
+			this._addBehaviors();
+		},
+
+		refresh: function () {
+			var itemsPerView;
+
+			this._viewWidth = this._$view.width();
+			this._clipWidth = $( window ).width();
+			this._itemWidth = this._$list.children().first().outerWidth();
+			this._$items = this._$list.children().detach();
+			itemsPerView = this._clipWidth / this._itemWidth;
+			itemsPerView = Math.ceil( itemsPerView * 10 ) / 10;
+			this._itemsPerView = parseInt( itemsPerView, 10 );
+
+			this._rx = -this._itemWidth;
+			this._sx = -this._itemWidth;
+			this._setItems();
+		},
+
+		_startMScroll: function ( speedX, speedY ) {
+			this._stopMScroll();
+
+			var keepGoing = false,
+				duration = this.options.scrollDuration,
+				t = this._tracker,
+				c = this._clipWidth,
+				v = this._viewWidth;
+
+			this._$clip.trigger( this.options.startEventName);
+
+			t.start( this._rx, speedX, duration, (v > c ) ? -(v - c) : 0, 0 );
+			keepGoing = !t.done();
+
+			if ( keepGoing ) {
+				this._timerID = setTimeout( this._timerCB, this._timerInterval );
+			} else {
+				this._stopMScroll();
+			}
+			//console.log( "startmscroll" + this._rx + "," + this._sx );
+		},
+
+		_stopMScroll: function () {
+			if ( this._timerID ) {
+				this._$clip.trigger( this.options.stopEventName );
+				clearTimeout( this._timerID );
+			}
+
+			this._timerID = 0;
+
+			if ( this._tracker ) {
+				this._tracker.reset();
+			}
+			//console.log( "stopmscroll" + this._rx + "," + this._sx );
+		},
+
+		_handleMomentumScroll: function () {
+			var keepGoing = false,
+				v = this._$view,
+				x = 0,
+				y = 0,
+				t = this._tracker;
+
+			if ( t ) {
+				t.update();
+				x = t.getPosition();
+
+				keepGoing = !t.done();
+
+			}
+
+			this._setScrollPosition( x, y );
+			this._rx = x;
+
+			this._$clip.trigger( this.options.updateEventName, [ { x: x, y: y } ] );
+
+			if ( keepGoing ) {
+				this._timerID = setTimeout( this._timerCB, this._timerInterval );
+			} else {
+				this._stopMScroll();
+			}
+		},
+
+		_setItems: function () {
+			var i,
+				$item;
+
+			for ( i = -1; i < this._itemsPerView + 1; i++ ) {
+				$item = this._$items[ circularNum( i, this._$items.length ) ];
+				this._$list.append( $item );
+			}
+			setElementTransform( this._$view, this._sx + "px", 0 );
+			this._$view.width( this._itemWidth * ( this._itemsPerView + 2 ) );
+			this._viewWidth = this._$view.width();
+		},
+
+		_setScrollPosition: function ( x, y ) {
+			var sx = this._sx,
+				dx = x - sx,
+				di = parseInt( dx / this._itemWidth, 10 ),
+				i,
+				idx,
+				$item;
+
+			if ( di > 0 ) {
+				for ( i = 0; i < di; i++ ) {
+					this._$list.children().last().detach();
+					idx = -parseInt( ( sx / this._itemWidth ) + i + 3, 10 );
+					$item = this._$items[ circularNum( idx, this._$items.length ) ];
+					this._$list.prepend( $item );
+					//console.log( "di > 0 : " + idx );
+				}
+			} else if ( di < 0 ) {
+				for ( i = 0; i > di; i-- ) {
+					this._$list.children().first().detach();
+					idx = this._itemsPerView - parseInt( ( sx / this._itemWidth ) + i, 10 );
+					$item = this._$items[ circularNum( idx, this._$items.length ) ];
+					this._$list.append( $item );
+					//console.log( "di < 0 : " + idx );
+				}
+			}
+
+			this._sx += di * this._itemWidth;
+
+			setElementTransform( this._$view, ( x - this._sx - this._itemWidth ) + "px", 0 );
+
+			//console.log( "rx " + this._rx + "sx " + this._sx );
+		},
+
+		_enableTracking: function () {
+			$(document).bind( this._dragMoveEvt, this._dragMoveCB );
+			$(document).bind( this._dragStopEvt, this._dragStopCB );
+		},
+
+		_disableTracking: function () {
+			$(document).unbind( this._dragMoveEvt, this._dragMoveCB );
+			$(document).unbind( this._dragStopEvt, this._dragStopCB );
+		},
+
+		_getScrollHierarchy: function () {
+			var svh = [],
+				d;
+			this._$clip.parents( '.ui-scrollview-clip' ).each( function () {
+				d = $( this ).jqmData( 'circulaview' );
+				if ( d ) {
+					svh.unshift( d );
+				}
+			} );
+			return svh;
+		},
+
+		centerTo: function ( selector ) {
+			var i,
+				newX;
+
+			for ( i = 0; i < this._$items.length; i++ ) {
+				if ( $( this._$items[i]).is( selector ) ) {
+					newX = -( i * this._itemWidth - this._clipWidth / 2 + this._itemWidth * 2 );
+					this.scrollTo( newX, 0 );
+					console.log( i + "," + newX );
+					return;
+				}
+			}
+		},
+
+		scrollTo: function ( x, y, duration ) {
+			this._stopMScroll();
+			if ( !duration ) {
+				this._setScrollPosition( x, y );
+				this._rx = x;
+				return;
+			}
+
+			x = -x;
+			y = -y;
+
+			var self = this,
+				start = getCurrentTime(),
+				efunc = $.easing.easeOutQuad,
+				sx = this._rx,
+				sy = 0,
+				dx = x - sx,
+				dy = 0,
+				tfunc,
+				elapsed,
+				ec;
+
+			tfunc = function () {
+				elapsed = getCurrentTime() - start;
+				if ( elapsed >= duration ) {
+					self._timerID = 0;
+					self._setScrollPosition( x, y );
+				} else {
+					ec = efunc( elapsed / duration, elapsed, 0, 1, duration );
+					self._setScrollPosition( sx + ( dx * ec ), sy + ( dy * ec ) );
+					self._timerID = setTimeout( tfunc, self._timerInterval );
+				}
+			};
+
+			this._timerID = setTimeout( tfunc, this._timerInterval );
+		},
+
+		getScrollPosition: function () {
+			return { x: -this._rx, y: 0 };
+		},
+
+		_handleDragStart: function ( e, ex, ey ) {
+			$.each( this._getScrollHierarchy(), function ( i, sv ) {
+				sv._stopMScroll();
+			} );
+
+			this._stopMScroll();
+
+			if ( this.options.delayedClickEnabled ) {
+				this._$clickEle = $( e.target ).closest( this.options.delayedClickSelector );
+			}
+			this._lastX = ex;
+			this._lastY = ey;
+			this._speedX = 0;
+			this._speedY = 0;
+			this._didDrag = false;
+
+			this._lastMove = 0;
+			this._enableTracking();
+
+			this._ox = ex;
+			this._nx = this._rx;
+
+			if ( this.options.eventType == "mouse" || this.options.delayedClickEnabled ) {
+				e.preventDefault();
+			}
+			//console.log( "scrollstart" + this._rx + "," + this._sx );
+			e.stopPropagation();
+		},
+
+		_handleDragMove: function ( e, ex, ey ) {
+			this._lastMove = getCurrentTime();
+
+			var dx = ex - this._lastX,
+				dy = ey - this._lastY;
+
+			this._speedX = dx;
+			this._speedY = 0;
+
+			this._didDrag = true;
+
+			this._lastX = ex;
+			this._lastY = ey;
+
+			this._mx = ex - this._ox;
+
+			this._setScrollPosition( this._nx + this._mx, 0 );
+
+			//console.log( "scrollmove" + this._rx + "," + this._sx );
+			return false;
+		},
+
+		_handleDragStop: function ( e ) {
+			var l = this._lastMove,
+				t = getCurrentTime(),
+				doScroll = l && ( t - l ) <= this.options.moveIntervalThreshold,
+				sx = ( this._tracker && this._speedX && doScroll ) ? this._speedX : 0,
+				sy = 0;
+
+			this._rx = this._mx ? this._nx + this._mx : this._rx;
+
+			if ( sx ) {
+				this._startMScroll( sx, sy );
+			}
+
+			//console.log( "scrollstop" + this._rx + "," + this._sx );
+
+			this._disableTracking();
+
+			if ( !this._didDrag && this.options.delayedClickEnabled && this._$clickEle.length ) {
+				this._$clickEle
+					.trigger( "mousedown" )
+					.trigger( "mouseup" )
+					.trigger( "click" );
+			}
+
+			if ( this._didDrag ) {
+				e.preventDefault();
+				e.stopPropagation();
+			}
+
+			return this._didDrag ? false : undefined;
+		},
+
+		_addBehaviors: function () {
+			var self = this;
+
+			if ( this.options.eventType === "mouse" ) {
+				this._dragStartEvt = "mousedown";
+				this._dragStartCB = function ( e ) {
+					return self._handleDragStart( e, e.clientX, e.clientY );
+				};
+
+				this._dragMoveEvt = "mousemove";
+				this._dragMoveCB = function ( e ) {
+					return self._handleDragMove( e, e.clientX, e.clientY );
+				};
+
+				this._dragStopEvt = "mouseup";
+				this._dragStopCB = function ( e ) {
+					return self._handleDragStop( e );
+				};
+
+				this._$view.bind( "vclick", function (e) {
+					return !self._didDrag;
+				} );
+
+			} else { //touch
+				this._dragStartEvt = "touchstart";
+				this._dragStartCB = function ( e ) {
+					var t = e.originalEvent.targetTouches[0];
+					return self._handleDragStart(e, t.pageX, t.pageY );
+				};
+
+				this._dragMoveEvt = "touchmove";
+				this._dragMoveCB = function ( e ) {
+					var t = e.originalEvent.targetTouches[0];
+					return self._handleDragMove(e, t.pageX, t.pageY );
+				};
+
+				this._dragStopEvt = "touchend";
+				this._dragStopCB = function ( e ) {
+					return self._handleDragStop( e );
+				};
+			}
+			this._$view.bind( this._dragStartEvt, this._dragStartCB );
+		}
+	} );
+
+	$( document ).bind( "pagecreate create", function ( e ) {
+		$( $.mobile.circularview.prototype.options.initSelector, e.target ).circularview();
+	} );
+
+}( jQuery, window, document ) ); // End Component
+/* TBD */
+/*
+ * jQuery Mobile Widget @VERSION
+ *
+ * This software is licensed under the MIT licence (as defined by the OSI at
+ * http://www.opensource.org/licenses/mit-license.php)
+ * 
+ * ***************************************************************************
+ * Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd.
+ * Copyright (c) 2011 by Intel Corporation Ltd.
+ * 
+ * Permission is hereby granted, free of charge, to any person obtaining a
+ * copy of this software and associated documentation files (the "Software"),
+ * to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the
+ * Software is furnished to do so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+ * DEALINGS IN THE SOFTWARE.
+ * ***************************************************************************
+ *
+ * Authors: Gabriel Schulhof <ga...@intel.com>
+ */
+
+// It displays a grid two rows by five columns of colors.
+//
+// The colors are automatically computed based on the hue
+// of the color set by the color attribute (see below).
+//
+// One of the displayed colors is the color attribute itself
+// and the others are multiples of 360/10 away from that color;
+// 10 is the total number of colors displayed (2 rows by 5 columns).
+//
+// To apply, add the attribute data-role="colorpalette" to a <div>
+// element inside a page. Alternatively, call colorpalette() on an
+// element.
+//
+// Options:
+//
+//     color: String; initial color can be specified in html
+//            using the data-color="#ff00ff" attribute or
+//            when constructed in javascript, eg :
+//                $("#mycolorpalette").colorpalette({ color: "#ff00ff" });
+//            where the html might be :
+//                <div id="mycolorpalette"></div>
+//            The color can be changed post-construction like this :
+//                $("#mycolorpalette").colorpalette("option", "color", "#ABCDEF");
+//            Default: "#1a8039"
+
+/*
+ * Colorpalette displays a grid two rows by five columns of colors.
+ *
+ * The colors are automatically computed based on the hue
+ * of the color set by the color attribute (see below).
+ *
+ * One of the displayed colors is the color attribute itself
+ * and the others are multiples of 360/10 away from that color;
+ * 10 is the total number of colors displayed (2 rows by 5 columns).
+ *
+ * HTML attributes:
+ *
+ * To apply, add the attribute data-role="colorpalette" to a <div>
+ * element inside a page. Alternatively, call colorpalette() on an
+ * element.
+ *
+ *     data-role: Myst have 'colorpalette'.
+ *     data-color: String; initial color can be specified in html
+ *            using the data-color="#ff00ff" attribute or
+ *            when constructed in javascript, eg :
+ *                $("#mycolorpalette").colorpalette({ color: "#ff00ff" });
+ *            where the html might be :
+ *                <div id="mycolorpalette"></div>
+ *            The color can be changed post-construction like this :
+ *                $("#mycolorpalette").colorpalette("option", "color", "#ABCDEF");
+ *            Default: "#1a8039"
+ *
+ *APIs:
+ *		$('obj').colorpalette() : Make an object to a colorpalette widget.
+ *
+ *Events:
+ *		No event.
+ *
+ *Examples:
+ *		<div data-role="colorpalette" data-color: "#ffffff"></div>
+ *
+ *		<div id="toBeColorpalette"></div>
+ *		<script>
+ *			$("#toBeColorpalette").colorpalette({ color: "#ffffff" });
+ *		</script>
+ *
+ */
+
+( function ( $, undefined ) {
+
+	$.widget( "tizen.colorpalette", $.tizen.colorwidget, {
+		options: {
+			showPreview: false,
+			initSelector: ":jqmData(role='colorpalette')"
+		},
+
+		_htmlProto: {
+source:
+
+$("<div><div id='colorpalette' class='ui-colorpalette jquery-mobile-ui-widget' data-n-choices='10'>" +
+  "    <div class='colorpalette-preview-container' id='colorpalette-preview-container'>" +
+  "        <div id='colorpalette-preview' class='colorpalette-preview ui-corner-all'></div>" +
+  "    </div>" +
+  "    <div class='colorpalette-table'>" +
+  "        <div class='colorpalette-normal-row'>" +
+  "            <div class='colorpalette-choice-container-left'>" +
+  "                <div data-colorpalette-choice='0' class='colorpalette-choice ui-corner-all'></div>" +
+  "            </div>" +
+  "            <div class='colorpalette-choice-container-rest'>" +
+  "                <div data-colorpalette-choice='1' class='colorpalette-choice ui-corner-all'></div>" +
+  "            </div>" +
+  "            <div class='colorpalette-choice-container-rest'>" +
+  "                <div data-colorpalette-choice='2' class='colorpalette-choice ui-corner-all'></div>" +
+  "            </div>" +
+  "            <div class='colorpalette-choice-container-rest'>" +
+  "                <div data-colorpalette-choice='3' class='colorpalette-choice ui-corner-all'></div>" +
+  "            </div>" +
+  "            <div class='colorpalette-choice-container-rest'>" +
+  "                <div data-colorpalette-choice='4' class='colorpalette-choice ui-corner-all'></div>" +
+  "            </div>" +
+  "        </div>" +
+  "        <div class='colorpalette-bottom-row'>" +
+  "            <div class='colorpalette-choice-container-left'>" +
+  "                <div data-colorpalette-choice='5' class='colorpalette-choice ui-corner-all'></div>" +
+  "            </div>" +
+  "            <div class='colorpalette-choice-container-rest'>" +
+  "                <div data-colorpalette-choice='6' class='colorpalette-choice ui-corner-all'></div>" +
+  "            </div>" +
+  "            <div class='colorpalette-choice-container-rest'>" +
+  "                <div data-colorpalette-choice='7' class='colorpalette-choice ui-corner-all'></div>" +
+  "            </div>" +
+  "            <div class='colorpalette-choice-container-rest'>" +
+  "                <div data-colorpalette-choice='8' class='colorpalette-choice ui-corner-all'></div>" +
+  "            </div>" +
+  "            <div class='colorpalette-choice-container-rest'>" +
+  "                <div data-colorpalette-choice='9' class='colorpalette-choice ui-corner-all'></div>" +
+  "            </div>" +
+  "        </div>" +
+  "    </div>" +
+  "</div>" +
+  "</div>")
+,			ui: {
+				clrpalette: "#colorpalette",
+				preview: "#colorpalette-preview",
+				previewContainer: "#colorpalette-preview-container"
+			}
+		},
+
+		_create: function () {
+			var self = this;
+
+			this.element
+				.css( "display", "none" )
+				.after( this._ui.clrpalette );
+
+			this._ui.clrpalette.find( "[data-colorpalette-choice]" ).bind( "vclick", function ( e ) {
+				var clr = $.tizen.colorwidget.prototype._getElementColor.call(this, $(e.target)),
+					Nix,
+					nChoices = self._ui.clrpalette.attr( "data-" + ( $.mobile.ns || "" ) + "n-choices" ),
+					choiceId,
+					rgbMatches;
+
+				rgbMatches = clr.match(/rgb\(([0-9]*), *([0-9]*), *([0-9]*)\)/);
+
+				if ( rgbMatches && rgbMatches.length > 3 ) {
+					clr = $.tizen.colorwidget.clrlib.RGBToHTML( [
+						parseInt(rgbMatches[1], 10) / 255,
+						parseInt(rgbMatches[2], 10) / 255,
+						parseInt(rgbMatches[3], 10) / 255] );
+				}
+
+				for ( Nix = 0 ; Nix < nChoices ; Nix++ ) {
+					self._ui.clrpalette.find( "[data-colorpalette-choice=" + Nix + "]" ).removeClass( "colorpalette-choice-active" );
+				}
+
+				$(e.target).addClass( "colorpalette-choice-active" );
+				$.tizen.colorwidget.prototype._setColor.call( self, clr );
+				$.tizen.colorwidget.prototype._setElementColor.call( self, self._ui.preview, $.tizen.colorwidget.clrlib.RGBToHSL( $.tizen.colorwidget.clrlib.HTMLToRGB( clr ) ), "background" );
+			} );
+		},
+
+		_setShowPreview: function ( show ) {
+			if ( show ) {
+				this._ui.previewContainer.removeAttr( "style" );
+			} else {
+				this._ui.previewContainer.css( "display", "none" );
+			}
+
+			this.element.attr( "data-" + ( $.mobile.ns || "" ) + "show-preview", show );
+			this.options.showPreview = show;
+		},
+
+		widget: function ( value ) {
+			return this._ui.clrpalette;
+		},
+
+		_setDisabled: function ( value ) {
+			$.tizen.widgetex.prototype._setDisabled.call( this, value );
+			this._ui.clrpalette[value ? "addClass" : "removeClass"]( "ui-disabled" );
+			$.tizen.colorwidget.prototype._displayDisabledState.call( this, this._ui.clrpalette );
+		},
+
+		_setColor: function ( clr ) {
+			if ( $.tizen.colorwidget.prototype._setColor.call( this, clr ) ) {
+				clr = this.options.color;
+
+				var Nix,
+					activeIdx = -1,
+					nChoices = this._ui.clrpalette.attr( "data-" + ( $.mobile.ns || "" ) + "n-choices" ),
+					hsl = $.tizen.colorwidget.clrlib.RGBToHSL( $.tizen.colorwidget.clrlib.HTMLToRGB( clr ) ),
+					origHue = hsl[0],
+					offset = hsl[0] / 36,
+					theFloor = Math.floor( offset ),
+					newClr,
+					currentlyActive;
+
+				$.tizen.colorwidget.prototype._setElementColor.call( this, this._ui.preview,
+						$.tizen.colorwidget.clrlib.RGBToHSL( $.tizen.colorwidget.clrlib.HTMLToRGB( clr ) ), "background" );
+
+				offset = ( offset - theFloor < 0.5 )
+					? ( offset - theFloor )
+					: ( offset - ( theFloor + 1 ) );
+
+				offset *= 36;
+
+				for ( Nix = 0 ; Nix < nChoices ; Nix++ ) {
+					hsl[0] = Nix * 36 + offset;
+					hsl[0] = ( ( hsl[0] < 0) ? ( hsl[0] + 360 ) : ( ( hsl[0] > 360 ) ? ( hsl[0] - 360 ) : hsl[0] ) );
+
+					if ( hsl[0] === origHue ) {
+						activeIdx = Nix;
+					}
+
+					newClr = $.tizen.colorwidget.clrlib.RGBToHTML( $.tizen.colorwidget.clrlib.HSLToRGB( hsl ) );
+
+					$.tizen.colorwidget.prototype._setElementColor.call( this, this._ui.clrpalette.find( "[data-colorpalette-choice=" + Nix + "]" ),
+							$.tizen.colorwidget.clrlib.RGBToHSL( $.tizen.colorwidget.clrlib.HTMLToRGB( newClr ) ), "background" );
+				}
+
+				if (activeIdx != -1) {
+					currentlyActive = parseInt( this._ui.clrpalette.find( ".colorpalette-choice-active" ).attr( "data-" + ($.mobile.ns || "" ) + "colorpalette-choice" ), 10 );
+					if ( currentlyActive != activeIdx ) {
+						this._ui.clrpalette.find( "[data-colorpalette-choice=" + currentlyActive + "]" ).removeClass( "colorpalette-choice-active" );
+						this._ui.clrpalette.find( "[data-colorpalette-choice=" + activeIdx + "]" ).addClass( "colorpalette-choice-active" );
+					}
+				}
+			}
+		}
+	});
+
+	$( document ).bind( "pagecreate create", function ( e ) {
+		$( $.tizen.colorpalette.prototype.options.initSelector, e.target )
+			.not( ":jqmData(role='none'), :jqmData(role='nojs')" )
+			.colorpalette();
+	});
+
+}( jQuery ) );
+/*
+ * jQuery Mobile Widget @VERSION
+ *
+ * This software is licensed under the MIT licence (as defined by the OSI at
+ * http://www.opensource.org/licenses/mit-license.php)
+ * 
+ * ***************************************************************************
+ * Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd.
+ * Copyright (c) 2011 by Intel Corporation Ltd.
+ * 
+ * Permission is hereby granted, free of charge, to any person obtaining a
+ * copy of this software and associated documentation files (the "Software"),
+ * to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the
+ * Software is furnished to do so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+ * DEALINGS IN THE SOFTWARE.
+ * ***************************************************************************
+ *
+ * Authors: Gabriel Schulhof <ga...@intel.com>
+ */
+
+// Displays a 2D hue/saturation spectrum and a lightness slider.
+//
+// To apply, add the attribute data-role="colorpicker" to a <div>
+// element inside a page. Alternatively, call colorpicker() 
+// on an element (see below).
+//
+//Options:
+//	color: String; can be specified in html using the
+//		data-color="#ff00ff" attribute or when constructed
+//			$("#mycolorpicker").colorpicker({ color: "#ff00ff" });
+//		where the html might be :
+//			<div id="mycolorpicker"/>
+
+(function ( $, undefined ) {
+
+	$.widget( "tizen.colorpicker", $.tizen.colorwidget, {
+		options: {
+			initSelector: ":jqmData(role='colorpicker')"
+		},
+
+		_htmlProto: {
+source:
+
+$("<div><div id='colorpicker' class='ui-colorpicker'>" +
+  "    <div class='colorpicker-hs-container'>" +
+  "        <div id='colorpicker-hs-hue-gradient' class='colorpicker-hs-mask'></div>" +
+  "        <div id='colorpicker-hs-sat-gradient' class='colorpicker-hs-mask sat-gradient'></div>" +
+  "        <div id='colorpicker-hs-val-mask' class='colorpicker-hs-mask' data-event-source='hs'></div>" +
+  "        <div id='colorpicker-hs-selector' class='colorpicker-hs-selector ui-corner-all'></div>" +
+  "    </div>" +
+  "    <div class='colorpicker-l-container'>" +
+  "        <div id='colorpicker-l-gradient' class='colorpicker-l-mask l-gradient' data-event-source='l'></div>" +
+  "        <div id='colorpicker-l-selector' class='colorpicker-l-selector ui-corner-all'></div>" +
+  "    </div>" +
+  "    <div style='clear: both;'></div>" +
+  "</div>" +
+  "</div>")
+,			ui: {
+				clrpicker: "#colorpicker",
+				hs: {
+					hueGradient: "#colorpicker-hs-hue-gradient",
+					gradient:    "#colorpicker-hs-sat-gradient",
+					eventSource: "[data-event-source='hs']",
+					valMask:     "#colorpicker-hs-val-mask",
+					selector:    "#colorpicker-hs-selector"
+				},
+				l: {
+					gradient:    "#colorpicker-l-gradient",
+					eventSource: "[data-event-source='l']",
+					selector:    "#colorpicker-l-selector"
+				}
+			}
+		},
+
+		_create: function () {
+			var self = this;
+
+			this.element
+				.css( "display", "none" )
+				.after( this._ui.clrpicker );
+
+			this._ui.hs.hueGradient.huegradient();
+
+			$.extend( self, {
+				dragging: false,
+				draggingHS: false,
+				selectorDraggingOffset: {
+					x : -1,
+					y : -1
+				},
+				dragging_hsl: undefined
+			} );
+
+			$( document )
+				.bind( "vmousemove", function ( event ) {
+					if ( self.dragging ) {
+						event.stopPropagation();
+						event.preventDefault();
+					}
+				} )
+				.bind( "vmouseup", function ( event ) {
+					if ( self.dragging ) {
+						self.dragging = false;
+					}
+				} );
+
+			this._bindElements( "hs" );
+			this._bindElements( "l" );
+		},
+
+		_bindElements: function ( which ) {
+			var self = this,
+				stopDragging = function ( event ) {
+					self.dragging = false;
+					event.stopPropagation();
+					event.preventDefault();
+				};
+
+			this._ui[which].eventSource
+				.bind( "vmousedown mousedown", function ( event ) { self._handleMouseDown( event, which, false ); } )
+				.bind( "vmousemove"          , function ( event ) { self._handleMouseMove( event, which, false ); } )
+				.bind( "vmouseup"            , stopDragging );
+
+			this._ui[which].selector
+				.bind( "vmousedown mousedown", function ( event ) { self._handleMouseDown( event, which, true); } )
+				.bind( "touchmove vmousemove", function ( event ) { self._handleMouseMove( event, which, true); } )
+				.bind( "vmouseup"            , stopDragging );
+		},
+
+		_handleMouseDown: function ( event, containerStr, isSelector ) {
+			var coords = $.mobile.tizen.targetRelativeCoordsFromEvent( event ),
+				widgetStr = isSelector ? "selector" : "eventSource";
+			if ( ( coords.x >= 0 && coords.x <= this._ui[containerStr][widgetStr].width() &&
+					coords.y >= 0 && coords.y <= this._ui[containerStr][widgetStr].height() ) || isSelector ) {
+				this.dragging = true;
+				this.draggingHS = ( "hs" === containerStr );
+
+				if ( isSelector ) {
+					this.selectorDraggingOffset.x = coords.x;
+					this.selectorDraggingOffset.y = coords.y;
+				}
+
+				this._handleMouseMove( event, containerStr, isSelector, coords );
+			}
+		},
+
+		_handleMouseMove: function ( event, containerStr, isSelector, coords ) {
+			var potential_h,
+				potential_s,
+				potential_l;
+
+			if ( this.dragging &&
+					!( ( this.draggingHS && containerStr === "l" ) ||
+						( !this.draggingHS && containerStr === "hs" ) ) ) {
+				coords = ( coords || $.mobile.tizen.targetRelativeCoordsFromEvent( event ) );
+
+				if ( this.draggingHS ) {
+					potential_h = isSelector
+						? this.dragging_hsl[0] / 360 + ( coords.x - this.selectorDraggingOffset.x ) / this._ui[containerStr].eventSource.width()
+						: coords.x / this._ui[containerStr].eventSource.width();
+					potential_s = isSelector
+						? this.dragging_hsl[1] + ( coords.y - this.selectorDraggingOffset.y ) / this._ui[containerStr].eventSource.height()
+						: coords.y / this._ui[containerStr].eventSource.height();
+
+					this.dragging_hsl[0] = Math.min( 1.0, Math.max( 0.0, potential_h ) ) * 360;
+					this.dragging_hsl[1] = Math.min( 1.0, Math.max( 0.0, potential_s ) );
+				} else {
+					potential_l = isSelector
+						? this.dragging_hsl[2] + ( coords.y - this.selectorDraggingOffset.y ) / this._ui[containerStr].eventSource.height()
+						: coords.y / this._ui[containerStr].eventSource.height();
+
+					this.dragging_hsl[2] = Math.min( 1.0, Math.max( 0.0, potential_l ) );
+				}
+
+				if ( !isSelector ) {
+					this.selectorDraggingOffset.x = Math.ceil( this._ui[containerStr].selector.outerWidth()  / 2.0 );
+					this.selectorDraggingOffset.y = Math.ceil( this._ui[containerStr].selector.outerHeight() / 2.0 );
+				}
+
+				this._updateSelectors( this.dragging_hsl );
+				event.stopPropagation();
+				event.preventDefault();
+			}
+		},
+
+		_updateSelectors: function ( hsl ) {
+			var clr = $.tizen.colorwidget.prototype._setElementColor.call( this, this._ui.hs.selector, [hsl[0], 1.0 - hsl[1], hsl[2]], "background" ).clr,
+				gray = $.tizen.colorwidget.clrlib.RGBToHTML( [hsl[2], hsl[2], hsl[2]] );
+
+			this._ui.hs.valMask.css((hsl[2] < 0.5)
+				? { background : "#000000" , opacity : ( 1.0 - hsl[2] * 2.0 )   }
+				: { background : "#ffffff" , opacity : ( ( hsl[2] - 0.5 ) * 2.0 ) } );
+			this._ui.hs.selector.css( {
+				left : ( hsl[0] / 360 * this._ui.hs.eventSource.width() ),
+				top : ( hsl[1] * this._ui.hs.eventSource.height() )
+			});
+			this._ui.l.selector.css({
+				top : ( hsl[2] * this._ui.l.eventSource.height() ),
+				background : gray
+			} );
+			$.tizen.colorwidget.prototype._setColor.call( this, clr );
+		},
+
+		widget: function () { return this._ui.clrpicker; },
+
+		_setDisabled: function ( value ) {
+			$.tizen.widgetex.prototype._setDisabled.call( this, value );
+			this._ui.hs.hueGradient.huegradient( "option", "disabled", value );
+			this._ui.clrpicker[value ? "addClass" : "removeClass"]( "ui-disabled" );
+			$.tizen.colorwidget.prototype._displayDisabledState.call( this, this._ui.clrpicker );
+		},
+
+		_setColor: function ( clr ) {
+			if ( $.tizen.colorwidget.prototype._setColor.call( this, clr ) ) {
+				this.dragging_hsl = $.tizen.colorwidget.clrlib.RGBToHSL( $.tizen.colorwidget.clrlib.HTMLToRGB( this.options.color ) );
+				this.dragging_hsl[1] = 1.0 - this.dragging_hsl[1];
+				this._updateSelectors( this.dragging_hsl );
+			}
+		}
+	} );
+
+	$( document ).bind( "pagecreate create", function ( e ) {
+		$( $.tizen.colorpicker.prototype.options.initSelector, e.target )
+			.not( ":jqmData(role='none'), :jqmData(role='nojs')" )
+			.colorpicker();
+	} );
+
+}( jQuery ) );
+/*
+ * jQuery Mobile Widget @VERSION
+ *
+ * This software is licensed under the MIT licence ( as defined by the OSI at
+ * http://www.opensource.org/licenses/mit-license.php )
+ *
+ * ***************************************************************************
+ * Copyright ( c ) 2000 - 2011 Samsung Electronics Co., Ltd.
+ * Copyright ( c ) 2011 by Intel Corporation Ltd.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a
+ * copy of this software and associated documentation files ( the "Software" ),
+ * to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the
+ * Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+ * DEALINGS IN THE SOFTWARE.
+ * ***************************************************************************
+ *
+ * Authors: Gabriel Schulhof <ga...@intel.com>
+ */
+
+// Displays a button which, when pressed, opens a popupwindow
+// containing hsvpicker.
+//
+// To apply, add the attribute data-role="colorpickerbutton" to a <div>
+// element inside a page. Alternatively, call colorpickerbutton() on an
+// element.
+//
+// Options:
+//
+//   color: String; color displayed on the button and the base color
+//      of the hsvpicker ( see hsvpicker ).
+//      initial color can be specified in html using the
+//      data-color="#ff00ff" attribute or when constructed in
+//      javascript, eg :
+//        $( "#mycolorpickerbutton" ).colorpickerbutton( { color: "#ff00ff" } );
+//      where the html might be :
+//        <div id="colorpickerbutton"></div>
+//      The color can be changed post-construction like this :
+//        $( "#mycolorpickerbutton" ).colorpickerbutton( "option", "color", "#ABCDEF" );
+//      Default: "#1a8039"
+//
+//   buttonMarkup: String; markup to use for the close button on the popupwindow, eg :
+//          $( "#mycolorpickerbutton" ).colorpickerbutton( "option","buttonMarkup",
+//           "<a href='#' data-role='button'>ignored</a>" );
+//
+//   closeText: String; the text to display on the close button on the popupwindow.
+//        The text set in the buttonMarkup will be ignored and this used instead.
+//
+// Events:
+//
+//   colorchanged: emitted when the color has been changed and the popupwindow is closed.
+
+( function ( $, undefined ) {
+
+	$.widget( "tizen.colorpickerbutton", $.tizen.colorwidget, {
+		options: {
+			buttonMarkup: {
+				theme: null,
+				inline: true,
+				corners: true,
+				shadow: true
+			},
+			hideInput: true,
+			closeText: "Close",
+			initSelector: "input[type='color'], :jqmData(type='color'), :jqmData(role='colorpickerbutton')"
+		},
+
+		_htmlProto: {
+source:
+
+$("<div><div id='colorpickerbutton'>" +
+  "    <a id='colorpickerbutton-button' href='#' data-role='button' aria-haspopup='true'>" +
+  "        <span id='colorpickerbutton-button-contents'>&#x2587;&#x2587;&#x2587;</span>" +
+  "    </a>" +
+  "    <div id='colorpickerbutton-popup-container' class='colorpickerbutton-popup-container-style'>" +
+  "        <div id='colorpickerbutton-popup-hsvpicker' data-role='hsvpicker'></div>" +
+  "        <a id='colorpickerbutton-popup-close-button' href='#' data-role='button'>" +
+  "            <span id='colorpickerbutton-popup-close-button-text'></span>" +
+  "        </a>" +
+  "    </div>" +
+  "</div>" +
+  "</div>")
+,			ui: {
+				button: "#colorpickerbutton-button",
+				buttonContents: "#colorpickerbutton-button-contents",
+				popup: "#colorpickerbutton-popup-container",
+				hsvpicker: "#colorpickerbutton-popup-hsvpicker",
+				closeButton: "#colorpickerbutton-popup-close-button",
+				closeButtonText: "#colorpickerbutton-popup-close-button-text"
+			}
+		},
+
+		_create: function () {
+			var self = this;
+
+			this.element
+				.css( "display", "none" )
+				.after( this._ui.button );
+
+			/* Tear apart the proto */
+			this._ui.popup.insertBefore( this.element ).popupwindow();
+			this._ui.hsvpicker.hsvpicker();
+
+			$.tizen.popupwindow.bindPopupToButton( this._ui.button, this._ui.popup );
+
+			this._ui.closeButton.bind( "vclick", function ( event ) {
+				self._setColor( self._ui.hsvpicker.hsvpicker( "option", "color" ) );
+				self.close();
+			} );
+
+			this.element.bind( "change keyup blur", function () {
+				self._setColor( self.element.val() );
+			} );
+		},
+
+		_setHideInput: function ( value ) {
+			this.element[value ? "addClass" : "removeClass"]( "ui-colorpickerbutton-input-hidden" );
+			this.element[value ? "removeClass" : "addClass"]( "ui-colorpickerbutton-input" );
+			this.element.attr( "data-" + ( $.mobile.ns || "" ) + "hide-input", value );
+		},
+
+		_setColor: function ( clr ) {
+			if ( $.tizen.colorwidget.prototype._setColor.call( this, clr ) ) {
+				var clrlib = $.tizen.colorwidget.clrlib;
+
+				this._ui.hsvpicker.hsvpicker( "option", "color", this.options.color );
+				$.tizen.colorwidget.prototype._setElementColor.call( this, this._ui.buttonContents,
+						clrlib.RGBToHSL( clrlib.HTMLToRGB( this.options.color ) ), "color" );
+			}
+		},
+
+		_setButtonMarkup: function ( value ) {
+			this._ui.button.buttonMarkup( value );
+			this.options.buttonMarkup = value;
+			value.inline = false;
+			this._ui.closeButton.buttonMarkup( value );
+		},
+
+		_setCloseText: function ( value ) {
+			this._ui.closeButtonText.text( value );
+			this.options.closeText = value;
+			this.element.attr( "data-" + ( $.mobile.ns || "" ) + "close-text", value );
+		},
+
+		_setDisabled: function ( value ) {
+			$.tizen.widgetex.prototype._setDisabled.call( this, value );
+			this._ui.popup.popupwindow( "option", "disabled", value );
+			this._ui.button[value ? "addClass" : "removeClass"]( "ui-disabled" );
+			$.tizen.colorwidget.prototype._displayDisabledState.call( this, this._ui.button );
+		},
+
+		open: function () {
+			this._ui.popup.popupwindow( "open",
+					this._ui.button.offset().left + this._ui.button.outerWidth() / 2,
+					this._ui.button.offset().top + this._ui.button.outerHeight() / 2 );
+		},
+
+		_focusButton : function () {
+			var self = this;
+			setTimeout( function () {
+				self._ui.button.focus();
+			}, 40 );
+		},
+
+		close: function () {
+			this._focusButton();
+			this._ui.popup.popupwindow( "close" );
+		}
+	} );
+
+//auto self-init widgets
+	$( document ).bind( "pagecreate create", function ( e ) {
+		$( $.tizen.colorpickerbutton.prototype.options.initSelector, e.target )
+			.not( ":jqmData(role='none'), :jqmData(role='nojs')" )
+			.colorpickerbutton();
+	} );
+
+}( jQuery ) );
+/*
+ * jQuery Mobile Widget @VERSION
+ *
+ * This software is licensed under the MIT licence (as defined by the OSI at
+ * http://www.opensource.org/licenses/mit-license.php)
+ * 
+ * ***************************************************************************
+ * Copyright (C) 2011 by Intel Corporation Ltd.
+ * 
+ * Permission is hereby granted, free of charge, to any person obtaining a
+ * copy of this software and associated documentation files (the "Software"),
+ * to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the
+ * Software is furnished to do so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+ * DEALINGS IN THE SOFTWARE.
+ * ***************************************************************************
+ *
+ * Authors: Gabriel Schulhof <ga...@intel.com>
+ */
+
+// Displays the color in text of the form '#RRGGBB' where
+// RR, GG, and BB are in hexadecimal.
+//
+// Apply a colortitle by adding the attribute data-role="colortitle"
+// to a <div> element inside a page. Alternatively, call colortitle() 
+// on an element (see below).
+//
+// Options:
+//
+//     color: String; the initial color can be specified in html using
+//            the data-color="#ff00ff" attribute or when constructed
+//            in javascipt eg
+//                $("#mycolortitle").colortitle({ color: "#ff00ff" });
+//            where the html might be :
+//                <div id="mycolortitle"></div>
+//            The color can be changed post-construction :
+//                $("#mycolortitle").colortitle("option", "color", "#ABCDEF");
+//            Default: "#1a8039".
+
+(function ( $, undefined ) {
+
+	$.widget( "tizen.colortitle", $.tizen.colorwidget, {
+		options: {
+			initSelector: ":jqmData(role='colortitle')"
+		},
+
+		_htmlProto: {
+source:
+
+$("<div><div id='colortitle' class='ui-colortitle jquery-mobile-ui-widget'>" +
+  "    <h1 id='colortitle-string'></h1>" +
+  "</div>" +
+  "</div>")
+,			ui: {
+				clrtitle: "#colortitle",
+				header:   "#colortitle-string"
+			}
+		},
+
+		_create: function () {
+			this.element
+				.css( "display", "none" )
+				.after( this._ui.clrtitle );
+
+		},
+
+		widget: function () { return this._ui.clrtitle; },
+
+		_setDisabled: function ( value ) {
+			$.tizen.widgetex.prototype._setDisabled.call( this, value );
+			this._ui.clrtitle[value ? "addClass" : "removeClass"]( "ui-disabled" );
+		},
+
+		_setColor: function ( clr ) {
+			if ( $.tizen.colorwidget.prototype._setColor.call( this, clr ) ) {
+				this._ui.header.text( this.options.color );
+				$( this._ui.header ).parent().css( "color", this.options.color );
+			}
+		}
+	} );
+
+	$( document ).bind( "pagecreate create", function ( e ) {
+		$( $.tizen.colortitle.prototype.options.initSelector, e.target )
+			.not( ":jqmData(role='none'), :jqmData(role='nojs')" )
+			.colortitle();
+	} );
+
+}( jQuery ) );
+/*
+ *
+ * This software is licensed under the MIT licence (as defined by the OSI at
+ * http://www.opensource.org/licenses/mit-license.php)
+ * 
+ * ***************************************************************************
+ * Copyright (C) 2011 by Intel Corporation Ltd.
+ * 
+ * Permission is hereby granted, free of charge, to any person obtaining a
+ * copy of this software and associated documentation files (the "Software"),
+ * to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the
+ * Software is furnished to do so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+ * DEALINGS IN THE SOFTWARE.
+ * ***************************************************************************
+ */
+
+// Ensure that the given namespace is defined. If not, define it to be an empty object.
+// This is kinda like the mkdir -p command.
+
+function ensureNS(ns) {
+    var nsAr = ns.split("."),
+    nsSoFar = "";
+
+    for (var Nix in nsAr) {
+        nsSoFar = nsSoFar + (Nix > 0 ? "." : "") + nsAr[Nix];
+        eval (nsSoFar + " = " + nsSoFar + " || {};");
+    }
+}
+/*
+ * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
+ *
+ * Uses the built in easing capabilities added In jQuery 1.1
+ * to offer multiple easing options
+ *
+ * TERMS OF USE - jQuery Easing
+ * 
+ * Open source under the BSD License. 
+ * 
+ * Copyright © 2008 George McGinley Smith
+ * All rights reserved.
+ * 
+ * Redistribution and use in source and binary forms, with or without modification, 
+ * are permitted provided that the following conditions are met:
+ * 
+ * Redistributions of source code must retain the above copyright notice, this list of 
+ * conditions and the following disclaimer.
+ * Redistributions in binary form must reproduce the above copyright notice, this list 
+ * of conditions and the following disclaimer in the documentation and/or other materials 
+ * provided with the distribution.
+ * 
+ * Neither the name of the author nor the names of contributors may be used to endorse 
+ * or promote products derived from this software without specific prior written permission.
+ * 
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY 
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
+ * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
+ *  COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ *  EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
+ *  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED 
+ * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
+ *  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED 
+ * OF THE POSSIBILITY OF SUCH DAMAGE. 
+ *
+*/
+
+// t: current time, b: begInnIng value, c: change In value, d: duration
+jQuery.easing['jswing'] = jQuery.easing['swing'];
+
+jQuery.extend( jQuery.easing,
+{
+	def: 'easeOutQuad',
+	swing: function (x, t, b, c, d) {
+		//alert(jQuery.easing.default);
+		return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
+	},
+	easeInQuad: function (x, t, b, c, d) {
+		return c*(t/=d)*t + b;
+	},
+	easeOutQuad: function (x, t, b, c, d) {
+		return -c *(t/=d)*(t-2) + b;
+	},
+	easeInOutQuad: function (x, t, b, c, d) {
+		if ((t/=d/2) < 1) return c/2*t*t + b;
+		return -c/2 * ((--t)*(t-2) - 1) + b;
+	},
+	easeInCubic: function (x, t, b, c, d) {
+		return c*(t/=d)*t*t + b;
+	},
+	easeOutCubic: function (x, t, b, c, d) {
+		return c*((t=t/d-1)*t*t + 1) + b;
+	},
+	easeInOutCubic: function (x, t, b, c, d) {
+		if ((t/=d/2) < 1) return c/2*t*t*t + b;
+		return c/2*((t-=2)*t*t + 2) + b;
+	},
+	easeInQuart: function (x, t, b, c, d) {
+		return c*(t/=d)*t*t*t + b;
+	},
+	easeOutQuart: function (x, t, b, c, d) {
+		return -c * ((t=t/d-1)*t*t*t - 1) + b;
+	},
+	easeInOutQuart: function (x, t, b, c, d) {
+		if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
+		return -c/2 * ((t-=2)*t*t*t - 2) + b;
+	},
+	easeInQuint: function (x, t, b, c, d) {
+		return c*(t/=d)*t*t*t*t + b;
+	},
+	easeOutQuint: function (x, t, b, c, d) {
+		return c*((t=t/d-1)*t*t*t*t + 1) + b;
+	},
+	easeInOutQuint: function (x, t, b, c, d) {
+		if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
+		return c/2*((t-=2)*t*t*t*t + 2) + b;
+	},
+	easeInSine: function (x, t, b, c, d) {
+		return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
+	},
+	easeOutSine: function (x, t, b, c, d) {
+		return c * Math.sin(t/d * (Math.PI/2)) + b;
+	},
+	easeInOutSine: function (x, t, b, c, d) {
+		return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
+	},
+	easeInExpo: function (x, t, b, c, d) {
+		return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
+	},
+	easeOutExpo: function (x, t, b, c, d) {
+		return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
+	},
+	easeInOutExpo: function (x, t, b, c, d) {
+		if (t==0) return b;
+		if (t==d) return b+c;
+		if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
+		return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
+	},
+	easeInCirc: function (x, t, b, c, d) {
+		return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
+	},
+	easeOutCirc: function (x, t, b, c, d) {
+		return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
+	},
+	easeInOutCirc: function (x, t, b, c, d) {
+		if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
+		return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
+	},
+	easeInElastic: function (x, t, b, c, d) {
+		var s=1.70158;var p=0;var a=c;
+		if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
+		if (a < Math.abs(c)) { a=c; var s=p/4; }
+		else var s = p/(2*Math.PI) * Math.asin (c/a);
+		return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
+	},
+	easeOutElastic: function (x, t, b, c, d) {
+		var s=1.70158;var p=0;var a=c;
+		if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
+		if (a < Math.abs(c)) { a=c; var s=p/4; }
+		else var s = p/(2*Math.PI) * Math.asin (c/a);
+		return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
+	},
+	easeInOutElastic: function (x, t, b, c, d) {
+		var s=1.70158;var p=0;var a=c;
+		if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
+		if (a < Math.abs(c)) { a=c; var s=p/4; }
+		else var s = p/(2*Math.PI) * Math.asin (c/a);
+		if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
+		return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
+	},
+	easeInBack: function (x, t, b, c, d, s) {
+		if (s == undefined) s = 1.70158;
+		return c*(t/=d)*t*((s+1)*t - s) + b;
+	},
+	easeOutBack: function (x, t, b, c, d, s) {
+		if (s == undefined) s = 1.70158;
+		return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
+	},
+	easeInOutBack: function (x, t, b, c, d, s) {
+		

<TRUNCATED>