added google watermark to landing page search box

frontend/templates/base.html

@@ -15,6 +15,8 @@
 	{% block base_js %}
 	<script type="text/javascript" src="/static/js/jquery-1.6.3.min.js"></script>
     {% endblock %}
+	<script type="text/javascript" src="/static/js/watermark_init.js"></script>
+	<script type="text/javascript" src="/static/js/watermark_change.js"></script>
     {% block extra_head %}
     {% endblock %}
 </head>
@@ -31,7 +33,7 @@
             <div class="js-search">
             <div class="js-search-inner">
                 <form action="{% url search %}" method="get">
-                    <input type="text" placeholder="Search for a book..." size="25" class="inputbox" name="q" value="{{ q }}">
+                    <input type="text" id="watermark" size="25" class="inputbox" name="q" value="{{ q }}">
                     <input type="button" onclick="this.form.searchword.focus();"  class="button" value="Search">
                 </form>
             </div>

frontend/templates/home.html

@@ -51,6 +51,10 @@ var $j = jQuery.noConflict();
 		});
 	});
 </script>
+
+<script type="text/javascript" src="/static/js/watermark_init.js"></script>
+<script type="text/javascript" src="/static/js/watermark_change.js"></script>
+
 {% endblock %}
 
 {% block topsection %}
@@ -113,7 +117,7 @@ var $j = jQuery.noConflict();
                         <div id="js-search">
                         	<label>What book would you give to the world? </label>
 				                <form action="{% url search %}" method="get">
-                				    <input type="text" placeholder="Search for a book..." size="25" class="inputbox" name="q" value="{{ q }}">
+                				    <input type="text" id="watermark" onfocus="imgfocus()" onblur="imgblur()" size="25" class="inputbox" name="q" value="{{ q }}">
                 				    <input type="button" onclick="this.form.searchword.focus();"  class="button" value="Search">
                					</form>
                         </div>

static/css/landingpage.css

@@ -269,7 +269,7 @@ h2.page-heading {
   float: left;
   padding: 0;
   margin: 5px 0 5px 20px;
-  background: none;
+  width: 175px;
 }
 #js-search input[type=button] {
   background: url(/static/images/landingpage/search-button.png) 0 0 no-repeat;

static/js/watermark_change.js

@@ -0,0 +1,9 @@
+function imgblur(){
+	if (document.getElementById('watermark').value == "") {
+		document.getElementById('watermark').style.background="url('/static/images/google_watermark.gif') no-repeat left center";
+	}
+}
+
+function imgfocus(){
+	document.getElementById('watermark').style.background="";
+}

static/js/watermark_init.js

@@ -0,0 +1,6 @@
+var $j = jQuery.noConflict();
+$j(document).ready(function() {
+	if (!$j('#watermark').val()) {
+		$j('#watermark').css({"background": "url('/static/images/google_watermark.gif') no-repeat left center"});
+	}
+});

static/less/landingpage.less

@@ -305,7 +305,7 @@ h2.page-heading {
 		float:left; 
 		padding:0; 
 		margin:5px 0 5px 20px; 
-		background:none;
+		width: 175px;
 	}
 	
 	&[type=button] {