images moved from css style to main.js

WebContent/main.css

@@ -113,7 +113,6 @@ html, body {
 	height:50px;
 	background-repeat:no-repeat;
 	background-position:center;
-	background-image:url("images/osrm-logo.png");		
 }
 #input-mask
 {
@@ -139,7 +138,6 @@ html, body {
 .styled-select
 {
 	position:absolute;
-	background: url("images/selector.png");
 	background-repeat:no-repeat;	
 	background-position: top right;
 	padding: 1px 1px 1px 1px;
@@ -404,61 +402,9 @@ html, body {
 	background-position:center;
 }
 
-#gui-toggle-out
-{
-	background-image:url("images/cancel.png");	
-}
-#gui-toggle-out:hover
-{
-	background-image:url("images/cancel_hover.png");
-}
-#gui-toggle-out:active
-{
-	background-image:url("images/cancel_active.png");
-}
-
-#gui-toggle-in
-{
-	background-image:url("images/restore.png");	
-}
-#gui-toggle-in:hover
-{
-	background-image:url("images/restore_hover.png");
-}
-#gui-toggle-in:active
-{
-	background-image:url("images/restore_active.png");
-}
-
-#gui-printer
-{
-	background-image:url("images/printer.png");
-}
 #gui-printer-inactive
 {
 	cursor:default;
-	background-image:url("images/printer_inactive.png");
-}
-#gui-printer:hover
-{
-	background-image:url("images/printer_hover.png");
-}
-#gui-printer:active
-{
-	background-image:url("images/printer_active.png");
-}
-
-.delete-marker
-{
-	background-image:url("images/cancel.png");
-}
-.delete-marker:hover
-{
-	background-image:url("images/cancel_hover.png");
-}
-.delete-marker:active
-{
-	background-image:url("images/cancel_active.png");
 }
 
 

WebContent/main.html

@@ -67,6 +67,7 @@ or see http://www.gnu.org/licenses/agpl.txt.
 <script src="base/OSRM.Via.js" type="text/javascript"></script>
 <script src="base/OSRM.Geocoder.js" type="text/javascript"></script>
 
+<script src="utils/OSRM.CSS.js" type="text/javascript"></script>
 <script src="utils/OSRM.JSONP.js" type="text/javascript"></script>
 <script src="localization/OSRM.Localization.js" type="text/javascript"></script>
 <script src="printing/OSRM.Printing.js" type="text/javascript"></script>

WebContent/main.js

@@ -23,6 +23,7 @@ or see http://www.gnu.org/licenses/agpl.txt.
 OSRM.init = function() {
 	OSRM.prefetchImages();
 	OSRM.prefetchIcons();
+	OSRM.prefetchCSSIcons();
 	
 	OSRM.Localization.init();
 	OSRM.GUI.init();
@@ -73,7 +74,9 @@ OSRM.prefetchImages = function() {
 		              	{id:'direction_8',						url:'images/sharp-left.png'},
 		              	{id:'direction_10',						url:'images/head.png'},
 		        		{id:'direction_11',						url:'images/round-about.png'},
-		        		{id:'direction_15',						url:'images/target.png'}
+		        		{id:'direction_15',						url:'images/target.png'},
+		        		{id:'osrm-logo',						url:'images/osrm-logo.png'},
+		        		{id:'selector',							url:'images/selector.png'}
 	               ];
 		
 	for(var i=0; i<image_list.length; i++) {
@@ -107,7 +110,34 @@ OSRM.prefetchIcons = function() {
 	}
 	
 	// special values for drag marker
-	OSRM.G.icons['marker-drag'] = new L.SwitchableIcon( {iconUrl: OSRM.G.images["marker-drag"].getAttribute("src"), iconSize: new L.Point(18, 18) } );	
+	OSRM.G.icons['marker-drag'] = new L.SwitchableIcon( {iconUrl: OSRM.G.images["marker-drag"].getAttribute("src"), iconSize: new L.Point(18, 18) } );
+};
+
+
+// set css styles for images
+OSRM.prefetchCSSIcons = function() {
+	var css_list = [
+	                	{ id:'#gui-printer-inactive',		image_id:'printer_inactive'},
+	                	{ id:'#gui-printer',				image_id:'printer'},
+	                	{ id:'#gui-printer:hover',			image_id:'printer_hover'},
+	                	{ id:'#gui-printer:active',			image_id:'printer_active'},
+	                	{ id:'#gui-toggle-in',				image_id:'restore'},
+	                	{ id:'#gui-toggle-in:hover',		image_id:'restore_hover'},
+	                	{ id:'#gui-toggle-in:active',		image_id:'restore_active'},
+	                	{ id:'#gui-toggle-out',				image_id:'cancel'},
+	                	{ id:'#gui-toggle-out:hover',		image_id:'cancel_hover'},
+	                	{ id:'#gui-toggle-out:active',		image_id:'cancel_active'},
+	                	{ id:'.delete-marker',				image_id:'cancel'},
+	                	{ id:'.delete-marker:hover',		image_id:'cancel_hover'},
+	                	{ id:'.delete-marker:active',		image_id:'cancel_active'},
+	                	{ id:'#input-mask-header',			image_id:'osrm-logo'},
+	                	{ id:'.styled-select',				image_id:'selector'}
+	                ];
+	
+	var stylesheet = OSRM.CSS.getStylesheet("main.css");
+	for(var i=0; i<css_list.length; i++) {
+		OSRM.CSS.insert( stylesheet, css_list[i].id, "background-image:url("+ OSRM.G.images[css_list[i].image_id].getAttribute("src") + ");" );
+	}
 };
 
 

WebContent/printing/OSRM.Printing.js

@@ -173,6 +173,18 @@ printWindowLoaded: function(){
 	var print_window = OSRM.G.printwindow;
 	var print_document = print_window.document;
 	
+	// add css images
+	var css_list = [
+                	{ id:'#gui-printer-inactive',		image_id:'printer_inactive'},
+                	{ id:'#gui-printer',				image_id:'printer'},
+                	{ id:'#gui-printer:hover',			image_id:'printer_hover'},
+                	{ id:'#gui-printer:active',			image_id:'printer_active'}
+                ];
+	var stylesheet = OSRM.CSS.getStylesheet("printing.css", print_document);
+	for(var i=0; i<css_list.length; i++) {
+		OSRM.CSS.insert( stylesheet, css_list[i].id, "background-image:url("+ "../" + OSRM.G.images[css_list[i].image_id].getAttribute("src") + ");" );
+	}	
+	
 	// localization 
 	print_document.getElementById('description-label').innerHTML = OSRM.loc( "ROUTE_DESCRIPTION" );
 	print_document.getElementById('overview-map-label').innerHTML = OSRM.loc( "OVERVIEW_MAP" );	

WebContent/printing/printing.css

@@ -213,22 +213,9 @@ div.label
 	background-position:center;
 }
 
-#gui-printer
-{
-	background-image:url("../images/printer.png");
-}
-#gui-printer:hover
-{
-	background-image:url("../images/printer_hover.png");
-}
-#gui-printer:active
-{
-	background-image:url("../images/printer_active.png");
-}
 #gui-printer-inactive
 {
 	cursor:default;
-	background-image:url("../images/printer_inactive.png");
 }
 
 

WebContent/utils/OSRM.CSS.js

@@ -0,0 +1,40 @@
+/*
+This program is free software; you can redistribute it and/or modify
+it under the terms of the GNU AFFERO General Public License as published by
+the Free Software Foundation; either version 3 of the License, or
+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 Affero 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
+or see http://www.gnu.org/licenses/agpl.txt.
+*/
+
+// OSRM CSS manipulator
+// [edit css styles]
+
+OSRM.CSS = {
+	getStylesheet: function(filename, the_document) {
+		the_document = the_document || document;
+		var stylesheets = the_document.styleSheets;
+		for(var i=0, size=stylesheets.length; i<size; i++) {
+			console.log(stylesheets[i].href);
+			if( stylesheets[i].href.indexOf(filename) >= 0)
+				return stylesheets[i];
+		}
+		return null;
+	},
+	
+	insert: function(stylesheet, selector, rule) {
+		if( stylesheet.addRule ){
+			stylesheet.addRule(selector, rule);
+		} else if( stylesheet.insertRule ){
+            stylesheet.insertRule(selector + ' { ' + rule + ' }', stylesheet.cssRules.length);
+		}
+	}		
+};