From: Youmin Ha <youmin.ha@samsung.com>
Date: Fri, 14 Sep 2012 02:09:19 +0000 (+0900)
Subject: Export 0.1.48
X-Git-Tag: accepted/tizen_2.1/20130425.023924~7^2~353
X-Git-Url: http://review.tizen.org/git/?a=commitdiff_plain;h=9375f85af5ccf1cf626236d6dbda3bf31bfe0ceb;p=platform%2Fframework%2Fweb%2Fweb-ui-fw.git

Export 0.1.48
---

diff --git a/demos/tizen-winsets/main.js b/demos/tizen-winsets/main.js
index 5f42b6f..92843b3 100755
--- a/demos/tizen-winsets/main.js
+++ b/demos/tizen-winsets/main.js
@@ -148,7 +148,7 @@ $( document ).bind("pagecreate", function () {
 	});
 
 	/*Expandable list : Dummy DB load*/
-	$("#genlist_extendable_page").live("pagecreate", function () {
+	$("#genlist_extendable_page").live("pagecreate", function ( el ) {
 		/*?_=ts code for no cache mechanism*/
 		$.getScript( "./virtuallist-db-demo.js", function ( data, textStatus ) {
 			$("ul").filter( function () {
@@ -157,6 +157,7 @@ $( document ).bind("pagecreate", function () {
 
 			$("#genlist-extendable-page").die();
 			$("ul.ui-extendable-list-container").extendablelist("create");
+			// TODO: 'create' is called twice!!
 		});
 	});
 
diff --git a/packaging/web-ui-fw.spec b/packaging/web-ui-fw.spec
index 5e73455..07f0d95 100644
--- a/packaging/web-ui-fw.spec
+++ b/packaging/web-ui-fw.spec
@@ -1,5 +1,5 @@
 Name:       web-ui-fw
-Version:    0.1.47
+Version:    0.1.48
 Release:    0
 Summary:    Tizen Web UI Framework Library
 Group:      Development/Other
@@ -88,6 +88,18 @@ Summary:    Tizen Web UI Framework Demo Application: tizen winset demo
 ###############################
 %changelog
 
+* Thu Sep 13 2012 Youmin Ha <youmin.ha@samsung.com> 0.1.48
+- FIX:
+	- Add missing icon: controlbar
+	- scrollview: tune scrolling animatio ninterval
+	- datetimepicker: digit/triangle position
+	- datetimepicker: fix day overflow issue
+- Spec changes:
+	- scrollview: show scrollbar when page is showed
+	- scrollview: disable outer scroll
+	- extendablelist: change api with legacy support
+	- add ui-text-ellipsis class
+
 * Mon Sep 10 2012 Minkyu Kang <mk7.kang@samsung.com> 0.1.47
 - FIX:
 	- scrollveiw: fix height of view
diff --git a/src/themes/tizen/common/jquery.mobile.core.less b/src/themes/tizen/common/jquery.mobile.core.less
index eeeaac0..29e6c71 100755
--- a/src/themes/tizen/common/jquery.mobile.core.less
+++ b/src/themes/tizen/common/jquery.mobile.core.less
@@ -43,7 +43,7 @@
 .ui-page.ui-mobile-touch-overflow,
 .ui-page.ui-mobile-touch-overflow * {
 	/* some level of transform keeps elements from blinking out of visibility on iOS */
-	-webkit-transform: rotateY(0);
+	.LESStransform(rotateY(0));
 }
 .ui-page.ui-mobile-pre-transition {
 	display: block;
@@ -132,8 +132,3 @@
 /* non-js content hiding */
 .ui-nojs { position: absolute; left: -9999px; }
 
-/* text-ellipsis: width must not be 'auto' */
-.ui-text-ellipsis {
-	.LESStext-ellipsis();
-}
-
diff --git a/src/themes/tizen/common/jquery.mobile.forms.textinput.less b/src/themes/tizen/common/jquery.mobile.forms.textinput.less
index 11c4c97..026e80b 100755
--- a/src/themes/tizen/common/jquery.mobile.forms.textinput.less
+++ b/src/themes/tizen/common/jquery.mobile.forms.textinput.less
@@ -16,12 +16,16 @@ input.ui-input-text, textarea.ui-input-text {
 	display: block;
 	width: 95%;
 }
-input.ui-input-text { -webkit-appearance: none; }
+input.ui-input-text {
+	appearance: none;
+	-webkit-appearance: none; 
+}
 textarea.ui-input-text {
 	height: 50*@unit_base;
 	-webkit-transition: height 200ms linear;
 	-moz-transition: height 200ms linear;
 	-o-transition: height 200ms linear;
+	-ms-transition: height 200ms linear;
 	transition: height 200ms linear;
 }
 
@@ -112,6 +116,7 @@ textarea.ui-input-text {
 		-webkit-transition: width 400ms linear;
 		-moz-transition: width 400ms linear;
 		-o-transition: width 400ms linear;
+		-ms-transition: width 400ms linear;
 		transition: width 400ms linear;
 	}
 	.ui-input-search-wide {
@@ -119,6 +124,7 @@ textarea.ui-input-text {
 		-webkit-transition: width 400ms linear;
 		-moz-transition: width 400ms linear;
 		-o-transition: width 400ms linear;
+		-ms-transition: width 400ms linear;
 		transition: width 400ms linear;
 	}
 	.ui-btn-icon-cancel {
@@ -148,6 +154,7 @@ textarea.ui-input-text {
 		-webkit-transition: all 400ms linear;
 		-moz-transition: all 400ms linear;
 		-o-transition: all 400ms linear;
+		-ms-transition: all 400ms linear;
 		transition: all 400ms linear;
 	}
 	.ui-btn-cancel-hide {
diff --git a/src/themes/tizen/common/jquery.mobile.listview.less b/src/themes/tizen/common/jquery.mobile.listview.less
index 6cf98c0..cd9b28d 100755
--- a/src/themes/tizen/common/jquery.mobile.listview.less
+++ b/src/themes/tizen/common/jquery.mobile.listview.less
@@ -669,6 +669,7 @@ li:not(.ui-li-has-multiline) .ui-li-text-sub {
 		-webkit-transition: all 0.2s ease;
 		-moz-transition: all 0.2s ease;
 		-o-transition: all 0.2s ease;
+		-ms-transition: all 0.2s ease;
 		transition: all 0.2s ease;
 	}
 }
diff --git a/src/themes/tizen/common/jquery.mobile.segmentctrl.less b/src/themes/tizen/common/jquery.mobile.segmentctrl.less
index b2516a8..dfebc94 100755
--- a/src/themes/tizen/common/jquery.mobile.segmentctrl.less
+++ b/src/themes/tizen/common/jquery.mobile.segmentctrl.less
@@ -2,19 +2,23 @@
 
 .ui-controlgroup .ui-radio-on,
 .ui-controlgroup .ui-radio-off.ui-btn-hover-s.ui-btn-down-s  {
-		background : @color_segmentcontrol_btn_normal;   
+		.LESSSegmentControlBtnBackground;
 }
 .ui-controlgroup .ui-radio-off {
-		background: @color_segmentcontrol_btn_press;
+		.LESSSegmentControlBtnPressBackground;
 }
 
 .ui-controlgroup .ui-btn-inner .ui-corner-left .ui-controlgroup-first {
+-o-border-radius: .3em;
+-ms-border-radius: .3em;
 -moz-border-radius: .3em ;
 -webkit-border-radius: .3em ;
 border-radius: .3em ;
 }
 
 .ui-controlgroup .ui-btn-inner .ui-corner-right .ui-controlgroup-last {
+-o-border-radius: .3em;
+-ms-border-radius: .3em;
 -moz-border-radius: .3em ;
 -webkit-border-radius: .3em ;
 border-radius: .3em ;
diff --git a/src/themes/tizen/common/jquery.mobile.theme.less b/src/themes/tizen/common/jquery.mobile.theme.less
index d01bda5..ea8cb4f 100755
--- a/src/themes/tizen/common/jquery.mobile.theme.less
+++ b/src/themes/tizen/common/jquery.mobile.theme.less
@@ -16,7 +16,7 @@
 ***************************************************************************/
 .ui-bar-s {
 	border: none;
-	background: @color_bar_bg;
+	.LESSHeaderFooterBackground;
 	color: @color_bar_title_text;
 	font-family: Helvetica, Arial, sans-serif;
 	font-weight: bold;
@@ -183,7 +183,7 @@
 .ui-header.ui-bar-s{
 	position : fixed;
 	top : 0px;
-	background : @color_bar_title_bg;
+	.LESSColorBarTitleBackground;
 
 	min-height : 100 * @unit_base;
 
@@ -235,8 +235,7 @@
 		border-left-color : @color_bar_title_btn_border;
 
 		font-weight : bold;
-		-webkit-border-radius : 0px;
-
+		.LESSborder-radius-all(0px);
 		span.ui-btn-inner {
 			padding-top : 13 * @unit_base;
 			padding-bottom : 13 * @unit_base;
@@ -475,7 +474,7 @@
 	/* listview divider */
 	/* NOTE: this divider has no swatch tag! */
 	li.ui-li-divider {
-		background: @color_list_divider_bg;
+		.LESSlistDivider_Background;
 		color:		@color_list_divider_text;
 	}
 	/* subitem */
@@ -792,7 +791,14 @@ a.ui-link-inherit {
 }
 
 .ui-btn-ani-endposition {
+	-ms-transition-property : left;
+	-o-transition-property : left;
+	-moz-transition-property : left;
 	-webkit-transition-property : left;
+
+	-ms-transition: all 0.3s ease-in-out;
+	-o-transition: all 0.3s ease-in-out;
+	-moz-transition: all 0.3s ease-in-out;
 	-webkit-transition: all 0.3s ease-in-out;
 }
 
@@ -800,7 +806,14 @@ a.ui-link-inherit {
 }
 
 .ui-btn-ani-verticalendposition {
+	-ms-transition-property : top;
+	-o-transition-property : top;
+	-moz-transition-property : top;
 	-webkit-transition-property : top;
+
+	-ms-transition: all 0.3s ease-in-out;
+	-o-transition: all 0.3s ease-in-out;
+	-moz-transition: all 0.3s ease-in-out;
 	-webkit-transition: all 0.3s ease-in-out;
 }
 /*************************************************************************** 
@@ -966,9 +979,7 @@ a.ui-link-inherit {
 
 /* checks,radios */
 .ui-checkbox .ui-icon {
-	-moz-border-radius: 3px;
-	-webkit-border-radius: 3px;
-	border-radius: 3px;
+	.LESSborder-radius-all(3px);
 }
 //.ui-icon-checkbox-off,
 .ui-icon-radio-off {
@@ -1016,15 +1027,10 @@ a.ui-link-inherit {
 	.ui-icon-ctrlbar-add_tag, .ui-icon-ctrlbar-Chat, .ui-icon-ctrlbar-view_file_history 
 	 {
 		background-color : transparent;
-
-		-moz-border-radius: 0px;
-		-webkit-border-radius: 0px;
-		border-radius: 0px;
+		.LESSborder-radius-all(0px);
 		background-size:  100% 100%;
-		
-		-moz-box-shadow: 0px 0px 0 				rgba(255,255,255,.4);
-		-webkit-box-shadow: 0px 0px 0 			rgba(255,255,255,.4);
-		box-shadow: 0px 0px 0 					rgba(255,255,255,.4);			
+
+		.LESSbox-shadow(0px,0px,0, rgba(255,255,255,.4));
 	}
 
 	.ui-icon-ctrlbar-account_sign-up {
@@ -1505,6 +1511,8 @@ a.ui-link-inherit {
 -----------------------------------------------------------------------------------------------------------*/
 
 .ui-mobile-nosupport-boxshadow * {
+	-ms-box-shadow: none !important;
+	-o-box-shadow: none !important;
 	-moz-box-shadow: none !important;
 	-webkit-box-shadow: none !important;
 	box-shadow: none !important;
diff --git a/src/themes/tizen/common/jquery.mobile.tizen.colorpalette.less b/src/themes/tizen/common/jquery.mobile.tizen.colorpalette.less
index 76ea2f8..6ff876d 100755
--- a/src/themes/tizen/common/jquery.mobile.tizen.colorpalette.less
+++ b/src/themes/tizen/common/jquery.mobile.tizen.colorpalette.less
@@ -73,9 +73,7 @@
       border-width: @colorpalette-item-border-width;
       border-style: solid;
       border-color: @colorpalette-item-border-color;
-	-moz-border-radius: 0.2em;
-	-webkit-border-radius: 0.2em;
-	bordert-radius: 0.2em;
+	.LESSborder-radius-all(0.2em);	
     }
 
     .colorpalette-choice-active {
diff --git a/src/themes/tizen/common/jquery.mobile.tizen.ctxpopup.less b/src/themes/tizen/common/jquery.mobile.tizen.ctxpopup.less
index c8c69a1..70176ad 100755
--- a/src/themes/tizen/common/jquery.mobile.tizen.ctxpopup.less
+++ b/src/themes/tizen/common/jquery.mobile.tizen.ctxpopup.less
@@ -31,10 +31,12 @@
 		.ui-popupwindow-padding {
 			background: @color_ctxpopup_background;
 			border: none;
+			-ms-box-shadow: 0 * @unit_base 0 * @unit_base 12 * @unit_base rgba( 0, 0, 0, .6 );
+			-o-box-shadow: 0 * @unit_base 0 * @unit_base 12 * @unit_base rgba( 0, 0, 0, .6 );
+			-moz-box-shadow: 0 * @unit_base 0 * @unit_base 12 * @unit_base rgba( 0, 0, 0, .6 );
 			-webkit-box-shadow: 0 * @unit_base 0 * @unit_base 12 * @unit_base rgba( 0, 0, 0, .6 );
 			box-shadow: 0 * @unit_base 0 * @unit_base 12 * @unit_base rgba( 0, 0, 0, .6 );
-			-webkit-border-radius: @border_radius;
-			border-radius: @border_radius;
+			.LESSborder-radius-all(@border_radius);
 		}
 
 	}
diff --git a/src/themes/tizen/common/jquery.mobile.tizen.datetimepicker.less b/src/themes/tizen/common/jquery.mobile.tizen.datetimepicker.less
index 85cd031..b90ecd8 100755
--- a/src/themes/tizen/common/jquery.mobile.tizen.datetimepicker.less
+++ b/src/themes/tizen/common/jquery.mobile.tizen.datetimepicker.less
@@ -86,6 +86,9 @@
 	.ui-popupwindow-padding {
 		background: @color_timepicker_selector_color !important;
 		border-radius: 0 !important;
+		-ms-border-radius: 0 !important;
+		-o-border-radius: 0 !important;
+		-moz-border-radius: 0 !important;
 		-webkit-border-radius: 0 !important;
 		box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.6) !important;
 		border-width: 0 !important;
diff --git a/src/themes/tizen/common/jquery.mobile.tizen.dayselector.less b/src/themes/tizen/common/jquery.mobile.tizen.dayselector.less
index 9d38574..01d776c 100755
--- a/src/themes/tizen/common/jquery.mobile.tizen.dayselector.less
+++ b/src/themes/tizen/common/jquery.mobile.tizen.dayselector.less
@@ -20,25 +20,25 @@
 		}
 	}
  	.ui-checkbox-off {
-		background : @color_dayselector_Btn_normal;
+		.LESSDayselectorButtonNormal;
 		.ui-btn-text {
 			color : @color_dayselector_Btn_Mon_to_Fri;
 		}	
 	}
 	
 	.ui-checkbox-off.ui-btn-down-s.ui-btn-hover-s {
-		background : @color_dayselector_Btn_press;
+		.LESSDayaselectorButtonPress;
 	}
 	
 	.ui-checkbox-on {
-		background : @color_dayselector_Btn_press;
+		.LESSDayaselectorButtonPress;
 		.ui-btn-text {
 			color : @color_dayselector_Btn_Mon_to_Fri;	
 	   	}	
 	}
 
 	.ui-checkbox-on.ui-btn-down-s.ui-btn-hover-s {
-		background : @color_dayselector_Btn_normal;
+		.LESSDayselectorButtonNormal;
 	}
 	.ui-dayselector-label-6 {
 		.ui-btn-text {	
diff --git a/src/themes/tizen/common/jquery.mobile.tizen.less b/src/themes/tizen/common/jquery.mobile.tizen.less
index b4018fb..11d203e 100644
--- a/src/themes/tizen/common/jquery.mobile.tizen.less
+++ b/src/themes/tizen/common/jquery.mobile.tizen.less
@@ -37,7 +37,18 @@
 	background-image:      -o-linear-gradient(@from, @startcolor, @endcolor);
 	background-image:         linear-gradient(@from, @startcolor, @endcolor);
 }
+
+.LESSbackground-with-gradient(@from: top, @startcolor: #3c3c3c, @endcolor: #5c5c5c) {
+	background: @startcolor;
+	background: -webkit-linear-gradient(@from, @startcolor 0%, @endcolor 100%);
+	background: -moz-linear-gradient(@from, @startcolor 0%, @endcolor 100%);
+	background: -ms-linear-gradient(@from, @startcolor 0%, @endcolor 100%);
+	background: -o-linear-gradient(@from, @startcolor 0%, @endcolor 100%);
+	background: linear-gradient(@from, @startcolor 0%, @endcolor 100%);
+}
+
 .LESSbackground-size(@width, @height) {
+	-ms-background-size: @width @height;
 	-moz-background-size: @width @height;
 	-o-background-size: @width @height;
 	-webkit-background-size: @width @height;
@@ -46,10 +57,11 @@
 
 // Mixin : border ***************************
 .LESSborder-image(@url:url, @width:width, @height:height, @repeat:repeat) {
-    -moz-border-image:  url(@url) @width @height @repeat;
-    -webkit-border-image: url(@url) @width @height @repeat;
-    -o-border-image: url(@url) @width @height @repeat;
-    border-image: url(@url) @width @height @repeat;
+	-moz-border-image:  url(@url) @width @height @repeat;
+	-webkit-border-image: url(@url) @width @height @repeat;
+	-o-border-image: url(@url) @width @height @repeat;
+	-ms-border-image: url(@url) @width @height @repeat;
+	border-image: url(@url) @width @height @repeat;
 }
 .LESSborder-radius-topleft(@radius) {
 	-moz-border-radius-topleft: 		@radius; 
@@ -72,13 +84,17 @@
 	border-bottom-right-radius: 			@radius;
 }
 .LESSborder-radius-all(@radius) {
-	-moz-border-radius: 		@radius; 
+	-o-border-radius:	@radius;
+	-ms-border-radius:	@radius;
+	-moz-border-radius: 	@radius; 
 	-webkit-border-radius: 	@radius;
-	bordert-radius: 			@radius;
+	border-radius: 		@radius;
 }
 
 // Mixin : box ***************************
 .LESSbox-shadow(@hshadow, @vshadow, @blur, @color) {
+	-o-box-shadow: @hshadow @vshadow @blur @color;
+	-ms-box-shadow: @hshadow @vshadow @blur @color;
 	-moz-box-shadow: @hshadow @vshadow @blur @color;
 	-webkit-box-shadow: @hshadow @vshadow @blur @color;
 	box-shadow: @hshadow @vshadow @blur @color;
@@ -90,21 +106,27 @@
 }
 //position: vertical, horizental
 .LESSbox-orient(@position) {
+	-ms-box-orient: @position;
 	-moz-box-orient: @position;
+	-o-box-orient: @position;
 	-webkit-box-orient: @position;
 	box-orient: @position;
 }
 
 //position: start, center, end
 .LESSbox-pack(@position) {
+	-ms-box-pack: @position;
 	-moz-box-pack: @position;
+	-o-box-pack: @position;
 	-webkit-box-pack: @position;
 	box-pack: @position;
 }
 
 //position: start, center, end
 .LESSbox-align(@position) {
+	-ms-box-align: @position;
 	-moz-box-align: @position;
+	-o-box-align: @position;
 	-webkit-box-align: @position;
 	box-align: @position;
 }	
@@ -150,6 +172,5 @@
 	white-space: nowrap;
 	text-overflow: ellipsis;
 	-o-text-overflow: ellipsis;
-	overflow-x: hidden;
+	overflow-x: hidden !important;
 }
-
diff --git a/src/themes/tizen/common/jquery.mobile.tizen.misc.less b/src/themes/tizen/common/jquery.mobile.tizen.misc.less
new file mode 100644
index 0000000..68697bd
--- /dev/null
+++ b/src/themes/tizen/common/jquery.mobile.tizen.misc.less
@@ -0,0 +1,17 @@
+/*
+ * Misc. classes for Tizen web ui framework
+ *
+ * All classes in this file has highest priority.
+ */
+
+@import "config.less";
+
+/* text-ellipsis
+ * elements using this class needs following constraints;
+ *  - width must not be 'auto'
+ *  - display must be 'block' or 'inline-block'
+ */
+.ui-text-ellipsis {
+	.LESStext-ellipsis();
+}
+
diff --git a/src/themes/tizen/common/jquery.mobile.tizen.multibuttonentry.less b/src/themes/tizen/common/jquery.mobile.tizen.multibuttonentry.less
index e737ffa..ef339b7 100755
--- a/src/themes/tizen/common/jquery.mobile.tizen.multibuttonentry.less
+++ b/src/themes/tizen/common/jquery.mobile.tizen.multibuttonentry.less
@@ -45,12 +45,12 @@
 	padding : .2em .5em;
 	font-size : 1em;
 	text-shadow : 0 .1em .1em rgba(0,0,0,.3);
+	-ms-border-radius : .5em;
+	-o-border-radius : .5em;
 	-webkit-border-radius : .5em;
 	-moz-border-radius : .5em;
 	border-radius : 1.5em;
-	-webkit-box-shadow : 0 .1em .1em rgba(0,0,0,.2);
-	-moz-box-shadow : 0 .1em .1em rgba(0,0,0,.2);
-	box-shadow : 0 .1em .1em rgba(0,0,0,.2);
+	.LESSbox-shadow(0, .1em, .1em, rgba(0,0,0,.2));
 	color : @color_multibuttonentry_block_text;
 }
 
diff --git a/src/themes/tizen/common/jquery.mobile.tizen.multimediaview.less b/src/themes/tizen/common/jquery.mobile.tizen.multimediaview.less
index 4fd7ed5..bab8dfb 100755
--- a/src/themes/tizen/common/jquery.mobile.tizen.multimediaview.less
+++ b/src/themes/tizen/common/jquery.mobile.tizen.multimediaview.less
@@ -67,9 +67,7 @@
 	background-repeat : no-repeat;
 	width : 74 * @unit_base;
 	height : 74 * @unit_base;
-	-webkit-border-radius : 6 * @unit_base;
-	-moz-border-radius : 6 * @unit_base;
-	border-radius : 6 * @unit_base;
+	.LESSborder-radius-all( 6 * @unit_base );
 	background-color : @color_multimediaview_button_bg;
 	margin : 4 * @unit_base;
 }
@@ -125,9 +123,7 @@
 	width : 100%;
 	height : 16 * @unit_base;
 	background-color : @color_multimediaview_bar_gray;
-	-webkit-border-radius : 3 * @unit_base;
-	-moz-border-radius : 3 * @unit_base;
-	border-radius : 3 * @unit_base;
+	.LESSborder-radius-all(3 * @unit_base);
 }
 
 .ui-multimediaview-control .ui-seekbar .ui-currenttime {
@@ -136,9 +132,7 @@
 	height : 16 * @unit_base;
 	position : absolute;
 	background-color : @color_multimediaview_bar_active;
-	-webkit-border-radius : 3 * @unit_base;
-	-moz-border-radius : 3 * @unit_base;
-	border-radius : 3 * @unit_base;
+	.LESSborder-radius-all(3 * @unit_base);
 }
 
 .ui-multimediaview-control .ui-volumecontrol {
@@ -159,9 +153,7 @@
 	height : 16 * @unit_base;
 	position : absolute;
 	background-color : white;
-	-webkit-border-radius : 3 * @unit_base;
-	-moz-border-radius : 3 * @unit_base;
-	border-radius : 3 * @unit_base;
+	.LESSborder-radius-all(3 * @unit_base);
 	background-color : @color_multimediaview_bar_gray;
 }
 
@@ -170,9 +162,7 @@
 	padding : 0;
 	height : 16 * @unit_base;
 	position : absolute;
-	-webkit-border-radius : 3 * @unit_base;
-	-moz-border-radius : 3 * @unit_base;
-	border-radius : 3 * @unit_base;
+	 .LESSborder-radius-all(3 * @unit_base);
 	background-color : @color_multimediaview_bar_active;
 }
 
@@ -182,11 +172,11 @@
 	width : 30 * @unit_base;
 	height : 30 * @unit_base;
 	position : absolute;
-	-webkit-border-radius : 5 * @unit_base;
-	-moz-border-radius : 5 * @unit_base;
-	border-radius : 5 * @unit_base;
+	 .LESSborder-radius-all(5 * @unit_base);
 	background-color : @color_multimediaview_bar_handle;
 	background : -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#E6E6E6));
 	background : -moz-linear-gradient(top, #FFFFFF, #E6E6E6);
+	background : -o-linear-gradient(top, #FFFFFF, #E6E6E6);
+	background : -ms-linear-gradient(top, #FFFFFF, #E6E6E6);
 	border : solid 1px rgb(213, 213, 213);
-}
\ No newline at end of file
+}
diff --git a/src/themes/tizen/common/jquery.mobile.tizen.notification.less b/src/themes/tizen/common/jquery.mobile.tizen.notification.less
index 9bb6496..ad11f6f 100644
--- a/src/themes/tizen/common/jquery.mobile.tizen.notification.less
+++ b/src/themes/tizen/common/jquery.mobile.tizen.notification.less
@@ -44,12 +44,18 @@
 
 .ui-ticker.show {
 	display: block;
+	-ms-animation: ui-ticker-show 0.8s 1 ease;
+	-o-animation: ui-ticker-show 0.8s 1 ease;
+	-moz-animation: ui-ticker-show 0.8s 1 ease;
 	-webkit-animation: ui-ticker-show 0.8s 1 ease;
 	top: 0;
 }
 
 .ui-ticker.hide {
 	display: block;
+	-ms-animation: ui-ticker-hide 0.8s 1 ease;
+	-o-animation: ui-ticker-hide 0.8s 1 ease;
+	-ms-animation: ui-ticker-hide 0.8s 1 ease;
 	-webkit-animation: ui-ticker-hide 0.8s 1 ease;
 	top: -@ticker-height;
 }
@@ -143,14 +149,18 @@
 
 .ui-smallpopup.show {
 	display: block;
-
+	-moz-animation: ui-smallpopup-show 0.5s 1 ease;
+	-ms-animation: ui-smallpopup-show 0.5s 1 ease;
+	-o-animation: ui-smallpopup-show 0.5s 1 ease;
 	-webkit-animation: ui-smallpopup-show 0.5s 1 ease;
 }
 
 .ui-smallpopup.hide {
 	display: block;
 	left: -100%;
-
+	-moz-animation: ui-smallpopup-hide 0.5s 1 ease;
+	-ms-animation: ui-smallpopup-hide 0.5s 1 ease;
+	-o-animation: ui-smallpopup-hide 0.5s 1 ease;
 	-webkit-animation: ui-smallpopup-hide 0.5s 1 ease;
 }
 
diff --git a/src/themes/tizen/common/jquery.mobile.tizen.pagecontrol.less b/src/themes/tizen/common/jquery.mobile.tizen.pagecontrol.less
index a453192..3908e9e 100644
--- a/src/themes/tizen/common/jquery.mobile.tizen.pagecontrol.less
+++ b/src/themes/tizen/common/jquery.mobile.tizen.pagecontrol.less
@@ -13,6 +13,7 @@ div.pagecontrol {
 		background-size: 52 * @unit_base;
 
 		// Transition
+		-ms-transition: background 0.5s ease;
 		-webkit-transition: background 0.5s ease;
 		-moz-transition:  background 0.5s ease;
 		-o-transition: background 0.5s ease;
diff --git a/src/themes/tizen/common/jquery.mobile.tizen.popup.less b/src/themes/tizen/common/jquery.mobile.tizen.popup.less
index 211deb2..fbd0f41 100644
--- a/src/themes/tizen/common/jquery.mobile.tizen.popup.less
+++ b/src/themes/tizen/common/jquery.mobile.tizen.popup.less
@@ -60,6 +60,12 @@
 		text-align: center;
 	}
 
+	.ui-li .ui-radio, .ui-li .ui-checkbox {
+		label {
+			background : transparent;
+		}
+	}
+
 	// ----------------------------------------------------- //
 
 	.center_info {
diff --git a/src/themes/tizen/common/jquery.mobile.tizen.popupwindow.less b/src/themes/tizen/common/jquery.mobile.tizen.popupwindow.less
index 405e023..d3b6ffb 100644
--- a/src/themes/tizen/common/jquery.mobile.tizen.popupwindow.less
+++ b/src/themes/tizen/common/jquery.mobile.tizen.popupwindow.less
@@ -637,14 +637,18 @@
 	}
 
 	.ui-corner-all {
-		-moz-border-radius: 0.3em !important;
-		-webkit-border-radius: 0.3em !important;
-		border-radius: 0.3em !important;
+		-o-border-radius:	0.3em !important;
+        	-ms-border-radius:	0.3em !important;
+        	-moz-border-radius:	0.3em !important;
+        	-webkit-border-radius:	0.3em !important;
+        	border-radius:		0.3em !important;
 	}
 }
 
 .ui-popupwindow-corner-all {
-	-moz-border-radius: 0em !important;
-	-webkit-border-radius: 0em !important;
-	border-radius: 0em !important;
+		-o-border-radius:       0em !important;
+		-ms-border-radius:      0em !important;
+		-moz-border-radius:     0em !important;
+		-webkit-border-radius:  0em !important;
+		border-radius:          0em !important;
 }
diff --git a/src/themes/tizen/common/jquery.mobile.tizen.scrollview.handler.less b/src/themes/tizen/common/jquery.mobile.tizen.scrollview.handler.less
index eb2f793..273ded2 100755
--- a/src/themes/tizen/common/jquery.mobile.tizen.scrollview.handler.less
+++ b/src/themes/tizen/common/jquery.mobile.tizen.scrollview.handler.less
@@ -32,9 +32,7 @@
 	background-color : @color_scrollview_handler_bg;
 	background-position : center;
 	background-repeat : no-repeat;
-	-moz-border-radius : 5 * @unit_base;
-	-webkit-border-radius : 5 * @unit_base;
-	border-radius : 5 * @unit_base;
+	.LESSborder-radius-all(5 * @unit_base);
 }
 
 .ui-handler-y .ui-handler-thumb {
diff --git a/src/themes/tizen/common/jquery.mobile.tizen.shortcutscroll.less b/src/themes/tizen/common/jquery.mobile.tizen.shortcutscroll.less
index 7e5e375..5ebee89 100644
--- a/src/themes/tizen/common/jquery.mobile.tizen.shortcutscroll.less
+++ b/src/themes/tizen/common/jquery.mobile.tizen.shortcutscroll.less
@@ -5,7 +5,11 @@
 	right: 0*@unit_base;
 	background-color: @color_shortcutscroll_rollover_bg;
 	width: 30*@unit_base;
+	-ms-user-select: none;
+	-o-user-select: none;
+	-moz-user-select: none;
 	-webkit-user-select: none;
+	user-select:none;
 	margin:0;
 	padding-right: 0.08em;
 	opacity: 1;
@@ -25,7 +29,11 @@
 .ui-shortcutscroll2 {
 	position: absolute;
 	right: 0*@unit_base;
+	-ms-user-select: none;
+	-o-user-select: none;
+	-moz-user-select: none;
 	-webkit-user-select: none;
+	user-select: none;
 	margin:0;
 	padding-right: 0.08em;
 	opacity: 1;
@@ -56,6 +64,8 @@
 	background: @color_shortcutscroll_popup_bg;
 	color: @color_shortcutscroll_popup_text;
 	padding:10*@unit_base 30*@unit_base;
+	-ms-box-shadow: 8*@unit_base 10*@unit_base 0*@unit_base @color_shortcutscroll_popup_shadow;
+	-o-box-shadow: 8*@unit_base 10*@unit_base 0*@unit_base @color_shortcutscroll_popup_shadow; 
 	-moz-box-shadow: 8*@unit_base 10*@unit_base 0*@unit_base @color_shortcutscroll_popup_shadow;
 	-webkit-box-shadow: 8*@unit_base 10*@unit_base 0*@unit_base @color_shortcutscroll_popup_shadow;
 	box-shadow: 8*@unit_base 10*@unit_base 0*@unit_base @color_shortcutscroll_popup_shadow;
diff --git a/src/themes/tizen/common/jquery.mobile.tizen.swipelist.less b/src/themes/tizen/common/jquery.mobile.tizen.swipelist.less
index 5e133ac..87fbf75 100755
--- a/src/themes/tizen/common/jquery.mobile.tizen.swipelist.less
+++ b/src/themes/tizen/common/jquery.mobile.tizen.swipelist.less
@@ -8,6 +8,9 @@
 
 .ui-swipelist-item {
 	height: 52 * @unit_base;
+	-ms-user-select: none;
+	-o-user-select: none;
+	-moz-user-select: none;
 	-webkit-user-select: none;
 	-user-select: none;
 
diff --git a/src/themes/tizen/common/jquery.mobile.tizen.toggleswitch.less b/src/themes/tizen/common/jquery.mobile.tizen.toggleswitch.less
index 1a4943f..851110e 100644
--- a/src/themes/tizen/common/jquery.mobile.tizen.toggleswitch.less
+++ b/src/themes/tizen/common/jquery.mobile.tizen.toggleswitch.less
@@ -27,6 +27,7 @@
 					margin-left:-2px;
 					background: url(images/00_switch_button_off.png) no-repeat;
 					background-size: cover;
+					-ms-background-size: cover;
 					-webkit-background-size: cover;
 					-o-background-size: cover;
 					-moz-background-size: cover;
@@ -53,6 +54,7 @@
 					margin-left:-7px;
 					background: url(images/00_switch_button_on.png) no-repeat;
 					background-size: cover;
+					-ms-background-size: cover;
 					-webkit-background-size: cover;
 					-o-background-size: cover;
 					-moz-background-size: cover;
diff --git a/src/themes/tizen/common/jquery.mobile.transitions.css b/src/themes/tizen/common/jquery.mobile.transitions.css
index 417bff7..5fa52cd 100644
--- a/src/themes/tizen/common/jquery.mobile.transitions.css
+++ b/src/themes/tizen/common/jquery.mobile.transitions.css
@@ -7,6 +7,10 @@
 }
 
 .in {
+	-ms-animation-timing-function: ease-out;
+        -ms-animation-duration: 350ms;
+	-o-animation-timing-function: ease-out;
+        -o-animation-duration: 350ms;
 	-webkit-animation-timing-function: ease-out;
 	-webkit-animation-duration: 350ms;
 	-moz-animation-timing-function: ease-out;
@@ -14,6 +18,10 @@
 }
 
 .out {
+	-ms-animation-timing-function: ease-in;
+        -ms-animation-duration: 225ms;
+        -o-animation-timing-function: ease-in;
+        -o-animation-duration: 225;
 	-webkit-animation-timing-function: ease-in;
 	-webkit-animation-duration: 225ms;
 	-moz-animation-timing-function: ease-in;
@@ -45,6 +53,10 @@
 
 .fade.out {
 	opacity: 0;
+	-ms-animation-duration: 125ms;
+        -ms-animation-name: fadeout;
+        -o-animation-duration: 125ms;
+        -o-animation-name: fadeout;
 	-webkit-animation-duration: 125ms;
 	-webkit-animation-name: fadeout;
 	-moz-animation-duration: 125ms;
@@ -53,6 +65,10 @@
 
 .fade.in {
 	opacity: 1;
+	-ms-animation-duration: 225ms;
+        -ms-animation-name: fadein;
+        -o-animation-duration: 225ms;
+        -o-animation-name: fadein;
 	-webkit-animation-duration: 225ms;
 	-webkit-animation-name: fadein;
 	-moz-animation-duration: 225ms;
@@ -70,6 +86,8 @@
  */
 
 .viewport-flip {
+	-ms-perspective: 1000;
+	-o-perspective: 1000;
 	-webkit-perspective: 1000;
 	-moz-perspective: 1000;
 	position: absolute;
diff --git a/src/themes/tizen/tizen-black/Makefile b/src/themes/tizen/tizen-black/Makefile
index 36f8e8e..cdba417 100755
--- a/src/themes/tizen/tizen-black/Makefile
+++ b/src/themes/tizen/tizen-black/Makefile
@@ -50,7 +50,8 @@ CSS_SRCS=	../common/jquery.mobile.theme.less.css \
 		../common/jquery.mobile.tizen.virtualgridview.less.css \
 		../common/jquery.mobile.tizen.multimediaview.less.css \
 		../common/jquery.mobile.popup.css \
-		../common/jquery.mobile.tizen.popup.less.css
+		../common/jquery.mobile.tizen.popup.less.css \
+		../common/jquery.mobile.tizen.misc.less.css
 
 all: prepare css images js
 
diff --git a/src/themes/tizen/tizen-black/style.less b/src/themes/tizen/tizen-black/style.less
index 24a6c97..9774079 100755
--- a/src/themes/tizen/tizen-black/style.less
+++ b/src/themes/tizen/tizen-black/style.less
@@ -76,7 +76,11 @@
 @color_list_bubble_failed_text:	rgb(211, 0, 0);
 @color_list_bubble_name_text:	rgb(57, 166, 215);
 @color_list_bubble_help_text:	rgb(146, 146, 146);
-@color_list_divider_bg :		-webkit-linear-gradient(top,  rgb(73,73,73) 0%,rgb(22,22,22) 100%);
+
+@color_list_divider_bg : rgb(73,73,73);
+@color_list_divider_bg_start : rgb(73,73,73);
+@color_list_divider_bg_end : rgb(22,22,22);
+
 @color_list_divider_text :		rgb(142, 174, 193); /* #005ea0 */
 @color_list_divider_expand_div : rgba(0, 0, 0, 0.5);
 @color_list_expandable_expanded_bg:	rgb(26, 26, 26);
@@ -100,6 +104,11 @@
 @style_list_li_dialogue_border_left_width: 10 * @unit_base;
 @style_list_bubble_date_height:	40 * @unit_base;
 @style_list_bubble_date_text_align:	center;
+
+.LESSlistDivider_Background{
+	.LESSbackground-with-gradient(top, @color_list_divider_bg_start, @color_list_divider_bg_end);
+}
+
 /***************************************************************************
                    Shortcut Scroll
 ***************************************************************************/
@@ -141,8 +150,6 @@
 
 .LESSpopup_button_style{
 	background: @color_popup_buttonbg;
-	background: @color_popup_buttonbg_webkit;
-	background: @color_popup_buttonbg_moz;
 	color: @color_popup_buttontext;
 }
 
@@ -152,8 +159,6 @@
 
 .LESSpopup_button_press_style{
 	background: @color_popup_buttonbg_press;
-	background: @color_popup_buttonbg_press_webkit;
-	background: @color_popup_buttonbg_press_moz;
 }
 
 .LESSpopup_padding_style{
@@ -320,9 +325,20 @@
 @color_dayselector_Btn_Sun:		rgba(240, 20, 2, 1); /* #f01402 */
 @color_dayselector_Btn_Mon_to_Fri:	rgba(249, 249, 249, 1); /* #f9f9f9 */
 @color_dayselector_Btn_border:		rgba(0, 0, 0, 0.1); /* #000000 */
-@color_dayselector_Btn_normal:		-webkit-linear-gradient(top,  rgb(48,65,95) 0%,rgb(30,43,62) 100%);
-@color_dayselector_Btn_press:		-webkit-linear-gradient(top,  rgb(71,98,141) 0%,rgb(52,75,112) 100%);
 
+@color_dayselector_Btn_normal_start:	rgb(48,65,95) 0%;
+@color_dayselector_Btn_normal_end:	rgb(30,43,62) 100%;
+
+@color_dayselector_Btn_press_start:	rgb(71,98,141) 0%;
+@color_dayselector_Btn_press_end:	rgb(52,75,112) 100%;
+
+.LESSDayselectorButtonNormal{
+	.LESSbackground-with-gradient(top, @color_dayselector_Btn_normal_start, @color_dayselector_Btn_normal_end);
+}
+
+.LESSDayaselectorButtonPress{
+	.LESSbackground-with-gradient(top, @color_dayselector_Btn_press_start, @color_dayselector_Btn_press_end);
+}
 
 /***************************************************************************
                     OptionHeader
@@ -344,12 +360,24 @@
 /***************************************************************************
                     SegmentControl
 ***************************************************************************/
-@color_segmentcontrol_btn_normal : -webkit-linear-gradient(top,  rgb(48,65,95) 0%,rgb(30,43,62) 100%);
-@color_segmentcontrol_btn_press : -webkit-linear-gradient(top,  rgb(71,98,141) 0%,rgb(52,75,112) 100%);
+@color_segmentcontrol_btn_normal_start : rgb(48,65,95);
+@color_segmentcontrol_btn_normal_end : rgb(30,43,62);
+
+@color_segmentcontrol_btn_press_start : rgb(71,98,141);
+@color_segmentcontrol_btn_press_end : rgb(52,75,112);
+
 @color_segmentcontrol_Seg_text : rgba(249, 249, 249, 1); /* #F9F9F9*/
 @color_segmentcontrol_Seg_text_pressed : rgba(249, 249, 249, 1); /* #F9F9F9*/
 
+.LESSSegmentControlBtnBackground
+{
+	.LESSbackground-with-gradient(top,@color_segmentcontrol_btn_normal_start,@color_segmentcontrol_btn_normal_end);
+}
 
+.LESSSegmentControlBtnPressBackground
+{
+	.LESSbackground-with-gradient(top,@color_segmentcontrol_btn_normal_start,@color_segmentcontrol_btn_normal_end);
+}
 /***************************************************************************
                     ControlGroup
 ***************************************************************************/
@@ -360,7 +388,10 @@
                     Header / Footer 
                     NavigationBar / ControlBar
 ***************************************************************************/
-@color_bar_bg : -webkit-linear-gradient(top,  rgb(156,181,179) 0%,rgb(79,116,141) 100%);
+@color_bar_bg : rgb(156,181,179);
+@color_bar_bg_start : rgb(156, 181, 179);
+@color_bar_bg_end : rgb(79, 116, 141);
+
 @color_bar_back_btn_press : rgba(26, 82, 116, 0.3); /* #1A5274 */
 @color_bar_btn_press : rgba(0, 0, 0, 0.1);
 @color_bar_btn_bg : transparent;
@@ -373,10 +404,15 @@
 @color_bar_seg_btn_normal : -webkit-linear-gradient(top,  rgb(56,80,120) 0%,rgb(39,58,88) 100%);
 
 @color_bar_title_text : rgba(249, 249, 249, 1); /* #F9F9F9 */
-@color_bar_title_bg : -webkit-linear-gradient(top,  rgb(68,88,120) 0%,rgb(24,37,56) 100%);
+@color_bar_title_bg : rgb(68,88,120);
+@color_bar_title_bg_start : rgb(68,88,120);
+@color_bar_title_bg_end : rgb(24,37,56);
+
 @color_bar_title_btn_border : rgba(0, 0, 0, 0.2);
 
-@color_bar_footer_bg : -webkit-linear-gradient(top,  rgb(43,54,71) 0%,rgb(17,24,35) 100%);
+@color_bar_footer_bg : rgb(43,54,71);
+@color_bar_footer_bg_start : rgb(43,54,71);
+@color_bar_footer_bg_end : rgb(17,24,35);
 @color_bar_footer_btn_bg : transparent;
 
 @color_controlbar_btn_border : rgba(0, 0, 0, 0.1); /* #000000 */
@@ -389,6 +425,16 @@
 @color_border_top : rgba(255, 255, 255, 0.5);
 @color_border_bottom : rgba(0, 0, 0, 0.5);
 
+.LESSHeaderFooterBackground
+{
+	.LESSbackground-with-gradient(top, @color_bar_bg_start, @color_bar_bg_end);
+}
+
+.LESSColorBarTitleBackground
+{
+	.LESSbackground-with-gradient(top, @color_bar_title_bg_start, @color_bar_title_bg_end);
+}
+
 /***************************************************************************
                     Tickernoti
 ***************************************************************************/
diff --git a/src/themes/tizen/tizen-white/Makefile b/src/themes/tizen/tizen-white/Makefile
index c7ab983..f94919d 100755
--- a/src/themes/tizen/tizen-white/Makefile
+++ b/src/themes/tizen/tizen-white/Makefile
@@ -50,7 +50,8 @@ CSS_SRCS=	../common/jquery.mobile.theme.less.css \
 		../common/jquery.mobile.tizen.virtualgridview.less.css \
 		../common/jquery.mobile.tizen.multimediaview.less.css \
 		../common/jquery.mobile.popup.css \
-		../common/jquery.mobile.tizen.popup.less.css
+		../common/jquery.mobile.tizen.popup.less.css \
+		../common/jquery.mobile.tizen.misc.less.css
 
 all: prepare css images js
 
diff --git a/src/themes/tizen/tizen-white/images/controlbar/01_controlbar_icon_add_to_contact.png b/src/themes/tizen/tizen-white/images/controlbar/01_controlbar_icon_add_to_contact.png
new file mode 100755
index 0000000..65d47e4
Binary files /dev/null and b/src/themes/tizen/tizen-white/images/controlbar/01_controlbar_icon_add_to_contact.png differ
diff --git a/src/themes/tizen/tizen-white/style.less b/src/themes/tizen/tizen-white/style.less
index ef7ce08..4c05509 100755
--- a/src/themes/tizen/tizen-white/style.less
+++ b/src/themes/tizen/tizen-white/style.less
@@ -101,6 +101,10 @@
 @style_list_bubble_date_height:	40 * @unit_base;
 @style_list_bubble_date_text_align:	center;
 
+.LESSlistDivider_Background{
+	background: @color_list_divider_bg;
+}
+
 /***************************************************************************
                    Shortcut Scroll
 ***************************************************************************/
@@ -126,11 +130,15 @@
 @color_popup_buttonbg:		rgb(84, 126, 153);
 @color_popup_buttonbg_webkit:	-webkit-gradient(linear, left top, left bottom, from(rgb(84, 126, 153)), to(rgb(69, 105, 128)));
 @color_popup_buttonbg_moz:	-moz-linear-gradient(top, rgb(84, 126, 153), rgb(69, 105, 128));
+@color_popup_buttonbg_ms:	-ms-linear-gradient(top, rgb(84, 126, 153), rgb(69, 105, 128));
+@color_popup_buttonbg_o:	-o-linear-gradient(top, rgb(84, 126, 153), rgb(69, 105, 128));
 @color_popup_buttontext:	rgb(249, 249, 249);
 @color_popup_buttonbg_over:	rgb(94, 136, 163);
 @color_popup_buttonbg_press:	rgb(67, 160, 217);
 @color_popup_buttonbg_press_webkit:	-webkit-gradient(linear, left top, left bottom, from(rgb(67, 160, 217)), to(rgb(56, 139, 185)));
 @color_popup_buttonbg_press_moz:	-moz-linear-gradient(top, rgb(67, 160, 217), rgb(56, 139, 185));
+@color_popup_buttonbg_press_ms:		-ms-linear-gradient(top, rgb(67, 160, 217), rgb(56, 139, 185));
+@color_popup_buttonbg_press_o:		-o-linear-gradient(top, rgb(67, 160, 217), rgb(56, 139, 185));
 
 @color_popup_scroller_bg:	rgb(249, 249, 249);
 
@@ -144,6 +152,8 @@
 	background: @color_popup_buttonbg;
 	background: @color_popup_buttonbg_webkit;
 	background: @color_popup_buttonbg_moz;
+	background: @color_popup_buttonbg_ms;
+	background: @color_popup_buttonbg_o;
 	color: @color_popup_buttontext;
 }
 
@@ -155,6 +165,8 @@
 	background: @color_popup_buttonbg_press;
 	background: @color_popup_buttonbg_press_webkit;
 	background: @color_popup_buttonbg_press_moz;
+	background: @color_popup_buttonbg_press_ms;
+	background: @color_popup_buttonbg_press_o;
 }
 
 .LESSpopup_padding_style{
@@ -328,8 +340,21 @@
 @color_dayselector_Btn_Sun:		rgba(240, 20, 2, 1); /* #f01402 */
 @color_dayselector_Btn_Mon_to_Fri:	rgba(249, 249, 249, 1); /* #f9f9f9 */	
 @color_dayselector_Btn_border:		rgba(26, 82, 116, 1); /* #f9f9f9 */	
-@color_dayselector_Btn_normal:		-webkit-linear-gradient(top,  rgb(125,157,178) 0%,rgb(84,121,144) 100%);
-@color_dayselector_Btn_press:		-webkit-linear-gradient(top,  rgb(59,119,150) 0%,rgb(47,91,117) 100%);
+
+@color_dayselector_Btn_normal_start:	rgb(126, 157, 178);
+@color_dayselector_Btn_normal_end:	rgb(84,121,144);
+
+@color_dayselector_Btn_press_start:	rgb(59,119,150);
+@color_dayselector_Btn_press_end:	rgb(47,91,117);
+
+
+.LESSDayselectorButtonNormal{
+	.LESSbackground-with-gradient(top, @color_dayselector_Btn_normal_start, @color_dayselector_Btn_normal_end);
+}
+
+.LESSDayaselectorButtonPress{
+	.LESSbackground-with-gradient(top, @color_dayselector_Btn_press_start, @color_dayselector_Btn_press_end);
+}
 
 
 /***************************************************************************
@@ -352,11 +377,26 @@
 /***************************************************************************
                     SegmentControl
 ***************************************************************************/
-@color_segmentcontrol_btn_normal : -webkit-linear-gradient(top,  rgb(125,157,178) 0%,rgb(84,121,144) 100%);
-@color_segmentcontrol_btn_press : -webkit-linear-gradient(top,  rgb(59,119,150) 0%,rgb(47,91,117) 100%);
+@color_segmentcontrol_btn_normal : rgb(125,157,178);
+@color_segmentcontrol_btn_normal_start : rgb(125,157,178);
+@color_segmentcontrol_btn_normal_end : rgb(84,121,144);
+
+@color_segmentcontrol_btn_press : rgb(59,119,150);
+@color_segmentcontrol_btn_press_start : rgb(59,119,150);
+@color_segmentcontrol_btn_press_end : rgb(47,91,117);
+
 @color_segmentcontrol_Seg_text : rgba(249, 249, 249, 1); /* #F9F9F9*/
 @color_segmentcontrol_Seg_text_pressed : rgba(249, 249, 249, 1); /* #F9F9F9*/
 
+.LESSSegmentControlBtnBackground
+{
+	.LESSbackground-with-gradient(top, @color_segmentcontrol_btn_normal_start, @color_segmentcontrol_btn_normal_end);
+}
+
+.LESSSegmentControlBtnPressBackground
+{
+	.LESSbackground-with-gradient(top, @color_segmentcontrol_btn_press_start, @color_segmentcontrol_btn_press_end);
+}
 
 /***************************************************************************
                     ControlGroup
@@ -368,7 +408,10 @@
                     Header / Footer 
                     NavigationBar / ControlBar
 ***************************************************************************/
-@color_bar_bg : -webkit-linear-gradient(top,  rgb(156,181,179) 0%,rgb(79,116,141) 100%);
+@color_bar_bg : rgb(156, 181, 179);
+@color_bar_bg_start : rgb(156, 181, 179);
+@color_bar_bg_end : rgb(79,116,141);
+
 @color_bar_back_btn_press : rgba(26, 82, 116, 0.3); /* #1A5274 */
 @color_bar_btn_press : rgba(0, 0, 0, 0.1);
 @color_bar_btn_bg : transparent;
@@ -381,7 +424,11 @@
 @color_bar_seg_btn_normal : -webkit-linear-gradient(top,  rgb(127,159,181) 0%,rgb(70,108,133) 100%);
 
 @color_bar_title_text : rgba(249, 249, 249, 1); /* #F9F9F9 */
-@color_bar_title_bg : -webkit-linear-gradient(top,  rgb(90,153,186) 0%,rgb(32,84,115) 100%);
+
+@color_bar_title_bg : rgb(90, 153, 186);
+@color_bar_title_bg_start : rgb(90, 153, 186);
+@color_bar_title_bg_end : rgb(32, 84, 115);
+
 @color_bar_title_btn_border : rgba(36, 93, 128, 0.4); /* 00_winset_divider_line.png  temp value */
 
 @color_bar_footer_bg : -webkit-linear-gradient(top,  rgb(156,181,179) 0%,rgb(79,116,141) 100%);
@@ -397,6 +444,16 @@
 @color_border_top : rgba(255, 255, 255, 0.5);
 @color_border_bottom : rgba(0, 0, 0, 0.5);
 
+.LESSHeaderFooterBackground
+{
+	.LESSbackground-with-gradient(top, @color_bar_bg_start, @color_bar_bg_end);
+}
+
+.LESSColorBarTitleBackground
+{
+	.LESSbackground-with-gradient(top, @color_bar_title_bg_start, @color_bar_title_bg_end);
+}
+
 /***************************************************************************
                     Tickernoti
 ***************************************************************************/
diff --git a/src/widgets/010_colorwidget/js/jquery.mobile.tizen.colorwidget.js b/src/widgets/010_colorwidget/js/jquery.mobile.tizen.colorwidget.js
index abc6b83..293fc9a 100755
--- a/src/widgets/010_colorwidget/js/jquery.mobile.tizen.colorwidget.js
+++ b/src/widgets/010_colorwidget/js/jquery.mobile.tizen.colorwidget.js
@@ -68,9 +68,18 @@
 					el.css( el.jqmData( "cssProp" ), el.jqmData( self.options.disabled ? "dclr" : "clr" ) );
 				} );
 		},
-
+		_isValidColorCode: function( value ) {
+			return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test( value );
+		},
 		_setColor: function ( value ) {
-			var currentValue = ( this.options.color );
+			var currentValue = ( this.options.color ),
+				self = this;
+
+			if( !self._isValidColorCode( value ) )
+			{
+				console.log( " Color code is invalid " );
+				value = "#000000";
+			}
 
 			value = value.match(/#[0-9A-Fa-f]{6}/)
 				? value
diff --git a/src/widgets/common/Makefile b/src/widgets/common/Makefile
deleted file mode 100644
index 832d92d..0000000
--- a/src/widgets/common/Makefile
+++ /dev/null
@@ -1,58 +0,0 @@
-OUTPUT = ../../compiled
-
-JS = jquery.mobile.toolkit.js
-JS_THEME = theme.js
-CSS_THEME = theme.css
-
-JSFILES = \
-    js/jquery.easing.1.3.js \
-    js/jquery.mobile.scrollview.js \
-    js/tizen.core.js \
-	js/jquery.tmpl.js \
-	$(NULL)
-
-JS_THEME_FILES = \
-    $(NULL)
-
-CSSFILES = \
-    $(NULL)
-
-CSS_THEME_FILES = \
-    css/jquery.mobile.scrollview.css \
-    $(NULL)
-
-all: init js js_theme css css_theme
-	# Done.
-
-js: init
-	# Building the Javascript file...
-#	@@if test "x${JSFILES}x" != "xx"; then
-	  cat ${JSFILES} >> ${OUTPUT}/${JS};
-#	fi
-
-js_theme: init
-	# Building the Javascript theme file...
-	@@if test "x${JS_THEME_FILES}x" != "xx"; then \
-	  cat ${JS_THEME_FILES} >> ${OUTPUT}/${JS_THEME}; \
-	fi
-
-css: init
-	# Building the CSS file...
-	@@if test "x${CSSFILES}x" != "xx"; then \
-	  cat ${CSSFILES} >> ${OUTPUT}/${CSS}; \
-	fi
-
-css_theme: init
-	# Building the CSS theme file...
-	@@if test "x${CSS_THEME_FILES}x" != "xx"; then \
-	  cat ${CSS_THEME_FILES} >> ${OUTPUT}/${CSS_THEME}; \
-	fi
-
-init:
-	# Initializing...
-	@@if ! test -d ${OUTPUT}; then \
-	  mkdir ${OUTPUT}; \
-	fi
-
-clean:
-	@@true
diff --git a/src/widgets/common/css/jquery.mobile.clrlib.css b/src/widgets/common/css/jquery.mobile.clrlib.css
deleted file mode 100644
index 55242cd..0000000
--- a/src/widgets/common/css/jquery.mobile.clrlib.css
+++ /dev/null
@@ -1,51 +0,0 @@
-.jquery-mobile-clrlib-hue-gradient {
-    background: rgb(255,0,0); /* Old browsers */
-    background: -webkit-gradient(linear, left top, right top,
-        color-stop(  0%          ,rgba(255,  0,  0,1)),
-        color-stop( 16.666666667%,rgba(255,255,  0,1)),
-        color-stop( 33.333333333%,rgba(0  ,255,  0,1)),
-        color-stop( 50%          ,rgba(0  ,255,255,1)),
-        color-stop( 66.666666667%,rgba(0  ,  0,255,1)),
-        color-stop( 83.333333333%,rgba(255,  0,255,1)),
-        color-stop(100%          ,rgba(255,  0,  0,1))); /* Chrome,Safari4+ */
-    background: -moz-linear-gradient(left, 
-        rgba(255,  0,  0,1)   0%, 
-        rgba(255,255,  0,1)  16.666666667%,
-        rgba(  0,255,  0,1)  33.333333333%,
-        rgba(  0,255,255,1)  50%,
-        rgba(  0,  0,255,1)  66.666666667%,
-        rgba(255,  0,255,1)  83.333333333%,
-        rgba(255,  0,  0,1) 100%);
-    background: -webkit-linear-gradient(left,
-        rgba(255,  0,  0,1)   0%, 
-        rgba(255,255,  0,1)  16.666666667%,
-        rgba(  0,255,  0,1)  33.333333333%,
-        rgba(  0,255,255,1)  50%,
-        rgba(  0,  0,255,1)  66.666666667%,
-        rgba(255,  0,255,1)  83.333333333%,
-        rgba(255,  0,  0,1) 100%);
-    background: -o-linear-gradient(left,
-        rgba(255,  0,  0,1)   0%, 
-        rgba(255,255,  0,1)  16.666666667%,
-        rgba(  0,255,  0,1)  33.333333333%,
-        rgba(  0,255,255,1)  50%,
-        rgba(  0,  0,255,1)  66.666666667%,
-        rgba(255,  0,255,1)  83.333333333%,
-        rgba(255,  0,  0,1) 100%);
-    background: -ms-linear-gradient(left,
-        rgba(255,  0,  0,1)   0%, 
-        rgba(255,255,  0,1)  16.666666667%,
-        rgba(  0,255,  0,1)  33.333333333%,
-        rgba(  0,255,255,1)  50%,
-        rgba(  0,  0,255,1)  66.666666667%,
-        rgba(255,  0,255,1)  83.333333333%,
-        rgba(255,  0,  0,1) 100%);
-    background: linear-gradient(left,
-        rgba(255,  0,  0,1)   0%, 
-        rgba(255,255,  0,1)  16.666666667%,
-        rgba(  0,255,  0,1)  33.333333333%,
-        rgba(  0,255,255,1)  50%,
-        rgba(  0,  0,255,1)  66.666666667%,
-        rgba(255,  0,255,1)  83.333333333%,
-        rgba(255,  0,  0,1) 100%);
-}
diff --git a/src/widgets/common/css/jquery.mobile.scrollview.css b/src/widgets/common/css/jquery.mobile.scrollview.css
deleted file mode 100644
index fd1cb24..0000000
--- a/src/widgets/common/css/jquery.mobile.scrollview.css
+++ /dev/null
@@ -1,85 +0,0 @@
-@charset "utf-8";
-
-.ui-scrollview-clip {
-	position: relative;
-}
-
-.ui-scrollview-view {
-}
-
-.ui-scrolllistview .ui-li-divider {
-	z-index: 10;
-}
-
-.ui-scrollbar {
-	position: absolute;
-	overflow: hidden;
-
-	opacity: 0;
-	-webkit-transition: opacity 500ms;
-	-moz-transition: opacity 500ms;
-	transition: opacity 500ms;
-}
-
-.ui-scrollbar-visible {
-	opacity: 1;
-}
-
-.ui-scrollbar-y {
-	top: 2px;
-	right: 2px;
-	bottom: 8px;
-	width: 5px;
-}
-
-.ui-scrollbar-x {
-	right: 8px;
-	bottom: 2px;
-	left: 2px;
-	height: 5px;
-}
-
-.ui-scrollbar-track {
-	position: relative;
-	width: 100%;
-	height: 100%;
-}
-
-.ui-scrollbar-thumb {
-	position: absolute;
-	top: 0;
-	left: 0;
-	background-color: rgba(0, 0, 0, 0.3);
-	-moz-border-radius: 2px;
-	-webkit-border-radius: 2px;
-	border-radius: 2px;
-}
-
-.ui-scrollbar-y .ui-scrollbar-thumb {
-	width: 5px;
-	height: 100%;
-}
-
-.ui-scrollbar-x .ui-scrollbar-thumb {
-	width: 100%;
-	height: 5px;
-}
-
-/*
- * the values below are for the group index
- */
-
-/*
- * padding here set to zero - otherwise the list scrolls underneith the top heading and can be seen above it
- */
-.ui-content.ui-scrollview-clip {
-    padding: 0;
-}
-
-/*
- * this seems to effect how far the top divider is place wrt to the scrollview
- * without this, it is placed too high, so it is clipped in half
- */
-.ui-content.ui-scrollview-clip > .ui-listview.ui-scrollview-view {
-    margin: 0;
-}
diff --git a/src/widgets/common/js/jquery.mobile.tizen.scrollview.js b/src/widgets/common/js/jquery.mobile.tizen.scrollview.js
index 5ac74de..ffcc2a3 100644
--- a/src/widgets/common/js/jquery.mobile.tizen.scrollview.js
+++ b/src/widgets/common/js/jquery.mobile.tizen.scrollview.js
@@ -40,10 +40,10 @@
 
 	jQuery.widget( "tizen.scrollview", jQuery.mobile.widget, {
 		options: {
-			fps:               60,    // Frames per second in msecs.
 			direction:         null,  // "x", "y", or null for both.
 
-			scrollDuration:    2000,  // Duration of the scrolling animation in msecs.
+			timerInterval:     10,
+			scrollDuration:    1000,  // Duration of the scrolling animation in msecs.
 			overshootDuration: 250,   // Duration of the overshoot animation in msecs.
 			snapbackDuration:  500,   // Duration of the snapback animation in msecs.
 
@@ -59,6 +59,7 @@
 
 			showScrollBars:    true,
 			overshootEnable:   false,
+			outerScrollEnable: false,
 			scrollJump:        false,
 		},
 
@@ -105,7 +106,7 @@
 			this._vTracker = ( direction !== "x" ) ?
 					new MomentumTracker( this.options ) : null;
 
-			this._timerInterval = 1000 / this.options.fps;
+			this._timerInterval = this.options.timerInterval;
 			this._timerID = 0;
 
 			this._timerCB = function () {
@@ -214,7 +215,7 @@
 			if ( !duration || duration === undefined ) {
 				transition = "none";
 			} else {
-				transition =  "-webkit-transform " + duration / 1000 + "s";
+				transition =  "-webkit-transform " + duration / 1000 + "s ease-out";
 			}
 
 			if ( $.support.cssTransform3d ) {
@@ -332,6 +333,10 @@
 				start = getCurrentTime(),
 				tfunc;
 
+			if ( !this.options.outerScrollEnable ) {
+				return;
+			}
+
 			if ( this._$clip.jqmData("scroll") !== "y" ) {
 				return;
 			}
@@ -676,8 +681,9 @@
 			this._dragging = false;
 		},
 
-		_showScrollBars: function () {
-			var vclass = "ui-scrollbar-visible";
+		_showScrollBars: function ( interval ) {
+			var vclass = "ui-scrollbar-visible",
+				self = this;
 
 			if ( !this.options.showScrollBars ) {
 				return;
@@ -694,6 +700,12 @@
 			}
 
 			this._scrollbar_showed = true;
+
+			if ( interval ) {
+				setTimeout( function () {
+					self._hideScrollBars();
+				}, interval );
+			}
 		},
 
 		_hideScrollBars: function () {
@@ -811,7 +823,7 @@
 				var focused,
 					view_h = self._getViewHeight();
 
-				if ( $(".ui-page-active").get(0) !== self._page.get(0) ) {
+				if ( $(".ui-page-active").get(0) !== $c.closest(".ui-page").get(0) ) {
 					return;
 				}
 
@@ -836,11 +848,19 @@
 				self._view_height = view_h;
 			});
 
-			$( document ).one( "pageshow", function ( e ) {
-				self._page = $(".ui-page-active");
-				self._view_offset = self._$view.offset().top - self._$clip.offset().top;
-				self._view_height = self._getViewHeight();
-			});
+			$c.closest(".ui-page")
+				.one( "pageshow", function ( e ) {
+					self._view_offset = self._$view.offset().top - self._$clip.offset().top;
+					self._view_height = self._getViewHeight();
+				})
+				.bind( "pageshow", function ( e ) {
+					/* should be called after pagelayout */
+					setTimeout( function () {
+						self._set_scrollbar_size();
+						self._setScrollPosition( self._sx, self._sy );
+						self._showScrollBars( 2000 );
+					}, 0 );
+				});
 		},
 
 		_add_scrollbar: function () {
@@ -918,7 +938,7 @@
 				}
 				if ( this._$hScrollBar && vw ) {
 					thumb = this._$hScrollBar.find(".ui-scrollbar-thumb");
-					thumb.css( "width", (cw >= vw ? "100%" :
+					thumb.css( "width", (cw >= vw ? "0" :
 							(Math.floor(cw / vw * 100) || 1) + "%") );
 				}
 			}
@@ -933,7 +953,7 @@
 				}
 				if ( this._$vScrollBar && vh ) {
 					thumb = this._$vScrollBar.find(".ui-scrollbar-thumb");
-					thumb.css( "height", (ch >= vh ? "100%" :
+					thumb.css( "height", (ch >= vh ? "0" :
 							(Math.floor(ch / vh * 100) || 1) + "%") );
 				}
 			}
diff --git a/src/widgets/common/less/jquery.mobile.tizen.defines.less b/src/widgets/common/less/jquery.mobile.tizen.defines.less
deleted file mode 100644
index 3f6424f..0000000
--- a/src/widgets/common/less/jquery.mobile.tizen.defines.less
+++ /dev/null
@@ -1,7 +0,0 @@
-/*
- * Defines one can include in one's own .less file for a common look-and-feel
- */
-
-/* From page 60 */
-@tizen-selected-color: #d9931a;
-@tizen-selected-color-disabled: #999999;
diff --git a/src/widgets/common/less/jquery.mobile.widget.less b/src/widgets/common/less/jquery.mobile.widget.less
deleted file mode 100644
index 98882b7..0000000
--- a/src/widgets/common/less/jquery.mobile.widget.less
+++ /dev/null
@@ -1,48 +0,0 @@
-@jquery-mobile-ui-widget-border-color:  #c7c7c7;
-@jquery-mobile-ui-widget-text-color: #9d9d9d;
-@jquery-mobile-ui-widget-body:               #fafafa;
-@jquery-mobile-ui-widget-left-border-width: 10px;
-@jquery-mobile-ui-widget-left-border-style: solid;
-@jquery-mobile-ui-widget-border-style: 1px solid;
-@jquery-mobile-ui-widget-left-border: @jquery-mobile-ui-widget-left-border-width @jquery-mobile-ui-widget-left-border-style @jquery-mobile-ui-widget-border-color;
-
-.jquery-mobile-ui-widget {
-    border-left:   @jquery-mobile-ui-widget-left-border;
-    border-bottom: @jquery-mobile-ui-widget-border-style @jquery-mobile-ui-widget-border-color;
-    background:    @jquery-mobile-ui-widget-body;
-}
-
-.jquery-mobile-ui-widget-top {
-    border-top:    @jquery-mobile-ui-widget-border-style @jquery-mobile-ui-widget-border-color;
-}
-
-.jquery-mobile-ui-label {
-    position: relative;
-    border-bottom: @jquery-mobile-ui-widget-border-style @jquery-mobile-ui-widget-border-color;
-    height: 40px;
-    .jquery-mobile-ui-label-text {
-        font-family: sans-serif;
-        font-size: 120%;
-        position: absolute;
-        text-align: left;
-        vertical-align: bottom;
-        color: @jquery-mobile-ui-widget-text-color;
-        bottom: 0px;
-        left: @jquery-mobile-ui-widget-left-border-width;
-    }
-}
-
-.rounded-corners (@radius: 5px) {
-    border-radius: @radius;
-    -webkit-border-radius: @radius;
-    -moz-border-radius: @radius;
-}
-
-.reset-rounded-corners {
-    .rounded-corners (0px);
-}
-
-.reset-border {
-    border: 0;
-}
-
diff --git a/src/widgets/datetimepicker/js/jquery.mobile.tizen.datetimepicker.js b/src/widgets/datetimepicker/js/jquery.mobile.tizen.datetimepicker.js
index 94c4b38..adeecc8 100644
--- a/src/widgets/datetimepicker/js/jquery.mobile.tizen.datetimepicker.js
+++ b/src/widgets/datetimepicker/js/jquery.mobile.tizen.datetimepicker.js
@@ -130,7 +130,6 @@
 
 		_makeTwoDigits: function ( val ) {
 			var ret = val.toString(10);
-
 			if ( val < 10 ) {
 				ret = "0" + ret;
 			}
@@ -389,9 +388,7 @@
 						hour = 12;
 					}
 				}
-				if ( pat.length == 2 ) {
-					hour = this._makeTwoDigits( hour );
-				}
+				hour = this._makeTwoDigits( hour );
 				text = hour;
 				break;
 			case 'm':
@@ -713,6 +710,7 @@
 						date.setMonth( val - 1 );
 
 						if ( date.getMonth() == val ) {
+							date.setDate( 1 );
 							date.setDate( date.getDate() - 1 );
 						}
 						break;
@@ -732,7 +730,7 @@
 					}
 				});
 
-				$div.circularview( 'centerTo', '.current', 500 );
+				$div.circularview( 'centerTo', '.current', 200 );
 				$div.bind( 'scrollend' , function ( e ) {
 					if ( !obj._reflow ) {
 						obj._reflow = function () {
diff --git a/src/widgets/extendablelist/js/jquery.mobile.tizen.extendablelist.js b/src/widgets/extendablelist/js/jquery.mobile.tizen.extendablelist.js
index 047d462..28f30d8 100755
--- a/src/widgets/extendablelist/js/jquery.mobile.tizen.extendablelist.js
+++ b/src/widgets/extendablelist/js/jquery.mobile.tizen.extendablelist.js
@@ -1,4 +1,4 @@
-/* ***************************************************************************
+/****************************************************************************
  * Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd.
  *
  * Permission is hereby granted, free of charge, to any person obtaining a
@@ -42,12 +42,18 @@
  *
  *
  *APIs:
- *
- *		create ( void )
- *			: API to call _create method. API for AJAX or DB loading callback.
- *
- *		recreate ( Array )
- *			: Update extendable list with new data array. For example, update with search result.
+ *		create ( {
+ *				itemData: function ( idx ) { return json_obj; },
+ *				numItemData: number or function () { return number; },
+ *				cacheItemData: function ( minIdx, maxIdx ) {}
+ *				} )
+ *			: Create a extendable list widget. At this moment, _create method is called.
+ *			args : A collection of options
+ *				itemData: A function that returns JSON object for given index. Mandatory.
+ *				numItemData: Total number of itemData. Mandatory.
+ *				cacheItemData: Extendable list will ask itemData between minIdx and maxIdx.
+ *				    Developers can implement this function for preparing data.
+ *				    Optional.
  *
  *Examples:
  *
@@ -61,7 +67,7 @@
  *			</li>
  *		</script>
  *	
- *		<ul id = "extendable_list_main" data-role="extendablelist" data-extenditems="50" data-template="tmp-3-1-1" data-dbtable="JSON_DATA">
+ *		<ul id = "extendable_list_main" data-role="extendablelist" data-extenditems="50" data-template="tmp-3-1-1">
  *		</ul>
  *
  */
@@ -72,9 +78,7 @@
 	//Keeps track of the number of lists per page UID
 	//This allows support for multiple nested list in the same page
 	//https://github.com/jquery/jquery-mobile/issues/1617
-	var listCountPerPage = {},
-		TOTAL_ITEMS = 0,
-		last_index = 0;
+	var listCountPerPage = {};
 
 	$.widget( "tizen.extendablelist", $.mobile.widget, {
 		options: {
@@ -115,17 +119,16 @@
 			$( this ).removeClass( "ui-btn-down-s" );
 		},
 
-		_pushData: function ( template, data ) {
+		_pushData: function ( template ) {
 			var o = this.options,
 				t = this,
 				i = 0,
-				dataTable = data,
 				myTemplate = $( "#" + template ),
-				loadMoreItems = ( o.extenditems > data.length - last_index ? data.length - last_index : o.extenditems ),
+				loadMoreItems = ( o.extenditems > t._numItemData - t._lastIndex ? t._numItemData - t.lastIndex : o.extenditems ),
 				htmlData;
 
 			for (i = 0; i < loadMoreItems; i++ ) {
-				htmlData = myTemplate.tmpl( dataTable[ i ] );
+				htmlData = myTemplate.tmpl( t._itemData( i ) );
 				$( o.id ).append( $( htmlData ).attr( 'id', 'li_' + i ) );
 
 				/* Add style */
@@ -136,7 +139,7 @@
 					.bind( "mouseover", t._stylerMouseOver )
 					.bind( "mouseout", t._stylerMouseOut );
 
-				last_index++;
+				t._lastIndex += 1;
 			}
 
 			/* After push data, re-style extendable list widget */
@@ -144,12 +147,11 @@
 		},
 
 		_loadmore: function ( event ) {
-			var t = this,
-				o = event.data,
+			var t = event.data,	// <li> element
+				o = t.options,
 				i = 0,
-				dataTable = window[ o.dbtable ],
 				myTemplate = $( "#" + o.template ),
-				loadMoreItems = ( o.extenditems > dataTable.length - last_index ? dataTable.length - last_index : o.extenditems ),
+				loadMoreItems = ( o.extenditems > t._numItemData - t._lastIndex ? t._numItemData - t._lastIndex : o.extenditems ),
 				htmlData,
 				more_items_to_load,
 				num_next_load_items;
@@ -159,15 +161,15 @@
 
 			/* Append More Items */
 			for ( i = 0; i < loadMoreItems; i++ ) {
-				htmlData = myTemplate.tmpl( dataTable[ last_index ] );
-				$( o.id ).append( $( htmlData ).attr( 'id', 'li_' + last_index ) );
-				last_index++;
+				htmlData = myTemplate.tmpl( t._itemData( t._lastIndex ) );
+				$( o.id ).append( $( htmlData ).attr( 'id', 'li_' + t._lastIndex ) );
+				t._lastIndex += 1;
 			}
 
 			/* Append "Load more" message on the last of list */
-			if ( TOTAL_ITEMS > last_index ) {
+			if ( t._numItemData > t._lastIndex ) {
 				myTemplate = $( "#" + o.loadmore );
-				more_items_to_load = TOTAL_ITEMS - last_index;
+				more_items_to_load = t._numItemData - t._lastIndex;
 				num_next_load_items = ( o.extenditems <= more_items_to_load ) ? o.extenditems : more_items_to_load;
 				htmlData = myTemplate.tmpl( { NUM_MORE_ITEMS : num_next_load_items } );
 
@@ -179,46 +181,13 @@
 		},
 
 		recreate: function ( newArray ) {
-			var t = this,
-				o = this.options,
-				myTemplate,
-				more_items_to_load,
-				num_next_load_items,
-				htmlData;
-
-			$( o.id ).empty();
-
-			last_index = 0;
-			TOTAL_ITEMS = newArray.length;
-
-			t._pushData( ( o.template), newArray );
-
-			/* Append "Load more" message on the last of list */
-			if ( TOTAL_ITEMS > last_index ) {
-				myTemplate = $( "#" + o.loadmore );
-				more_items_to_load = TOTAL_ITEMS - last_index;
-				num_next_load_items = ( o.extenditems <= more_items_to_load) ? o.extenditems : more_items_to_load;
-				htmlData = myTemplate.tmpl( { NUM_MORE_ITEMS : num_next_load_items } );
-
-				$( o.id ).append( $( htmlData ).attr( 'id', "load_more_message" ) );
-
-				$( "#load_more_message" ).live( "click", t.options, t._loadmore );
-			} else {
-				/* No more items to load */
-				$( "#load_more_message" ).die();
-				$( "#load_more_message" ).remove();
-			}
-
-			if ( o.childSelector == " ul" ) {
-				$( o.id + " ul" ).swipelist();
-			}
-
-			$( o.id ).extendablelist();
-
-			t.refresh( true );
+			this._create( {
+				itemData: function ( idx ) { return newArray[ idx ] },
+				numItemData: newArray.length
+			} );
 		},
 
-		_initList: function () {
+		_initList: function (args ) {
 			var t = this,
 				o = this.options,
 				myTemplate,
@@ -226,25 +195,20 @@
 				num_next_load_items,
 				htmlData;
 
-			/* After AJAX loading success */
-			o.dbtable = t.element.data( "dbtable" );
-
-			TOTAL_ITEMS = $( window[ o.dbtable ] ).size();
-
 			/* Make Gen list by template */
-			if ( last_index <= 0 ) {
-				t._pushData( ( o.template ), window[ o.dbtable ] );
+			if ( t._lastIndex <= 0 ) {
+				t._pushData( o.template );
 
 				/* Append "Load more" message on the last of list */
-				if ( TOTAL_ITEMS > last_index ) {
+				if ( t._numItemData > t._lastIndex ) {
 					myTemplate = $( "#" + o.loadmore );
-					more_items_to_load = TOTAL_ITEMS - last_index;
+					more_items_to_load = t._numItemData - t._lastIndex;
 					num_next_load_items = ( o.extenditems <= more_items_to_load) ? o.extenditems : more_items_to_load;
 					htmlData = myTemplate.tmpl( { NUM_MORE_ITEMS : num_next_load_items } );
 
 					$( o.id ).append( $( htmlData ).attr( 'id', "load_more_message" ) );
 
-					$( "#load_more_message" ).live( "click", t.options, t._loadmore );
+					$( "#load_more_message" ).live( "click", t, t._loadmore );
 				} else {
 					/* No more items to load */
 					$( "#load_more_message" ).die();
@@ -265,14 +229,25 @@
 			var o = this.options;
 
 			/* external API for AJAX callback */
-			this._create( "create" );
+			this._create.apply( this, arguments );
 		},
 
-		_create: function ( event ) {
+		_create: function ( args ) {
 			var t = this,
 				o = this.options,
 				$el = this.element;
 
+
+			t.destroy();
+
+			$.extend(this, {
+				_itemData: function ( idx ) { return null; },
+				_numItemData: 0,
+				_cacheItemData: function ( minIdx, maxIdx ) { },
+				_lastIndex: 0
+			});
+
+
 			// create listview markup
 			t.element.addClass( function ( i, orig ) {
 				return orig + " ui-listview ui-extendable-list-container" + ( t.options.inset ? " ui-listview-inset ui-corner-all ui-shadow " : "" );
@@ -295,33 +270,73 @@
 				o.scrollview = false;
 			}
 
-			/* After DB Load complete, Init Extendable list */
-			if ( $( o.id ).hasClass( "elLoadSuccess" ) ) {
-				if ( !$( o.id ).hasClass( "elInitComplete" ) ) {
-					if ( $el.data( "template" ) ) {
-						o.template = $el.data( "template" );
-
-						/* to support swipe list, <li> or <ul> can be main node of extendable list. */
-						if ( $el.data( "swipelist" ) == true ) {
-							o.childSelector = " ul";
-						} else {
-							o.shildSelector = " li";
-						}
+			if ( args ) {
+				if ( !t._loadData( args ) ) {
+					return;
+				}
+			} else {
+				// Legacy support: dbtable
+				console.warn("WARNING: The data interface of extendable list is changed. \nOld data interface(data-dbtable) is still supported, but will be removed in next version. \nPlease fix your code soon!");
+
+				if ( $( o.id ).hasClass( "elLoadSuccess" ) ) {
+					var dbtable_name = $el.jqmData('dbtable');
+					o.dbtable = window[ dbtable_name ];
+					if( !(o.dbtable) ) {
+						o.dbtable = { };
 					}
+					t._itemData = function ( idx ) {
+						return o.dbtable[ idx ];
+					};
+					t._numItemData = o.dbtable.length;
 
-					$( o.id ).addClass( "elInitComplete" );
+				} else {
+					console.warn("No elLoadSuccess class");
+					return;
 				}
+			}
 
-				t._initList();
+			if ( $el.data( "template" ) ) {
+				o.template = $el.data( "template" );
+
+				/* to support swipe list, <li> or <ul> can be main node of extendable list. */
+				if ( $el.data( "swipelist" ) == true ) {
+					o.childSelector = " ul";
+				} else {
+					o.shildSelector = " li";
+				}
 			}
+			t._initList( args );
 		},
 
+		_loadData : function ( args ) {
+			var self = this;
+
+			if ( args.itemData && typeof args.itemData == 'function'  ) {
+				self._itemData = args.itemData;
+			} else {
+				return false;
+			}
+			if ( args.numItemData ) {
+				if ( typeof args.numItemData == 'function' ) {
+					self._numItemData = args.numItemData( );
+				} else if ( typeof args.numItemData == 'number' ) {
+					self._numItemData = args.numItemData;
+				} else {
+					return false;
+				}
+			} else {
+				return false;
+			}
+			return true;
+		},
+
+
 		destroy : function () {
 			var o = this.options;
 
 			$( o.id ).empty();
 
-			TOTAL_ITEMS = 0;
+			eOTAL_ITEMS = 0;
 			last_index = 0;
 
 			$( "#load_more_message" ).die();