Fix: iphone template should not be linked with theme

New: update iui

htdocs/includes/iphone/iui/iui.css

@@ -1,4 +1,8 @@
-/* iui.css (c) 2007-9 by iUI Project Members, see LICENSE.txt for license */
+/*
+   Copyright (c) 2007-9, iUI Project Members
+   See LICENSE.txt for licensing terms
+   Version 0.40-dev2
+ */
 body {
     margin: 0;
     font-family: Helvetica;
@@ -17,13 +21,15 @@ body > *:not(.toolbar) {
     left: 0;
     top: 45px;
     width: 100%;
-    min-height: 372px;
+    height: auto;
+    min-height: 415px;
     -webkit-transition-duration: 300ms;
     -webkit-transition-property: -webkit-transform;
     -webkit-transform: translateX(0%);
 }
 
 body[orient="landscape"] > *:not(.toolbar) {
+    height: auto;
     min-height: 268px;
 }
 
@@ -31,29 +37,26 @@ body > *[selected="true"] {
     display: block;
 }
 
-a[selected], a:active {
+li > a[selected], li > a:active {
     background-color: #194fdb !important;
-    background-image: url(listArrowSel.png), url(selection.png) !important;
+    background-repeat: no-repeat, repeat-x !important;	/* TG: !important */
-    background-repeat: no-repeat, repeat-x;
+    background-position: right center, left top !important;	/* TG: !important */
-    background-position: right center, left top;
     color: #FFFFFF !important;
 }
 
-a[selected="progress"] {
+li > a[selected="progress"] {
-    background-image: url(loading.gif), url(selection.png) !important;
 }
 
 /************************************************************************************************/
 
 body > .toolbar {
     box-sizing: border-box;
-    -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
     border-bottom: 1px solid #2d3642;
     border-top: 1px solid #6d84a2;
-    padding: 10px;
+    padding: 0 10px 10px 10px;
     height: 45px;
-    background: url(toolbar.png) #6d84a2 repeat-x;
 }
 
 .toolbar > h1 {
@@ -61,6 +64,7 @@ body > .toolbar {
     overflow: hidden;
     left: 50%;
     margin: 1px 0 0 -75px;
+    padding-top: 10px;
     height: 45px;
     font-size: 20px;
     width: 150px;
@@ -97,11 +101,9 @@ body[orient="landscape"] > .toolbar > h1 {
     text-decoration: none;
     white-space: nowrap;
     background: none;
-    -webkit-border-image: url(toolButton.png) 0 5 0 5;
 }
 
 .blueButton {
-    -webkit-border-image: url(blueButton.png) 0 5 0 5;
     border-width: 0 5px;
 }
 
@@ -117,7 +119,6 @@ body[orient="landscape"] > .toolbar > h1 {
     padding: 0;
     max-width: 55px;
     border-width: 0 8px 0 14px;
-    -webkit-border-image: url(backButton.png) 0 8 0 14;
 }
 
 .whiteButton,
@@ -133,20 +134,22 @@ body[orient="landscape"] > .toolbar > h1 {
     color: inherit;
 }
 
+/* TG */ .grayButton[selected], .grayButton:active,
 .whiteButton {
-    -webkit-border-image: url(whiteButton.png) 0 12 0 12;
     text-shadow: rgba(255, 255, 255, 0.7) 0 1px 0;
+/* TG */ background:transparent !important;
 }
 
 .redButton {
-    -webkit-border-image: url(redButton.png) 0 12 0 12;
+/* TG */ background:transparent !important;
     color:#fff;
     text-shadow: #7a0001 0 -1px 0;
 }
 
+/* TG */ .whiteButton[selected], .whiteButton:active,
 .grayButton {
-    -webkit-border-image: url(grayButton.png) 0 12 0 12;
     color: #FFFFFF;
+/* TG */ background:transparent !important;
 }
 
 /************************************************************************************************/
@@ -168,7 +171,6 @@ body > ul > li.group {
     border-top: 1px solid #7d7d7d;
     border-bottom: 1px solid #999999;
     padding: 1px 10px;
-    background: url(listGroup.png) repeat-x;
     font-size: 17px;
     font-weight: bold;
     text-shadow: rgba(0, 0, 0, 0.4) 0 1px 0;
@@ -186,12 +188,12 @@ body > ul > li > a {
     padding: 8px 32px 8px 10px;
     text-decoration: none;
     color: inherit;
-    background: url(listArrow.png) no-repeat right center;
 }
 
 a[target="_replace"] {
     box-sizing: border-box;
     -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
     padding-top: 25px;
     padding-bottom: 25px;
     font-size: 18px;
@@ -215,12 +217,12 @@ body > .dialog {
 .dialog > fieldset {
     box-sizing: border-box;
     -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
     width: 100%;
     margin: 0;
     border: none;
     border-top: 1px solid #6d84a2;
     padding: 10px 6px;
-    background: url(toolbar.png) #7388a5 repeat-x;
 }
 
 .dialog > fieldset > h1 {
@@ -243,6 +245,7 @@ body > .dialog {
 input:not(input[type|=radio]):not(input[type|=checkbox]) {
     box-sizing: border-box;
     -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
     width: 100%;
     margin: 8px 0 0 0;
     padding: 6px 6px 6px 44px;
@@ -254,12 +257,12 @@ input:not(input[type|=radio]):not(input[type|=checkbox]) {
 
 body > .panel {
     box-sizing: border-box;
-    -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
     padding: 10px;
-    background: #c8c8c8 url(pinstripes.png);
 }
 
+.panel > ul, 
 .panel > fieldset {
     position: relative;
     margin: 0 0 20px 0;
@@ -272,22 +275,25 @@ body > .panel {
     font-size: 16px;
 }
 
+.panel > ul li,
 .row  {
     position: relative;
     min-height: 42px;
     border-bottom: 1px solid #999999;
     -webkit-border-radius: 0;
+    -moz-border-radius: 0;
     text-align: right;
 }
 
+.panel > ul li:last-child,
 fieldset > .row:last-child {
     border-bottom: none !important;
 }
 
 .row > input:not(input[type|=radio]):not(input[type|=checkbox]) {
     box-sizing: border-box;
-    -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
     margin: 0;
     border: none;
     padding: 12px 10px 0 110px;
@@ -324,7 +330,7 @@ fieldset > .row:last-child {
 .toggle {
     border: 1px solid #888888;
     -webkit-border-radius: 6px;
-    background: #FFFFFF url(toggle.png) repeat-x;
+    -moz-border-radius: 6px;
     font-size: 19px;
     font-weight: bold;
     line-height: 30px;
@@ -332,7 +338,6 @@ fieldset > .row:last-child {
 
 .toggle[toggled="true"] {
     border: 1px solid #143fae;
-    background: #194fdb url(toggleOn.png) repeat-x;
 }
 
 .toggleOn {
@@ -371,7 +376,7 @@ fieldset > .row:last-child {
     height: 28px;    
     border: 1px solid #888888;
     -webkit-border-radius: 6px;
-    background: #ffffff url(thumb.png) repeat-x;
+    -moz-border-radius: 6px;
 }
 
 .toggle[toggled="true"] > .thumb {
@@ -391,6 +396,4 @@ fieldset > .row:last-child {
 
 #preloader {
     display: none;
-    background-image: url(loading.gif), url(selection.png),
-        url(blueButton.png), url(listArrowSel.png), url(listGroup.png);
 }

htdocs/includes/iphone/iui/iui.js

@@ -1,6 +1,7 @@
 /*
    Copyright (c) 2007-9, iUI Project Members
    See LICENSE.txt for licensing terms
+   Version 0.40-dev2
  */
 
 
@@ -12,6 +13,7 @@ var slideInterval = 0;
 var currentPage = null;
 var currentDialog = null;
 var currentWidth = 0;
+var currentHeight = 0;
 var currentHash = location.hash;
 var hashPrefix = "#_";
 var pageHistory = [];
@@ -27,27 +29,51 @@ window.iui =
 {
 	animOn: true,	// Slide animation with CSS transition is now enabled by default where supported
 
+	httpHeaders: {
+	    "X-Requested-With" : "XMLHttpRequest"
+	},
+
 	showPage: function(page, backwards)
 	{
 		if (page)
 		{
+//			if (window.iui_ext)	window.iui_ext.injectEventMethods(page);	// TG
+			
 			if (currentDialog)
 			{
 				currentDialog.removeAttribute("selected");
+				// EVENT blur->currentDialog
+				sendEvent("blur", currentDialog);
 				currentDialog = null;
 			}
 
 			if (hasClass(page, "dialog"))
+			{
+			    // EVENT focus->page
+				sendEvent("focus", page);
 				showDialog(page);
+			}
 			else
 			{
+				sendEvent("load", page);    // 127(stylesheet), 128(script), 129(onload)
+			                                    // 130(onFocus), 133(loadActionButton)
 				var fromPage = currentPage;
+				// EVENT blur->currentPage
+				sendEvent("blur", currentPage);
 				currentPage = page;
+				// EVENT focus->currentPage
+				sendEvent("focus", page);
 
 				if (fromPage)
+				{
+				    if (backwards) sendEvent("unload", fromPage);
 					setTimeout(slidePages, 0, fromPage, page, backwards);
+				}
 				else
+				{
 					updatePage(page, fromPage);
+				}
+					
 			}
 		}
 	},
@@ -60,54 +86,95 @@ window.iui =
 			var index = pageHistory.indexOf(pageId);
 			var backwards = index != -1;
 			if (backwards)
-				pageHistory.splice(index, pageHistory.length);
+			{
+				// we're going back, remove history from index on
+				// remember - pageId will be added again in updatePage
+				pageHistory.splice(index);
+			}
 
 			iui.showPage(page, backwards);
 		}
 	},
 	
-	showPageByHref: function(href, args, method, replace, cb)
+	goBack: function()
 	{
-		var req = new XMLHttpRequest();
+		pageHistory.pop();	// pop current page
-		req.onerror = function()
+		var pageID = pageHistory.pop();  // pop/get parent
-		{
+		var page = $(pageID);
-			if (cb)
+		iui.showPage(page, true);
-				cb(false);
-		};
-		
-		req.onreadystatechange = function()
-		{
-			if (req.readyState == 4)
-			{
-				if (replace)
-					replaceElementWithSource(replace, req.responseText);
-				else
-				{
-					var frag = document.createElement("div");
-					frag.innerHTML = req.responseText;
-					iui.insertPages(frag.childNodes);
-				}
-				if (cb)
-					setTimeout(cb, 1000, true);
-			}
-		};
-
-		if (args)
-		{
-			req.open(method || "GET", href, true);
-			req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
-			req.setRequestHeader("Content-Length", args.length);
-			req.send(args.join("&"));
-		}
-		else
-		{
-			req.open(method || "GET", href, true);
-			req.send(null);
-		}
 	},
 
-	insertPages: function(nodes)
+	showPageByHref: function(href, args, method, replace, cb)
 	{
+	  // I don't think we need onerror, because readstate will still go to 4 in that case
+	  function spbhCB(xhr) 
+	  {
+		if (xhr.readyState == 4)
+		{
+		  // Add 'if (xhr.responseText)' to make sure we have something???
+		  var frag = document.createElement("div");
+		  frag.innerHTML = xhr.responseText;
+          // EVENT beforeInsert->body
+          sendEvent("beforeinsert", document.body, {fragment:frag})
+          if (replace)
+		  {
+			  replaceElementWithFrag(replace, frag);
+		  }
+		  else
+		  {
+			  iui.insertPages(frag);
+		  }
+		  if (cb)
+			setTimeout(cb, 1000, true);
+		}
+	  };
+	  iui.ajax(href, args, method, spbhCB);
+	},
+	
+	// Callback function gets a single argument, the XHR
+	ajax: function(url, args, method, cb)
+	{
+        var xhr = new XMLHttpRequest();
+        method = method ? method.toUpperCase() : "GET";
+        if (args && method == "GET")
+        {
+          url =  url + "?" + iui.param(args);
+        }
+        xhr.open(method, url, true);
+        if (cb)
+        {
+        xhr.onreadystatechange = function() { cb(xhr); };
+        }
+        var data = null;
+        if (args && method != "GET")
+        {
+            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+            data = iui.param(args);
+        }
+        for (var header in iui.httpHeaders)
+        {
+            xhr.setRequestHeader(header, iui.httpHeaders[header]);
+        }
+        xhr.send(data);
+	},
+	
+	// Thanks, jQuery
+	//	stripped-down, simplified, object-only version
+	param: function( o )
+	{
+	  var s = [ ];
+	
+	  // Serialize the key/values
+	  for ( var key in o )
+		s[ s.length ] = encodeURIComponent(key) + '=' + encodeURIComponent(o[key]);
+  
+	  // Return the resulting serialization
+	  return s.join("&").replace(/%20/g, "+");
+	},
+
+	insertPages: function(frag)
+	{
+		var nodes = frag.childNodes;
 		var targetPage;
 		for (var i = 0; i < nodes.length; ++i)
 		{
@@ -118,10 +185,16 @@ window.iui =
 					child.id = "__" + (++newPageCount) + "__";
 
 				var clone = $(child.id);
-				if (clone)
+				var docNode;
+				if (clone) {
 					clone.parentNode.replaceChild(child, clone);
+				    docNode = $(child.id);
+			    }
 				else
-					document.body.appendChild(child);
+					docNode = document.body.appendChild(child);
+					
+				sendEvent("afterinsert", document.body, {insertedNode:docNode});   
+
 
 				if (child.getAttribute("selected") == "true" || !targetPage)
 					targetPage = child;
@@ -129,9 +202,9 @@ window.iui =
 				--i;
 			}
 		}
-
 		if (targetPage)
 			iui.showPage(targetPage);
+
 	},
 
 	getSelectedPage: function()
@@ -158,7 +231,25 @@ window.iui =
 		new RegExp("^http:\/\/www.youtube.com\/v\/"),
 		new RegExp("^javascript:"),
 
-	]
+	],
+	hasClass: function(self, name)
+	{
+		var re = new RegExp("(^|\\s)"+name+"($|\\s)");
+		return re.exec(self.getAttribute("class")) != null;
+	},
+		
+	addClass: function(self, name)
+	{
+	  if (!iui.hasClass(self,name)) self.className += " "+name;
+	},
+		
+	removeClass: function(self, name)
+	{
+	  if (iui.hasClass(self,name)) {
+		  var reg = new RegExp('(\\s|^)'+name+'(\\s|$)');
+		self.className=self.className.replace(reg,' ');
+	  }
+	}
 };
 
 // *************************************************************************************************
@@ -204,23 +295,27 @@ addEventListener("click", function(event)
 			setTimeout(unselect, 500);
 		}
 		else if (link == $("backButton"))
-			history.back();
+		{
+			iui.goBack();
+		}
 		else if (link.getAttribute("type") == "submit")
 		{
 			var form = findParent(link, "form");
 			if (form.target == "_self")
 			{
 			    form.submit();
-			    return;  // return so we don't preventDefault
+			    return;  // allow default
 			}
 			submitForm(form);
 		}
 		else if (link.getAttribute("type") == "cancel")
+		{
 			cancelDialog(findParent(link, "form"));
+		}
 		else if (link.target == "_replace")
 		{
 			link.setAttribute("selected", "progress");
-			iui.showPageByHref(link.href, null, null, link, unselect);
+			iui.showPageByHref(link.href, null, "GET", link, unselect);
 		}
 		else if (iui.isNativeUrl(link.href))
 		{
@@ -233,7 +328,7 @@ addEventListener("click", function(event)
 		else if (!link.target)
 		{
 			link.setAttribute("selected", "progress");
-			iui.showPageByHref(link.href, null, null, null, unselect);
+			iui.showPageByHref(link.href, null, "GET", null, unselect);
 		}
 		else
 			return;
@@ -252,6 +347,24 @@ addEventListener("click", function(event)
 	}
 }, true);
 
+
+function sendEvent(type, node, props)
+{
+    if (node)
+    {
+        var event = document.createEvent("UIEvent");
+        event.initEvent(type, false, false);  // no bubble, no cancel
+        if (props)
+        {
+            for (i in props)
+            {
+                event[i] = props[i];
+            }
+        }
+        node.dispatchEvent(event);
+    }
+}
+
 function getPageFromLoc()
 {
 	var page;
@@ -284,10 +397,11 @@ function checkOrientAndLocation()
 {
 	if (!hasOrientationEvent)
 	{
-	  if (window.innerWidth != currentWidth)
+	  if ((window.innerWidth != currentWidth) || (window.innerHeight != currentHeight))
 	  {	  
 		  currentWidth = window.innerWidth;
-		  var orient = currentWidth == 320 ? portraitVal : landscapeVal;
+		  currentHeight = window.innerHeight;
+		  var orient = (currentWidth < currentHeight) ? portraitVal : landscapeVal;
 		  setOrientation(orient);
 	  }
 	}
@@ -302,6 +416,22 @@ function checkOrientAndLocation()
 function setOrientation(orient)
 {
 	document.body.setAttribute("orient", orient);
+//  Set class in addition to orient attribute:
+	if (orient == portraitVal)
+	{
+		iui.removeClass(document.body, landscapeVal);
+		iui.addClass(document.body, portraitVal);
+	}
+	else if (orient == landscapeVal)
+	{
+		iui.removeClass(document.body, portraitVal);
+		iui.addClass(document.body, landscapeVal);
+	}
+	else
+	{
+		iui.removeClass(document.body, portraitVal);
+		iui.removeClass(document.body, landscapeVal);
+	}
 	setTimeout(scrollTo, 100, 0, 1);
 }
 
@@ -310,7 +440,7 @@ function showDialog(page)
 	currentDialog = page;
 	page.setAttribute("selected", "true");
 	
-	if (hasClass(page, "dialog") && !page.target)
+	if (hasClass(page, "dialog"))
 		showForm(page);
 }
 
@@ -318,12 +448,17 @@ function showForm(form)
 {
 	form.onsubmit = function(event)
 	{
+//  submitForm and preventDefault are called in the click handler
+//  when the user clicks the submit a.button
+// 
 		event.preventDefault();
 		submitForm(form);
 	};
 	
 	form.onclick = function(event)
 	{
+// Why is this code needed?  cancelDialog is called from
+// the click hander.  When will this be called?
 		if (event.target == form && hasClass(form, "dialog"))
 			cancelDialog(form);
 	};
@@ -345,6 +480,8 @@ function updatePage(page, fromPage)
 	var pageTitle = $("pageTitle");
 	if (page.title)
 		pageTitle.innerHTML = page.title;
+	var ttlClass = page.getAttribute("ttlclass");
+	pageTitle.className = ttlClass ? ttlClass : "";
 
 	if (page.localName.toLowerCase() == "form" && !page.target)
 		showForm(page);
@@ -357,6 +494,8 @@ function updatePage(page, fromPage)
 		{
 			backButton.style.display = "inline";
 			backButton.innerHTML = prevPage.title ? prevPage.title : "Back";
+			var bbClass = prevPage.getAttribute("bbclass");
+			backButton.className = (bbClass) ? 'button ' + bbClass : 'button';
 		}
 		else
 			backButton.style.display = "none";
@@ -369,6 +508,8 @@ function slidePages(fromPage, toPage, backwards)
 
 	clearInterval(checkTimer);
 	
+	sendEvent("beforetransition", fromPage, {out:true});
+	sendEvent("beforetransition", toPage, {out:false});
 	if (canDoSlideAnim() && axis != 'y')
 	{
 	  slide2(fromPage, toPage, backwards, slideDone);
@@ -385,6 +526,9 @@ function slidePages(fromPage, toPage, backwards)
 	  checkTimer = setInterval(checkOrientAndLocation, 300);
 	  setTimeout(updatePage, 0, toPage, fromPage);
 	  fromPage.removeEventListener('webkitTransitionEnd', slideDone, false);
+	  sendEvent("aftertransition", fromPage, {out:true});
+      sendEvent("aftertransition", toPage, {out:false});
+
 	}
 }
 
@@ -459,7 +603,9 @@ function preloadImages()
 
 function submitForm(form)
 {
-	iui.showPageByHref(form.action || "POST", encodeForm(form), form.method);
+    iui.addClass(form, "progress");
+    iui.showPageByHref(form.action, encodeForm(form), form.method || "GET", null, clear);
+    function clear() {   iui.removeClass(form, "progress"); }
 }
 
 function encodeForm(form)
@@ -468,16 +614,17 @@ function encodeForm(form)
 	{
 		for (var i = 0; i < inputs.length; ++i)
 		{
-			if (inputs[i].name)
+	        if (inputs[i].name)
-				args.push(inputs[i].name + "=" + escape(inputs[i].value));
+		        args[inputs[i].name] = inputs[i].value;
 		}
 	}
 
-	var args = [];
+    var args = {};
-	encode(form.getElementsByTagName("input"));
+    encode(form.getElementsByTagName("input"));
-	encode(form.getElementsByTagName("textarea"));
+    encode(form.getElementsByTagName("textarea"));
-	encode(form.getElementsByTagName("select"));
+    encode(form.getElementsByTagName("select"));
-	return args;	
+    encode(form.getElementsByTagName("button"));
+    return args;	  
 }
 
 function findParent(node, localName)
@@ -489,11 +636,10 @@ function findParent(node, localName)
 
 function hasClass(self, name)
 {
-	var re = new RegExp("(^|\\s)"+name+"($|\\s)");
+	return iui.hasClass(self,name);
-	return re.exec(self.getAttribute("class")) != null;
 }
 
-function replaceElementWithSource(replace, source)
+function replaceElementWithFrag(replace, frag)
 {
 	var page = replace.parentNode;
 	var parent = replace;
@@ -502,14 +648,13 @@ function replaceElementWithSource(replace, source)
 		page = page.parentNode;
 		parent = parent.parentNode;
 	}
-
-	var frag = document.createElement(parent.localName);
-	frag.innerHTML = source;
-
 	page.removeChild(parent);
 
-	while (frag.firstChild)
+    var docNode;
-		page.appendChild(frag.firstChild);
+	while (frag.firstChild) {
+		docNode = page.appendChild(frag.firstChild);
+		sendEvent("afterinsert", document.body, {insertedNode:docNode});
+    }
 }
 
 function $(id) { return document.getElementById(id); }

htdocs/includes/iphone/iui/js/iui-event-log.js

@@ -0,0 +1,62 @@
+/*
+   Copyright (c) 2007-9, iUI Project Members
+   See LICENSE.txt for licensing terms
+ */
+
+// requires querySelectorAll, therefore iPhone OS 2.x or later
+// or Safari 3.x or later
+
+(function() {
+
+var eventNames = ['blur', 'focus', 'load', 'unload', 'beforetransition', 'aftertransition' ];
+
+// Using DOMContentLoaded so this loads before the onload in iui.js -- need a better method
+// We need to register before iui's main onload handler so we can get the 'load' and 'focus' events
+// for the default 'page' (view).
+//
+addEventListener("DOMContentLoaded", function(event)
+{
+	document.body.addEventListener('beforeinsert', logEvent, false);
+	document.body.addEventListener('afterinsert', afterInsert, false);
+// This will register event handlers on all initial nodes
+// We'll also need to register handlers on inserted (via ajax) nodes
+// To do that we'll need to use the beforeInsert event
+	nodes = document.querySelectorAll("body > *:not(.toolbar)");
+	for (var i = 0; i  < nodes.length  ; i++)
+	{
+		registerAllEvents(nodes[i]);
+	}
+}, false);
+
+function registerAllEvents(node)
+{
+	for (var i = 0; i  < eventNames.length  ; i++)
+	{
+		console.log("addlistener: " + eventNames[i] + " on #" + node.id + " = " + node);
+		node.addEventListener(eventNames[i], logEvent, false);
+	}
+}
+
+function afterInsert(e)
+{
+	logEvent(e);
+	registerAllEvents(e.insertedNode);	// Set event handlers on newly added node
+}
+
+function logEvent(e)
+{
+	console.log("logEvent type: " + e.type + "  target " + e.target.tagName + "#" + e.target.id);
+	if (e.type == "beforetransition" || e.type == "aftertransition")
+	{
+		console.log("  out trans = " + e.out);
+	}
+	else if (e.type == "beforeinsert") {
+		console.log("  fragment = " + e.fragment);
+	}
+	else if (e.type == "afterinsert") {
+		console.log("  node = " + e.insertedNode);
+	}
+}
+
+
+})();

htdocs/includes/iphone/iui/js/iui-theme-switcher.js

@@ -0,0 +1,42 @@
+/*
+   Copyright (c) 2007-9, iUI Project Members
+   See LICENSE.txt for licensing terms
+ */
+
+iui.ts = {
+	themeSelect: function(select)
+	{
+		var curTheme = iui.ts.getTheme();
+		var index = select.selectedIndex;
+		var newTheme = select.options[index].value;
+		iui.ts.setTheme(newTheme);
+		return false;
+	},
+
+	getTheme: function()
+	{
+		var i, a, main;
+		for(i=0; (a = document.getElementsByTagName("link")[i]); i++)
+		{
+			if(a.getAttribute("rel").indexOf("style") != -1
+			&& a.getAttribute("title"))
+			{
+				if (a.disabled == false) return a.getAttribute("title");
+			}
+		}
+	},
+	
+	setTheme: function(title)
+	{
+		var i, a, main;
+		for(i=0; (a = document.getElementsByTagName("link")[i]); i++)
+		{
+			if(a.getAttribute("rel").indexOf("style") != -1
+			&& a.getAttribute("title"))
+			{
+				a.disabled = true;
+				if(a.getAttribute("title") == title) a.disabled = false;
+			}
+		}
+	}
+};

htdocs/includes/iphone/releaseNotes.txt

@@ -1,7 +1,23 @@
-REL-0.31 2009-10-05
+REL-0.40-dev2 2009-12-18
+ * Fix Issue #138 (orientation css not updating)
+ * Fix Issue #184 (hardcoded width of 320 in "orientation event fallback")
+ * Re-enable call to submitForm in onsubmit in showForm()
+    (rev d6abb099744e6ae7f1591e3208d3d54bb35c2a51)
+ * Merge all -moz-* properties back in to iui.css and theme css
+ * Fix Issue #124 (Panel height too short on webapp-capapble) and add a test for it
+ * Create placeholder for gradient version of default theme
+ * Add iui.goBack() and use it instead of history.back()
+ * Add iUI favicon.ico and  iui-favicon.png
+ * Added starting point/placeholder for QUnit Tests
+ * Numerous additions and improvements to Test pages
+ * Numerous improvements to Google App Engine website
 
-* Slide animation with CSS transitions is now on by default where enabled
+REL-0.40-dev1 2009-10-06
-* Non-AJAX form subission when target="_self" (Issue #136)
+
+ * Work in progress
+ * Add events to iui/iui.js
+ * Add iui-views extension
+ * Integrate masabi rail-tickets and iui_ext
 
 REL-0.30 2009-08-06
 

htdocs/lib/security.lib.php

@@ -355,11 +355,11 @@ function dol_loginfunction2($langs,$conf,$mysoc)
 	{
 		if (file_exists(DOL_DOCUMENT_ROOT."/theme/phones/".$conf->browser->phone))
 		{
-			$smarty->template_dir = DOL_DOCUMENT_ROOT."/theme/phones/".$conf->browser->phone."/default/templates/";
+			$smarty->template_dir = DOL_DOCUMENT_ROOT."/theme/phones/".$conf->browser->phone."/templates/";
 		}
 		else
 		{
-			$smarty->template_dir = DOL_DOCUMENT_ROOT."/theme/phones/others/default/templates/";
+			$smarty->template_dir = DOL_DOCUMENT_ROOT."/theme/phones/others/templates/";
 		}
 	}
 	else

htdocs/theme/phones/iphone/default/default.css.php

@@ -1,449 +0,0 @@
-<?php
-/* Copyright (C) 2009 Regis Houssin		<regis@dolibarr.fr>
- *
- * This program is free software; you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation; either version 2 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program; if not, write to the Free Software
- * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA.
- */
-
-/**
- *		\file       htdocs/theme/phones/iphone/default.css.php
- *		\brief      Fichier de style CSS du theme Iphone default
- *		\version    $Id$
- */
-
-if (! defined('NOTOKENRENEWAL')) define('NOTOKENRENEWAL','1'); // Disables token renewal
-if (! defined('NOREQUIREMENU'))  define('NOREQUIREMENU','1');
-if (! defined('NOREQUIREHTML'))  define('NOREQUIREHTML','1');
-if (! defined('NOREQUIREAJAX'))  define('NOREQUIREAJAX','1');
-if (! defined('NOREQUIRESOC'))   define('NOREQUIRESOC','1');
-//if (! defined('NOREQUIRETRAN'))  define('NOREQUIRETRAN','1'); // We need to use translation files to know direction
-if (! defined('NOREQUIREDB'))    define('NOREQUIREDB','1');
-
-require_once("../../../../master.inc.php");
-require_once(DOL_DOCUMENT_ROOT."/lib/functions.lib.php");
-
-// Define css type
-header('Content-type: text/css');
-// Important: Avoid page request by browser and dynamic build at
-// each Dolibarr page access.
-if (empty($dolibarr_nocache)) header('Cache-Control: max-age=3600, public, must-revalidate');
-else header('Cache-Control: no-cache');
-
-
-if (! empty($_GET["lang"])) $langs->setDefaultLang($_GET["lang"]);	// If language was forced on URL by the main.inc.php
-$langs->load("main",0,1);
-$right=($langs->direction=='rtl'?'left':'right');
-$left=($langs->direction=='rtl'?'right':'left');
-?>
-
-body {
-    margin: 0;
-    font-family: Helvetica;
-    background: #FFFFFF;
-    color: #000000;
-    overflow-x: hidden;
-    -webkit-user-select: none;
-    -webkit-text-size-adjust: none;
-}
-
-body > *:not(.toolbar) {
-    display: none;
-    position: absolute;
-    margin: 0;
-    padding: 0;
-    left: 0;
-    top: 45px;
-    width: 100%;
-    min-height: 372px;
-    -webkit-transition-duration: 300ms;
-    -webkit-transition-property: -webkit-transform;
-    -webkit-transform: translateX(0%);
-}
-
-body[orient="landscape"] > *:not(.toolbar) {
-    min-height: 268px;
-}
-
-body > *[selected="true"] {
-    display: block;
-}
-
-a[selected], a:active {
-    background-color: #194fdb !important;
-    background-image: url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/default/img/listArrowSel.png'; ?>), 
-    	url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/default/img/selection.png'; ?>) !important;
-    background-repeat: no-repeat, repeat-x;
-    background-position: right center, left top;
-    color: #FFFFFF !important;
-}
-
-a[selected="progress"] {
-    background-image: url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/default/img/loading.gif'; ?>),
-    	url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/default/img/selection.png'; ?>) !important;
-}
-
-/************************************************************************************************/
-
-body > .toolbar {
-    box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    border-bottom: 1px solid #2d3642;
-    border-top: 1px solid #6d84a2;
-    padding: 10px;
-    height: 45px;
-    background: url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/default/img/toolbar.png'; ?>) #6d84a2 repeat-x;
-}
-
-.toolbar > h1 {
-    position: absolute;
-    overflow: hidden;
-    left: 50%;
-    margin: 1px 0 0 -75px;
-    height: 45px;
-    font-size: 20px;
-    width: 150px;
-    font-weight: bold;
-    text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 0;
-    text-align: center;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    color: #FFFFFF;
-}
-
-body[orient="landscape"] > .toolbar > h1 {
-    margin-left: -125px;
-    width: 250px;
-}
-
-.button {
-    position: absolute;
-    overflow: hidden;
-    top: 8px;
-    right: 6px;
-    margin: 0;
-    border-width: 0 5px;
-    padding: 0 3px;
-    width: auto;
-    height: 30px;
-    line-height: 30px;
-    font-family: inherit;
-    font-size: 12px;
-    font-weight: bold;
-    color: #FFFFFF;
-    text-shadow: rgba(0, 0, 0, 0.6) 0px -1px 0;
-    text-overflow: ellipsis;
-    text-decoration: none;
-    white-space: nowrap;
-    background: none;
-    -webkit-border-image: url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/default/img/toolButton.png'; ?>) 0 5 0 5;
-}
-
-.blueButton {
-    -webkit-border-image: url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/default/img/blueButton.png'; ?>) 0 5 0 5;
-    border-width: 0 5px;
-}
-
-.leftButton {
-    left: 6px;
-    right: auto;
-}
-
-#backButton {
-    display: none;
-    left: 6px;
-    right: auto;
-    padding: 0;
-    max-width: 55px;
-    border-width: 0 8px 0 14px;
-    -webkit-border-image: url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/default/img/backButton.png'; ?>) 0 8 0 14;
-}
-
-.whiteButton,
-.redButton,
-.grayButton {
-    display: block;
-    border-width: 0 12px;
-    padding: 10px;
-    text-align: center;
-    font-size: 20px;
-    font-weight: bold;
-    text-decoration: inherit;
-    color: inherit;
-}
-
-.whiteButton {
-    -webkit-border-image: url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/default/img/whiteButton.png'; ?>) 0 12 0 12;
-    text-shadow: rgba(255, 255, 255, 0.7) 0 1px 0;
-}
-
-.redButton {
-    -webkit-border-image: url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/default/img/redButton.png'; ?>) 0 12 0 12;
-    color:#fff;
-    text-shadow: #7a0001 0 -1px 0;
-}
-
-.grayButton {
-    -webkit-border-image: url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/default/img/grayButton.png'; ?>) 0 12 0 12;
-    color: #FFFFFF;
-}
-
-/************************************************************************************************/
-
-body > ul > li {
-    position: relative;
-    margin: 0;
-    border-bottom: 1px solid #E0E0E0;
-    padding: 8px 0 8px 10px;
-    font-size: 20px;
-    font-weight: bold;
-    list-style: none;
-}
-
-body > ul > li.group {
-    position: relative;
-    top: -1px;
-    margin-bottom: -2px;
-    border-top: 1px solid #7d7d7d;
-    border-bottom: 1px solid #999999;
-    padding: 1px 10px;
-    background: url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/default/img/listGroup.png'; ?>) repeat-x;
-    font-size: 17px;
-    font-weight: bold;
-    text-shadow: rgba(0, 0, 0, 0.4) 0 1px 0;
-    color: #FFFFFF;
-}
-
-body > ul > li.group:first-child {
-    top: 0;
-    border-top: none;
-}
-
-body > ul > li > a {
-    display: block;
-    margin: -8px 0 -8px -10px;
-    padding: 8px 32px 8px 10px;
-    text-decoration: none;
-    color: inherit;
-    background: url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/default/img/listArrow.png'; ?>) no-repeat right center;
-}
-
-a[target="_replace"] {
-    box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    padding-top: 25px;
-    padding-bottom: 25px;
-    font-size: 18px;
-    color: cornflowerblue;
-    background-color: #FFFFFF;
-    background-image: none;
-}
-
-/************************************************************************************************/
-    
-body > .dialog {
-    top: 0;
-    width: 100%;
-    min-height: 417px;
-    z-index: 2;
-    background: rgba(0, 0, 0, 0.8);
-    padding: 0;
-    text-align: right;
-}
-
-.dialog > fieldset {
-    box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    width: 100%;
-    margin: 0;
-    border: none;
-    border-top: 1px solid #6d84a2;
-    padding: 10px 6px;
-    background: url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/default/img/toolbar.png'; ?>) #7388a5 repeat-x;
-}
-
-.dialog > fieldset > h1 {
-    margin: 0 10px 0 10px;
-    padding: 0;
-    font-size: 20px;
-    font-weight: bold;
-    color: #FFFFFF;
-    text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 0;
-    text-align: center;
-}
-
-.dialog > fieldset > label {
-    position: absolute;
-    margin: 16px 0 0 6px;
-    font-size: 14px;
-    color: #999999;
-}
-
-input:not(input[type|=radio]):not(input[type|=checkbox]) {
-    box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    width: 100%;
-    margin: 8px 0 0 0;
-    padding: 6px 6px 6px 44px;
-    font-size: 16px;
-    font-weight: normal;
-}
-
-/************************************************************************************************/
-
-body > .panel {
-    box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    padding: 10px;
-    background: #c8c8c8 url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/default/img/pinstripes.png'; ?>);
-}
-
-.panel > fieldset {
-    position: relative;
-    margin: 0 0 20px 0;
-    padding: 0;
-    background: #FFFFFF;
-    -webkit-border-radius: 10px;
-    -moz-border-radius: 10px;
-    border: 1px solid #999999;
-    text-align: right;
-    font-size: 16px;
-}
-
-.row  {
-    position: relative;
-    min-height: 42px;
-    border-bottom: 1px solid #999999;
-    -webkit-border-radius: 0;
-    text-align: right;
-}
-
-fieldset > .row:last-child {
-    border-bottom: none !important;
-}
-
-.row > input:not(input[type|=radio]):not(input[type|=checkbox]) {
-    box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    margin: 0;
-    border: none;
-    padding: 12px 10px 0 110px;
-    height: 42px;
-    background: none;
-}
-.row > input[type|=radio], .row > input[type|=checkbox] {
-  margin: 7px 7px 0 0;
-  height: 25px;
-  width: 25px;
-}
-
-.row > label {
-    position: absolute;
-    margin: 0 0 0 14px;
-    line-height: 42px;
-    font-weight: bold;
-}
-
-.row > span {
-    position: absolute;
-    padding: 12px 10px 0 110px;
-    margin: 0;
-}
-
-.row > .toggle {
-    position: absolute;
-    top: 6px;
-    right: 6px;
-    width: 100px;
-    height: 28px;
-}
-
-.toggle {
-    border: 1px solid #888888;
-    -webkit-border-radius: 6px;
-    background: #FFFFFF url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/default/img/toggle.png'; ?>) repeat-x;
-    font-size: 19px;
-    font-weight: bold;
-    line-height: 30px;
-}
-
-.toggle[toggled="true"] {
-    border: 1px solid #143fae;
-    background: #194fdb url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/default/img/toggleOn.png'; ?>) repeat-x;
-}
-
-.toggleOn {
-    display: none;
-    position: absolute;
-    width: 60px;
-    text-align: center;
-    left: 0;
-    top: 0;
-    color: #FFFFFF;
-    text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 0;
-}
-
-.toggleOff {
-    position: absolute;
-    width: 60px;
-    text-align: center;
-    right: 0;
-    top: 0;
-    color: #666666;
-}
-
-.toggle[toggled="true"] > .toggleOn {
-    display: block;
-}
-
-.toggle[toggled="true"] > .toggleOff {
-    display: none;
-}
-
-.thumb {
-    position: absolute;
-    top: -1px;
-    left: -1px;
-    width: 40px;
-    height: 28px;    
-    border: 1px solid #888888;
-    -webkit-border-radius: 6px;
-    background: #ffffff url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/default/img/thumb.png'; ?>) repeat-x;
-}
-
-.toggle[toggled="true"] > .thumb {
-    left: auto;
-    right: -1px;
-}
-
-.panel > h2 {
-    margin: 0 0 8px 14px;
-    font-size: inherit;
-    font-weight: bold;
-    color: #4d4d70;
-    text-shadow: rgba(255, 255, 255, 0.75) 2px 2px 0;
-}
-
-/************************************************************************************************/
-
-#preloader {
-    display: none;
-    background-image: url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/default/img/loading.gif'; ?>),
-    	url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/default/img/selection.png'; ?>),
-        url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/default/img/blueButton.png'; ?>),
-        url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/default/img/listArrowSel.png'; ?>),
-        url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/default/img/listGroup.png'; ?>);
-}

htdocs/theme/phones/iphone/templates/login.tpl

@@ -29,12 +29,15 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title>{$title}</title>
-<meta name="robots" content="noindex,nofollow">
+<meta name="robots" content="noindex,nofollow" />
 <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
-<link rel="apple-touch-icon" href="{$dol_url_root}/theme/phones/iphone/default/img/iui-logo-touch-icon.png" />
+<link rel="icon" type="image/png" href="{$dol_url_root}/includes/iphone/iui/iui-favicon.png" />
-<meta name="apple-touch-fullscreen" content="YES" />
+<link rel="apple-touch-icon" href="{$dol_url_root}/includes/iphone/iui/iui-logo-touch-icon.png" />
-<style type="text/css" media="screen">@import "{$dol_url_root}/theme/phones/iphone/default/default.css.php";</style>
+<meta name="apple-mobile-web-app-capable" content="yes" />
+<link rel="stylesheet" href="{$dol_url_root}/includes/iphone/iui/iui.css" type="text/css" />
+<link rel="stylesheet" title="Default" href="{$dol_url_root}/theme/phones/iphone/theme/default/default.css.php"  type="text/css" />
 <script type="application/x-javascript" src="{$dol_url_root}/includes/iphone/iui/iui.js"></script>
+<script type="application/x-javascript" src="{$dol_url_root}/includes/iphone/iui/js/iui-theme-switcher.js"></script>
 
 </head>
 
@@ -42,7 +45,6 @@
 
 <div class="toolbar">
 	<h1 id="pageTitle"></h1>
-	<a id="backButton" class="button" href="#"></a>
 </div>
 
 <form title="{$title}" id="login" name="login" class="panel" method="post" action="{$php_self}" selected="true">

htdocs/theme/phones/iphone/theme/default/default.css.php

@@ -0,0 +1,160 @@
+<?php
+/* Copyright (C) 2009 Regis Houssin		<regis@dolibarr.fr>
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA.
+ */
+
+/**
+ *		\file       htdocs/theme/phones/iphone/default.css.php
+ *		\brief      Fichier de style CSS du theme Iphone default
+ *		\version    $Id$
+ */
+
+if (! defined('NOTOKENRENEWAL')) define('NOTOKENRENEWAL','1'); // Disables token renewal
+if (! defined('NOREQUIREMENU'))  define('NOREQUIREMENU','1');
+if (! defined('NOREQUIREHTML'))  define('NOREQUIREHTML','1');
+if (! defined('NOREQUIREAJAX'))  define('NOREQUIREAJAX','1');
+if (! defined('NOREQUIRESOC'))   define('NOREQUIRESOC','1');
+//if (! defined('NOREQUIRETRAN'))  define('NOREQUIRETRAN','1'); // We need to use translation files to know direction
+if (! defined('NOREQUIREDB'))    define('NOREQUIREDB','1');
+
+require_once("../../../../../master.inc.php");
+require_once(DOL_DOCUMENT_ROOT."/lib/functions.lib.php");
+
+// Define css type
+header('Content-type: text/css');
+// Important: Avoid page request by browser and dynamic build at
+// each Dolibarr page access.
+if (empty($dolibarr_nocache)) header('Cache-Control: max-age=3600, public, must-revalidate');
+else header('Cache-Control: no-cache');
+
+
+if (! empty($_GET["lang"])) $langs->setDefaultLang($_GET["lang"]);	// If language was forced on URL by the main.inc.php
+$langs->load("main",0,1);
+$right=($langs->direction=='rtl'?'left':'right');
+$left=($langs->direction=='rtl'?'right':'left');
+?>
+
+body {
+    color: #000000;
+}
+
+li > a[selected], li > a:active {
+    background-image: url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/theme/default/img/listArrowSel.png'; ?>),
+    	url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/theme/default/img/selection.png'; ?>) !important;
+}
+
+li > a[selected="progress"] {
+    background-image: url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/theme/default/img/loading.gif'; ?>),
+    	url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/theme/default/img/selection.png'; ?>) !important;
+}
+
+/************************************************************************************************/
+
+body > .toolbar {
+    background: url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/theme/default/img/toolbar.png'; ?>) #6d84a2 repeat-x;
+}
+
+.button {
+    -webkit-border-image: url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/theme/default/img/toolButton.png'; ?>) 0 5 0 5;
+    -moz-border-image: url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/theme/default/img/toolButton.png'; ?>) 0 5 0 5;
+}
+
+.blueButton {
+    -webkit-border-image: url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/theme/default/img/blueButton.png'; ?>) 0 5 0 5;
+    -moz-border-image: url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/theme/default/img/blueButton.png'; ?>) 0 5 0 5;
+}
+
+#backButton {
+    -webkit-border-image: url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/theme/default/img/backButtonBrdr.png'; ?>) 0 8 0 14;
+    -moz-border-image: url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/theme/default/img/backButtonBrdr.png'; ?>) 0 8 0 14;
+    background: url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/theme/default/img/backButtonBack.png'; ?>) repeat-x;
+}
+
+
+.whiteButton {
+    -webkit-border-image: url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/theme/default/img/whiteButton.png'; ?>) 0 12 0 12;
+    -moz-border-image: url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/theme/default/img/whiteButton.png'; ?>) 0 12 0 12;
+    text-shadow: rgba(255, 255, 255, 0.7) 0 1px 0;
+}
+
+.redButton {
+    -webkit-border-image: url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/theme/default/img/redButton.png'; ?>) 0 12 0 12;
+    -moz-border-image: url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/theme/default/img/redButton.png'; ?>') 0 12 0 12;
+}
+
+.grayButton {
+    -webkit-border-image: url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/theme/default/img/grayButton.png'; ?>) 0 12 0 12;
+    -moz-border-image: url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/theme/default/img/grayButton.png'; ?>') 0 12 0 12;
+    color: #FFFFFF;
+}
+
+/************************************************************************************************/
+
+body > ul > li.group {
+	opacity:0.7;
+    background: url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/theme/default/img/listGroup.png'; ?>) repeat-x;
+}
+
+body > ul > li > a {
+    background: url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/theme/default/img/listArrow.png'; ?>) no-repeat right center;
+}
+
+/************************************************************************************************/
+    
+.dialog > fieldset {
+    background: url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/theme/default/img/toolbar.png'; ?>) #7388a5 repeat-x;
+}
+
+/************************************************************************************************/
+
+body > .panel {
+    background: #c8c8c8 url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/theme/default/img/pinstripes.png'; ?>);
+}
+
+.toggle {
+    border: 1px solid #888888;
+    background: #FFFFFF url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/theme/default/img/toggle.png'; ?>) repeat-x;
+}
+
+.toggle[toggled="true"] {
+    background: #194fdb url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/theme/default/img/toggleOn.png'; ?>) repeat-x;
+}
+
+.thumb {
+    background: #ffffff url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/theme/default/img/thumb.png'; ?>) repeat-x;
+}
+
+/************************************************************************************************/
+#preloader {
+    display: none;
+    background-image: url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/theme/default/img/loading.gif'; ?>),
+    	url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/theme/default/img/selection.png'; ?>),
+        url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/theme/default/img/blueButton.png'; ?>),
+        url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/theme/default/img/listArrowSel.png'; ?>),
+        url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/theme/default/img/listGroup.png'; ?>);
+}
+
+.toolbar > h1.titleImg {
+  background: url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/theme/default/img/title-img.png'; ?>) no-repeat top center;
+  color: rgba(0,0,0,0);
+}
+
+.backButtonImg {
+  width: 50px;
+  background: url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/theme/default/img/back-img.png'; ?>) no-repeat center left,
+              url(<?php echo DOL_URL_ROOT.'/theme/phones/iphone/theme/default/img/backButtonBack.png'; ?>) repeat-x top left !important;
+  color: rgba(0,0,0,0);
+}