From 8346ca30b1b7677b694b6a4f1acc3268eeb4173a Mon Sep 17 00:00:00 2001
From: Bryan Berry <bryan@olenepal.org>
Date: Sun, 14 Feb 2010 11:55:06 +0000
Subject: add back up-to-date js,css, and examples

---
diff --git a/css/kDoc.css b/css/kDoc.css
index fe0fe41..4830e03 100755
--- a/css/kDoc.css
+++ b/css/kDoc.css
@@ -1,9 +1,10 @@
 #kDoc{
     background-color: white;
-  /*  width: 100%;
-    height: 100%;*/
+    width: 100%;
+    height: 100%;
 }
 
+/*
 #zoomIn{
     background-image: url(epaath_images/btn_plus.png);
 }
@@ -19,6 +20,7 @@
 #zoomOut:hover{
     background-image: url(epaath_images/btn_minus_hover.png);
 }
+*/
 
 #iframeLessonPlan{
     width:100%;
diff --git a/css/kStart.css b/css/kStart.css
index 36b53c5..b5c07aa 100755
--- a/css/kStart.css
+++ b/css/kStart.css
@@ -8,13 +8,16 @@
 }
 
 #kStart .center{
-    width: 100%;
-    float: left;
-    text-align: center;	   
+   /* width: 100%;
+    float: left;*/
+    width: 800px
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;	  
 }
 
 #kStart #top{
-    height: 15%;
+    height: 13%;
     width: 100%;
     color: #8a72c4;
 }
@@ -56,34 +59,12 @@
     color: white;
     height: 70%;
     width: 90%;
-    margin-left: 60px;
-    margin-right: 60px;
+    margin-left: auto;
+    margin-right: auto;
     position:relative;
-   /* background-color: blue;
-    opacity: 0.7;*/
-    background: transparent;
+    background-color: rgba(0,0,200,0.3);
 }
 
-	#blueOverlay{
-	    position:absolute;
-	    background-color: #8a72c4;
-	    width: 100%;
-	    height: 100%;
-	    border: 2px solid white;
-	    -moz-border-radius: 10px;
-	    -webkit-border-radius: 10px;
-	    opacity: 0.7;
-	    z-index: 10;
-	}
-
-	#textOverlay{
-	    position:absolute;
-	    width: 100%;
-	    height: 100%;
-	    opacity: 1.0;
-	    z-index:11;
-	}
-
 	#grade{
 	    margin-top: 0.5em;
 	}
@@ -167,22 +148,24 @@ width: 100%;
 color: white;
 }
 
-	#logo>div{
-	    width: 150px;
+	#logo{
+	    display: block;
+	    width: 320px;
 	    height: 60px;
+	    float: none;
 	    background-image: url(epaath_images/ole_logo.png);
 	    background-repeat: no-repeat;
-	    text-align:center;
-	    -webkit-background-size: 100% 100%;
-	    -moz-background-size:100% 100%;
+	   /* text-align:center;*/
+	   /* -webkit-background-size: 100% 100%;
+	    -moz-background-size:100% 100%;*/
 	    margin-left:auto;
 	    margin-right:auto;
-	    margin-top: 0.4em;
+	    margin-top: 0.8em;
 	}
 
 
 #kStart #copyright{
-    position: absolute;
+    position: fixed;
     left: 5px;
     bottom: 0px;
     color: white;
diff --git a/css/karma.css b/css/karma.css
index bc27c51..607bcbb 100755
--- a/css/karma.css
+++ b/css/karma.css
@@ -2,134 +2,42 @@
 @import url(./ui.base.css);
 @import url(./theme/jquery-ui-1.7.2.custom.css);
 @import url(./ui.dialog.css);
-@import url(./ui.kFooter.css);
 @import url(./ui.resizable.css);
 @import url(./ui.feedback.css);
 
-/*  special hack for the curren karma-loader notification  */
+/*  special hack for the current karma-loader notification  */
 @media screen {
 	#karma-loader{
-		position:fixed;
+		position:absolute;
 		top:0;
 		left:0;
 		padding: 2px 2px 1px 5px;
-		font-family: arial;
 		font-size: 12px;
 		background: #0066cc;
 		color: #ffffff;
 		
 	}
-	#karma-loader.status{
-		
+	#karma-loader.status{		
 		left:110px;
-		
 	}
 }
 
 body{
-    margin:0px;
+    padding: 0px;
+    margin: 0 auto 0 auto;
+    width: 1200px;
+    height: 900px; 
     overflow: hidden;
+    position: relative;
+    background-color: purple;
 }
 
-
-#kHeader{
-    background-image: url('./epaath_images/bg_header.png');
-    height: 75px;
-    width: 100%;
+#kMain {
+    width: 1200px;
+    height: 760px;
     float: left;
-    background-repeat: none;
-    -moz-background-size: 100% 100%;
-    -webkit-background-size: 100% 100%;
-
+    clear: both;
+    background-color: white;
 }
 
-	#kHeader .left{
-    		 float: left;
-	}
-
-	#kHeader .right{
-    		 float: right;
-	}
-
-	#kHeader>div{
-		display:inline;
-		margin-left: 0.2em;
-		margin-right:0.2em
-	}
-
-	#kHeader .kHeaderBtn{
-  		 width: 60px;
-		 height: 60px;
-		 margin-top: 7px;
-		 cursor:pointer;
-	}
-	
-	#kHeaderBackBtn div{
-		background-image:url(./epaath_images/btn_back.png);
-	}		
 
-	#kHeaderBackBtn div:hover{
-		background:url('./epaath_images/btn_back_hover.png');
-	}
-
-	#kHeaderBackBtn div{
-		background-image:url(./epaath_images/btn_back.png);
-	}
-
-	#kHeaderBackBtn div:hover{
-		background:url('./epaath_images/btn_back_hover.png');
-	}
-
-	#kHeaderHelpBtn div{
-		background-image:url(./epaath_images/btn_help.png);
-	}
-
-	#kHeaderHelpBtn div:hover{
-		background:url(./epaath_images/btn_help_hover.png);
-	}
-
-	#kHeaderOleBtn div{
-	    background-image:url(./epaath_images/btn_ole.png);
-	}
-
-	#kHeaderOleBtn div:hover{
-	    background:url(./epaath_images/btn_ole_hover.png);
-	}
-
-	
-#kHeaderLessonTitle {
-    font-family: Verdana, Arial, Helvetica, sans-serif;
-    font-size: larger;
-    font-weight: bold;
-    color: #FFFFFF;
-    margin-left: 2em;
-    margin-top: 18px;
-    border:0.2em solid black;
-    padding-left:0.5em;
-    padding-right:0.5em;
-    padding-top: 0.2em;
-    padding-bottom: 0.2em;
-    -moz-border-radius:1.3em;
-    -webkit-border-radius: 1.3em;
-}
-
-#kHelpText{
-    font-size:small;
-}
-
-
-
-/*
-#kHelpText>div:first>span:first{
-    font-size:larger;
-}*/
-
-div.ui-dialog {
-    margin-top: 10px;
-}
-
-.ui-dialog [role=button]{
- height:48px;
- width: 48px;
- top: 20%;
-}
diff --git a/css/ui.kFooter.css b/css/ui.kFooter.css
index 5cae39d..db7edba 100755
--- a/css/ui.kFooter.css
+++ b/css/ui.kFooter.css
@@ -1,66 +1,56 @@
-.ui-kFooter-container{
+.ui-kFooter{
     background-image: url('./epaath_images/bg_footer.png');
-    background-repeat: no-repeat;
-    -moz-background-size: 100% 100%;
-    -webkit-background-size: 100% 100%;
+    background-repeat: repeat;
+    height: 70px;
     width: 100%;
-    height: 75px;
-    position: absolute;
-    bottom: 0px;
-    float:left;
+    margin:0;
+    padding: 0;
+    float: left;
+    clear: both;
     border-style: none;
+    color: #FFFF00;
 }
 
-.ui-kFooter-spacing{
+
+.ui-kFooter>ul{
+   margin-left: 0px;
+   padding-left: 5px;
+   list-style: none;
+}
+.ui-kFooter>ul>li{
     display:inline;
-    margin-top: 10px;
-    margin-right: 0.4em;
+    margin-right: 10px;
+    margin-left: 0px;
 }
 
-.ui-kFooter-left{
+
+.ui-kFooter .left{
     float: left;
 }
 
-.ui-kFooter-right{
+.ui-kFooter .right{
     float: right;
 }
 
-.ui-kFooter-text,.ui-kFooter-number{
-    margin-top: 15px;
-}
-
-.ui-kFooter-text span{
-    color: #FFFF00;
-    margin-left: 0.2em;
-}
-
-.ui-kFooter-number span {
+.ui-kFooter .number{
     background-color:white;
     color: black;
     padding-left:0.4em;
     padding-right:0.4em;
 }
 
-.ui-kFooter-button{
+
+.ui-kFooter button{
     cursor:pointer;
-    height: 55px;
-}
+    margin-top: -10px;
+} 
 
-.ui-kFooter-icon{
-float: left; 
+.ui-kFooter button span{
+   float: left;
 }
 
-.ui-kFooter-button-text {
-float: left;
-color:  #FFFFFF;
+.ui-kFooter button .text{
+color:  #FFA000;
 padding-top: 10px;
+font-weight: bold;
 }
-
-.ui-state-default.ui-kFooter-button{
-    background:#ff7c0f;
-    border: 2px solid #FFFF00;
-}
-
-.ui-state-hover.ui-kFooter-button{
-    background:#ffb70f;
-}
\ No newline at end of file
diff --git a/examples/6_English_matchingProductsAndWords/css/lesson.css b/examples/6_English_matchingProductsAndWords/css/lesson.css
index 6bc2bdc..3fe81fa 100755
--- a/examples/6_English_matchingProductsAndWords/css/lesson.css
+++ b/examples/6_English_matchingProductsAndWords/css/lesson.css
@@ -1,147 +1,48 @@
-@CHARSET "ISO-8859-1";
 @CHARSET "UTF-8";
 /****** Page Styles ****/
 
-body {
-	font-family: Verdana, Arial, Helvetica, sans-serif;
-	font-size: 10pt;
-	margin: 0px;
-	background-color: #FFFFCC;
-}
-#header {
-	background-image: url(../assets/image/bg_header.png);
-	background-repeat: repeat-x;
-	height: 89px;
-	width: 100%;
-	position: absolute;
-	left: 0px;
-	top: 0px;
-}
-#topbtn_left {
-	float: left;
-	height: 60px;
-	width: 60px;
-	padding-top: 13px;
-	padding-left: 5px;
-}
-	
-	
-	#linkBack{
-			width: 60px;		height: 59px;
-			background:url(../assets/image/btn_back.png);
-		}
-	#linkBack:hover{
-			background:url(../assets/image/btn_back_hover.png);
-		}
-	
-#lesson_title {
-	float: left;
-	font-family: Verdana, Arial, Helvetica, sans-serif;
-	font-size: 16pt;
-	font-weight: bold;
-	color: #FFFFFF;
-	margin-left: 10px;
-	background-image: url(../assets/image/bg_title_block.png);
-}
-#topbtn_right {
-	float: right;
-	height: 60px;
-	width: 60px;
-	padding-top: 13px;
-	padding-right: 5px;
-}
-		#linkHelp{
-			width: 60px;		height: 60px;
-			background:url(../assets/image/btn_help.png);
-		}
-		#linkHelp:hover{
-			background:url(../assets/image/btn_help_hover.png);
-		}
-		#linkOle{
-			width: 60px;		height: 60px;
-			background:url(../assets/image/btn_ole.png);
-		}
-		#linkOle:hover{
-			background:url(../assets/image/btn_ole_hover.png);
-		}
-		#linkNext{
-			width: 60px;		height: 60px;
-			background:url(../assets/image/btn_next.png);
-		}
-		#linkNext:hover{
-			background:url(../assets/image/btn_next_hover.png);
-		}
-#footer {
-	background-image: url(../assets/image/bg_footer.png);
-	background-repeat: repeat-x;
-	position: absolute;
-	height: 69px;
-	width: 100%;
-	left: 0px;
-	bottom: 0px;
-}
-#score_box {
-	float: left;
-	padding-left: 10px;
-	padding-top: 10px;
-	font-family: Verdana, Arial, Helvetica, sans-serif;
-	color: #FFFF00;
-	font-size: 16pt;
-	font-weight: bold;
-}
-#botbtn_right {
-	float: right;
-	height: 55px;
-	width: 251px;
-	padding-right: 5px;
-	padding-top: 5px;
+
+#clickBox{
+    margin-top: -5px;
+    padding:4px;
+    border:2px dashed blue;
+    background-color:white;
+    color:black;
 }
-	#linkStart{
-			width: 251px;		height: 55px;
-			background:url(../assets/image/btn_start.png);
-		}
-		#linkStart:hover{
-			background:url(../assets/image/btn_start_hover.png);
-		}
-		#linkStart:active{
-			background:url(../assets/image/btn_start_mouse_down.png);
-		}
-		#linkPlayAgain{
-			width: 251px;		height: 55px;
-			background:url(../assets/image/btn_play_again.png);
-		}
-		#linkPlayAgain:hover{
-			background:url(../assets/image/btn_play_again_hover.png);
-		}
-		#linkPlayAgain:active{
-			background:url(../assets/image/btn_play_again_mouse_down.png);
-		}
 
 /**** End of the page style ****/
 
 /**** Game Styles  ****/
 
-a{
-	color:white;
+#content a{
+	float:left;
+	width: 9em;
+	height: 9em;
+	padding: 0;
+	background-color: #99E6FF;
+	margin: 0 0.6em 0.6em 0;
+	text-align:center;
+	font-size: 6em/8em;
+	font-weight:bold;
+	color:black;	
+	
 }
-#currentTitle{
-	width: 150px;
-	height: 80xp;
-	font:25px/30px "Courier New", Courier, monospace;	
-	font-weight: bold;
-	color: red;
+
+#content a>div{
+    margin: auto auto auto auto;
+    line-height: 9em;
 }
+
 #content{	
-	margin: 0px auto;
-	margin-top: 90px;
-	width: 95%;
-	height: 375px;
-}
-#section{	
-	margin: 0px auto;
-	width: 620px;			
+	margin-top: 2em; 
+	margin-right: auto;
+	margin-bottom: 0; 
+	margin-left:auto;
+	width: 78%;
+	height: 100%;
 }
 
+
 #gameOver{
 	margin-top:150px;
 	text-align:center;
@@ -165,21 +66,11 @@ a{
 	
 }
 
+
 .default{
 	float:left;
-    width: 90px;
-    height: 90px;
-	background-color: #99E6FF;
-	margin: 0.2em;
-	text-align:center;
-	font: 15px/85px Verdana, Geneva, Arial, Helvetica, sans-serif;
-	font-weight:bold;
-	color:black;	
-}
-.showText{
-	float:left;
-    width: 90px;
-    height: 90px;
+	width: 90px;
+	height: 90px;
 	background-color: #99E6FF;
 	margin: 0.2em;
 	text-align:center;
@@ -187,73 +78,11 @@ a{
 	font-weight:bold;
 	color:black;	
 }
+
 .matched{
 	float:left;
-    width: 90px;
-    height: 90px;
+	width: 9.6em;
+	height: 9.6em;
 	background-color: blue;
 }
 
-#timerBar {
-	float: left;
-	width: 215px;
-	height:35px;
-	padding-left: 10px;
-	padding-top: 0px;
-	font-family: Verdana, Arial, Helvetica, sans-serif;
-	color: #FFFF00;
-	font-size: 16pt;
-	font-weight: bold;
-}
-#timerTitle{
-	float: left;
-	margin-top: 20px;
-	width: 50px;
-	height: 35px;
-}
-
-.timerBoxes{   /* Show the timer running after the game has began.... */
-float:right;
-margin: 0.5em 0 0 0.1em;
-width: 35px;
-height: 30px;
-border: 2px dotted green;
-padding: 3px;
-color: blue;
-font : bold 25px Arial Black, Times New Roman;
-background: #ACC;
-}
-
-#clickDisplay{
-	float: left;
-	width: 150px;
-	height:35px;
-	margin-left: 50px;
-	padding-left: 20px;
-	padding-top: 0px;
-	font-family: Verdana, Arial, Helvetica, sans-serif;
-	color: #FFFF00;
-	font-size: 16pt;
-	font-weight: bold;
-}
-#clickTitle{
-	float: left;
-	margin-top: 20px;
-	width: 50px;
-	height: 35px;
-	
-}
-
-#clickBox{
-float:right;
-margin: 0.5em 0 0 0.1em;
-height: 30px;
-border: 2px dotted green;
-padding: 3px;
-color: red;
-font : bold 25px Arial Black, Times New Roman;
-background: #ACC;
-}
-
-
-
diff --git a/examples/6_English_matchingProductsAndWords/index.html b/examples/6_English_matchingProductsAndWords/index.html
index b6f7057..b6a84f8 100755
--- a/examples/6_English_matchingProductsAndWords/index.html
+++ b/examples/6_English_matchingProductsAndWords/index.html
@@ -1,50 +1,37 @@
 <!DOCTYPE html>
 <head>
 	<title>Class 6 Maths Matching Products and Words</title>
-	<meta name="keywords" content="karma,javascript,html5,sugar,sugarlabs,gsoc,ole,nepal" />
-	<link type="text/css" rel="stylesheet" href="css/lesson.css" />
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<link type="image/ico" rel="icon" href="../../assets/default/image/favicon.ico" /> 
-	<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
+	<link type="text/css" rel="stylesheet" href="../../css/karma.css" />
+	<link type="text/css" rel="stylesheet" href="../../css/ui.kHeader.css" />
+	<link type="text/css" rel="stylesheet" href="../../css/ui.kFooter.css" />
+	<link type="text/css" rel="stylesheet" href="css/lesson.css" />
+
+	<script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script>
+	<script type="text/javascript" 
+		src="../../js/ui.core-draggable-resizable-dialog.js"></script>
+	<script type="text/javascript" src="../../js/ui.kHeader.js"></script>
+	<script type="text/javascript" src="../../js/ui.kFooter.js"></script>
+	<script type="text/javascript" src="../../js/ui.feedback.js"></script>
+	<script type="text/javascript" src="../../js/karma.js"></script>
 	<script type="text/javascript" src="js/lesson.js"></script>
+
 </head>
 <body>
-	<div id="header">
-		<div id="topbtn_left"><a href="http://olenepal.org"><div id="linkOle"></div></a></div>
-		<div id="lesson_title">
-			<img src="assets/image/title_block_lt.png" width="33" height="89" align="absmiddle" />
-				Matching Products and Words <span id="currentTitle"></span> 
-			<img src="assets/image/title_block_rt.png" width="33" height="89" align="absmiddle" />
-		</div>
-		<div id="topbtn_right"><a href="#"><div id="linkHelp"></div></a></div>
-		<div id="topbtn_right"><a href="http://olenepal.org"><div id="linkOle"></div></a></div>		
-	</div>
-
-	<div id="content">
-		<div id="section"></div>
-		<div id="help"></div>
-	</div>
+	<div id="kHeader"></div>
 	<form name="delayForm">
 		<input type="hidden" name="delayval" size="5">
 	</form>
-	
+	<div id="kMain"> 
+	  <div id="content">
+            <div id="section"></div>
+	  </div>
+	</div>
 
-	<div id="footer">
-		<!-- Timer Section  -->
-		<div id ="timerBar">
-			<div id="timerTitle">Timer:</div>
-			<div id="timerBox1"  class="timerBoxes"></div>
-			<div id="timerBox2"  class="timerBoxes"></div>
-			<div id="timerBox3"  class="timerBoxes"></div>			
-		</div>
-		<div id="clickDisplay">
-			<div id="clickTitle">Clicks:</div>
-			<div id="clickBox"></div>
-		</div>
-		
-			<div id="botbtn_right"><a href="#"><div id="linkStart"></div></a></div>				
-			<div id="botbtn_right"><a href="#"><div id="linkPlayAgain"></div></a></div>
-		
+	<div id="kFooter" >
+	    <div id="clickTitle">Clicks:</div>
+	    <div id="clickBox"></div>
 	</div>
 </body>
 </html>
diff --git a/examples/6_English_matchingProductsAndWords/js/lesson.js b/examples/6_English_matchingProductsAndWords/js/lesson.js
index 6d8de62..a0f62af 100755
--- a/examples/6_English_matchingProductsAndWords/js/lesson.js
+++ b/examples/6_English_matchingProductsAndWords/js/lesson.js
@@ -1,4 +1,5 @@
 $(document).ready(function() {
+
 	var i,j,flag;
 	var s=0;	var m=0;	var h=0;   //varoiables for timer
 	var clickedObjects = [];   //array storing the clicks of the two succesive clicks
@@ -14,7 +15,18 @@ $(document).ready(function() {
 	var clickCounter = 0;
 	var NUM_OBJECTS = 24;  //total number of objects in the game
 	var products_words = new Array('Cow','Hen','Wood','Bee','Tap','House','Sheep','Cloth','Lamp','Leather','Wheat','Sugar','Milk','Egg','Chair','Honey','Water','Brick','Wool','Shirt','Light','Shoes','Flour','Sweet');
-	var section = $('#section');	
+	//var section = $('#section');	
+	var $content = $('#content');
+		      
+	Karma.scaleWindow();
+	$('#kHeader').kHeader({title:"English: Matching Words with Products"});
+	var $kFooter = $('#kFooter').kFooter({scoreboard: false, startButton: true,
+		pauseButton: true, restartButton: true, timer: true});
+
+	$kFooter.bind('kFooterStart', game);  		      
+	$kFooter.bind('kFooterRestart', game);
+		      
+	    
 
 
 	var checkTime = function(timePara){
@@ -24,84 +36,26 @@ $(document).ready(function() {
 	    }
 	    return timePara;
 	};
-
 	
-	var startTimer = function(){
-				s=checkTime(s);					
-				m=checkTime(m);
-				h=checkTime(h);
-				clickCounter = checkTime(clickCounter);
-				document.getElementById('clickBox').innerHTML=clickCounter;
-				document.getElementById('timerBox1').innerHTML=s;
-				document.getElementById('timerBox2').innerHTML=m;
-				document.getElementById('timerBox3').innerHTML=h;
-				
-	};
-	
-	var increaseTime = function(){
-	    if(play == 1){
-			if(restart == 1){
-			s = 0;
-			m = 0;
-			h = 0;
-			}
-		s++;
-		if(s>60){
-		    m++;
-		    m=checkTime(m);
-		    document.getElementById('timerBox2').innerHTML=m;
-		    s = 0;
-		}
-		if(m>60){
-		    h++; 
-		    h=checkTime(h);
-		    document.getElementById('timerBox3').innerHTML=h;
-		    
-		    m=0;
-		    
-		}				
-		s=checkTime(s);					
-		
-		document.getElementById('timerBox1').innerHTML=s;
-		
-		var t=setTimeout(function(){increaseTime();},1000);
+	var generate_random_objects_no = function(){
+	    
+	    for(i=1; i<NUM_OBJECTS; i++){
+		objrand[i] = i;
 	    }
-	};
 
-	
-
-	
+	    objrand = Karma.shuffle(objrand);
 
-	var generate_random_no = function()	{                //generate random number
-		var rand_no = Math.floor(NUM_OBJECTS*Math.random());
-		return rand_no;
-	};
-	
-	var generate_random_objects_no = function(){
-		
-		objrand[0]=generate_random_no();   
-		for(i=1; i<NUM_OBJECTS; i++){
-			do{
-				flag = 0;
-				objrand[i] = generate_random_no();
-				for(j=0; j<i; j++){
-					if(objrand[i]===objrand[j]){
-						flag++;
-					}
-				}
-			}while(flag != 0 );  //end of do while loop	
-		}
+	    
 		
 	};
-	//alert(objrand);
 	
 
 	var check_game_over = function(){
 		if(numMatched === NUM_OBJECTS){   //show all
 			play = 0;
-			$('#section').html('');
-			$('#section').append('<div id="gameOver">GAME OVER<br/>Congratulations!!!</div>');
-			$('#section').append('<div id="gameOverInfo">You have completed the game in <span class="specialText">'+clickCounter+
+			$('#content').html('');
+			$('#content').append('<div id="gameOver">GAME OVER<br/>Congratulations!!!</div>');
+			$('#content').append('<div id="gameOverInfo">You have completed the game in <span class="specialText">'+clickCounter+
 					'</span> clicks within  <span class="specialText">'+h+'</span> hour  <span class="specialText">'+m+
 					'</span> minutes and  <span class="specialText">'+s+'</span> seconds .</div>');
 		}
@@ -117,6 +71,7 @@ $(document).ready(function() {
 		    clickCounter++;
 		    clickCounter = checkTime(clickCounter);  //for showing format as 1 for 01
 		    $("#clickBox").html(clickCounter);
+
 		    show_processed_image();
 		    
 		    return true;
@@ -211,9 +166,9 @@ $(document).ready(function() {
 	};
 
 	var assignSquares = function (square){	    
-	    section.append('<a href="#"></a>');
-	    $('#section a:last-of-type').append('<div class="default" id="object'+square+'"></div>'); 	
-	    $('#section a:last-of-type').click(function(){		    
+	    $content.append('<a href="#"></a>');
+	    $('#content a:last-of-type').append('<div class="default" id="object'+square+'"></div>'); 	
+	    $('#content a:last-of-type').click(function(){		    
 		    store_clicked_object(square);
 		});
 	};
@@ -225,27 +180,20 @@ $(document).ready(function() {
 		clickCounter = 0;
 		matchedObjects = [];
 		s=0;	m=0;	h=0;   
-		$('#section').html('');
-		$('#timerBox1').html('');$('#timerBox2').html('');$('#timerBox3').html('');
+		$('#content').html('');
+		//$('#timerBox1').html('');$('#timerBox2').html('');$('#timerBox3').html('');
 		$('#clickBox').html('00');
 		generate_random_objects_no();
-		startTimer();
+		//startTimer();
 		var square;
 		for(i=0; i<NUM_OBJECTS; i++){
 		    assignSquares(i);
 		}
 		play = 1;
-		increaseTime();		
+		//increaseTime();		
 	}
-	$('#linkStart').click(function(){
-		game();
-	});
-
-	$('#linkPlayAgain').click(function(){
-		game();
-		
-	});
-	$('#section').html('');
+	
+	$('#content').html('');
 	$('#clickBox').html('00');
 	//game();
 
diff --git a/examples/English_Animal_Identification/css/lesson.css b/examples/English_Animal_Identification/css/lesson.css
index 75bba59..883b4c3 100755
--- a/examples/English_Animal_Identification/css/lesson.css
+++ b/examples/English_Animal_Identification/css/lesson.css
@@ -1,43 +1,38 @@
 @CHARSET "UTF-8";
-body {
-  background: url(../assets/image/background.png) no-repeat;
-  width: 1200px;
-  height: 884px;
-  -moz-background-size: 100% 100%;
-  -webkit-background-size: 100% 100%;
-}
-
-
-#gameArea{
-	margin-top:5%;
-	margin-left: 10%;
-	float: left;
-	width: 50%
-	padding:10px;
+#kMain {
+    background: url(../assets/image/background.png) no-repeat;
+    width: 1200px;
+    height: 900px;
+    -moz-background-size: 100% 100%;
+    -webkit-background-size: 100% 100%;
+    float: left;
+    clear: both;
 }
 
 #questionBox{
 	color: blue;
-	width: 300px;
+	/*width: 300px; */
+	width: 30%;
 	font: "Helvetica", Verdana, Geneva, Arial, sans-serif;
 	font-weight: bold;
 	font-size: 2em;
+	margin-top: 10%;
+	margin-left: 15%;
+	
 	
 }
 .imageBox{
-	margin-top: 25px;
-	margin-left: 30px;
+	margin-top: 2%;
+	margin-left: 20%;
 	width: 220px;
 	height: 220px;
-	padding: 10px;
 }
 
 #options{
-	margin-left:25px;
-	margin-top:50px;
+	margin-left:5%;
+	margin-top:2%;
 	width:600px;
 	height:80px;
-	padding: 10px;
 }
 
 .optImg{
diff --git a/examples/English_Animal_Identification/index.html b/examples/English_Animal_Identification/index.html
index 5f80bb1..faa7301 100755
--- a/examples/English_Animal_Identification/index.html
+++ b/examples/English_Animal_Identification/index.html
@@ -7,12 +7,18 @@
 
 	<link type="image/ico" rel="icon" href="../../assets/image/favicon.ico" />
 	<link type="text/css" rel="stylesheet" href="../../css/karma.css" />
+	<link type="text/css" rel="stylesheet" href="../../css/ui.kHeader.css" />
+	<link type="text/css" rel="stylesheet" href="../../css/ui.kFooter.css" />
 	<link type="text/css" rel="stylesheet" href="css/lesson.css" />
 
 	<script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script>
+	<script type="text/javascript" src="../../js/jquery.i18n.js"></script>
+	<script type="text/javascript" src="../../js/jquery.i18n.ne.json"></script>
 	<script type="text/javascript" 
 		src="../../js/ui.core-draggable-resizable-dialog.js"></script>
+	<script type="text/javascript" src="../../js/ui.kHeader.js"></script>
 	<script type="text/javascript" src="../../js/ui.kFooter.js"></script>
+	<script type="text/javascript" src="../../js/ui.kFooter.ne.json"></script>
 	<script type="text/javascript" src="../../js/ui.feedback.js"></script>
 	<script type="text/javascript" src="../../js/karma.js"></script>
 	<script type="text/javascript" src="js/lesson.js"></script>
@@ -20,36 +26,13 @@
 </head>
 <body>
 	<div id="kHeader">
-	    <div id="kHeaderBackBtn" class="left">
-	      <a href="../../list.html">
-		<div class="kHeaderBtn">
-		</div>
-	      </a>
-	    </div>
-	    <div id="kHeaderLessonTitle" class="left">
-	     Animal Identification
-	    </div>
-	    <div id="kHeaderHelpBtn" class="right">
-	      <a>
-		<div class="kHeaderBtn">
-		</div>
-	      </a>
-	    </div>
-	    <div id="kHeaderOleBtn" class="right">
-	      <a href="http://olenepal.org" title="साझा शिक्षा ई-पाटी">
-		<div id="linkOle" class="kHeaderBtn">
-		</div>
-	      </a>
-	    </div>
-	    
 	</div>
 
 	<!-- Put the help text here -->
-	<div id="kHelpText" title="Help Title"> Help text here</div>
+	<div id="kHelp" title="Help Title"> Help text here</div>
 
 	<div id="feedback"></div>
-
-	<div id="gameArea">
+	<div id="kMain">
 		<div id="questionBox">What is this?</div>
 		<img class = "imageBox" id="imgObject" src="" alt=""/>
 		
diff --git a/examples/English_Animal_Identification/js/lesson.js b/examples/English_Animal_Identification/js/lesson.js
index 8ddb02d..ecbe8aa 100755
--- a/examples/English_Animal_Identification/js/lesson.js
+++ b/examples/English_Animal_Identification/js/lesson.js
@@ -6,8 +6,9 @@ $(document).ready(
 			{'name':'incorrect','file':'incorrect.ogg'}
 		]});
 
-	k.scaleToViewport();
-		  
+    k.scaleWindow();
+    $.i18n.setLocale('ne');
+	
     k.ready(
 	function(){ 	      
 
@@ -34,6 +35,9 @@ $(document).ready(
 	    
 	    $('#kHeaderHelpBtn').click(function(){ $help.dialog('open');});
 
+	    
+	    $('#kHeader').kHeader({'title': 'English Animal Identification'});
+
 	    var kFooter = $('#kFooter').kFooter({'winningScore': 6});
 	    kFooter.bind('kFooterWinGame', 
 		function(){
diff --git a/examples/English_Animal_Identification/kDoc.html b/examples/English_Animal_Identification/kDoc.html
index 4e2aa5e..efe2890 100755
--- a/examples/English_Animal_Identification/kDoc.html
+++ b/examples/English_Animal_Identification/kDoc.html
@@ -4,51 +4,45 @@
   <title>Lesson Plan for English Animal Identification</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   <link type="image/ico" rel="icon" href="../../assets/image/favicon.ico" />
-  <link type="text/css" rel="stylesheet" href="../../css/kDoc.css" />
   <link type="text/css" rel="stylesheet" href="../../css/karma.css" />
+  <link type="text/css" rel="stylesheet" href="../../css/ui.kHeader.css" />
+  <link type="text/css" rel="stylesheet" href="../../css/kDoc.css" />
   <script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" 
 		src="../../js/ui.core-draggable-resizable-dialog.js"></script>
   <script type="text/javascript" src="../../js/karma.js"></script>
+  <script type="text/javascript" src="../../js/ui.kHeader.js"></script>  
   <script type="text/javascript" src="../../js/kDoc.js"></script>
 
 </head>
 <body id="kDoc">
   <div id="kHeader">
-	    <div id="kHeaderBackBtn" class="left">
-	      <a>
-		<div class="kHeaderBtn">
-		</div>
-	      </a>
-	    </div>
-	    <div id="kHeaderLessonTitle" class="left">
-	     Animal Identification
-	    </div>
-	    <div id="zoomIn" class="left kHeaderBtn">
-	    </div>
-	    <div id="zoomOut" class="left kHeaderBtn">
-	    </div>
-	    <div id="kHeaderHelpBtn" class="right">
-	      <a>
-		<div class="kHeaderBtn">
-		</div>
-	      </a>
-	    </div>
-	    <div id="kHeaderOleBtn" class="right">
-	      <a href="http://olenepal.org" title="साझा शिक्षा ई-पाटी">
-		<div id="linkOle" class="kHeaderBtn">
-		</div>
-	      </a>
-	    </div>
   </div> 
 
-<div id="kHelpText" title="Help">
-<p>
-</p>
-</div>
+  <div id="kHelp" title="Help">
+    <p>
+      पाठविवरणर पाठयोजना सहज तरिकाले पढ्न तपाईले निम्न कार्य गर्न सक्नु हुन्छ ।</p>
+
+    <p> वायाँ तर्फ फर्किएको तिर     थिच्दा <br />
+      तपाईले हाल पढिरहेको पृष्टबाट आधिल्लो पृष्टमा पुग्नुहुन्छ।</p>
+      
+     <p> दायाँ तर्फ फर्किएको तिर     थिच्दा <br />
+      तपाईले हाल पढिरहेको पृष्टबाट पछिल्लो पृष्टमा पुग्नुहुन्छ।</p>
+      
+      दायाँ र वायाँ तर्फ फर्किएको  तिरहरुको बिचको सेतो कोठा
+      तपाई जान चाहनु भएको पृष्ट नम्बर टाइप गरी  थिच्नुहोस । तपाई जान चाहनु भएको पृष्ट देखिन्छ।
+      
+      अक्षर आकार सानो बनाउन सक्नुहुन्छ।
+      
+      अक्षर आकार ठुलो बनाउन सक्नुहुन्छ।
+
+      पाठ पृष्टको दाईने तर्फको ठाडो  रेखा तल माथि गर्दा
+      तपाईले हाल पढिरहेको पृष्टलाई आवश्यकता अनुसार तल माथि गर्न सक्नुहुन्छ 
+    
+  </div>
 
-<iframe id="iframeLessonPlan" src=''>
-</iframe>
+  <iframe id="iframeLessonPlan" src=''>
+  </iframe>
 
 </body>
 </html>
\ No newline at end of file
diff --git a/examples/English_Animal_Identification/start.html b/examples/English_Animal_Identification/start.html
index bc9ab7f..3ee8538 100755
--- a/examples/English_Animal_Identification/start.html
+++ b/examples/English_Animal_Identification/start.html
@@ -24,13 +24,10 @@
     
     <div id="middle">
 
-      <div id="blueOverlay"></div>
-
-      <div id="textOverlay">
-	<div id="grade" class="center">
-	  <span id="gradeText">कक्षा:</span><span id="gradeNum">२ &nbsp;</span>
+     	<div id="grade" class="center">
+	  <span id="gradeText">कक्षा:</span><span id="gradeNum">२</span>
 	</div>
-	<div id="subject" class="center">अँग्रेजी&nbsp;&nbsp;</div>
+	<div id="subject" class="center">अँग्रेजी</div>
 	<div id="lessonTitle" class="center">
 	  <a href="./index.html">Identifying Animals</a>
 	</div>
@@ -39,7 +36,7 @@
 	</div>
 	<div id="teachersNoteBtn" class="button">
 	  <a href="./kDoc.html?back=start.html&doc=teachersNote">
-	    <div>Teacher's Note</div>
+	    <div> Teacher's Note</div>
 	    <div>पाठविवरण</div>
 	  </a>
 	</div>
@@ -49,13 +46,12 @@
 	    <div>पाठयोजना</div>
 	  </a>
 	</div>
-      </div>
     </div>
     <div id="bottom">
-      <a href="http://www.olenepal.org">
-	<div id="logo" class="center">
+      <a id="logo" href="http://www.olenepal.org">
+	<!--<div id="logo" class="center">
 	  <div></div>
-	</div>
+	</div>-->
       </a>
       <div id="copyright">
 	Copyright <a href="http://www.olenepal.org">OLE Nepal</a> 2009, 
diff --git a/js/jquery.i18n.es.json b/js/jquery.i18n.es.json
new file mode 100644
index 0000000..699dc93
--- /dev/null
+++ b/js/jquery.i18n.es.json
@@ -0,0 +1 @@
+$.i18n.es = {};
\ No newline at end of file
diff --git a/js/jquery.i18n.js b/js/jquery.i18n.js
new file mode 100644
index 0000000..a393404
--- /dev/null
+++ b/js/jquery.i18n.js
@@ -0,0 +1,60 @@
+/* Copyright Bryan W Berry, 2009, 
+ * under the MIT license http://www.opensource.org/licenses/mit-license.php
+ * 
+ * this library is heavily influenced by the GNU LIBC library
+ *  http://www.gnu.org/software/libc/manual/html_node/Locales.html
+ */
+
+(function($){
+
+     $.i18n = function(string, locale){
+	 var lang = locale || $.i18n.lang;
+	 return this.i18n[lang].strings['pause']||string;
+     };
+
+     $._ = $.i18n;
+
+     $.i18n.setLocale = function (locale){
+	 $.i18n.lang = locale;
+     };
+
+     $.i18n.getLocale = function (){
+	 return $.i18n.lang;
+     };
+
+
+     /**
+      * Converts a number to numerals in the specified locale. Currently only
+      * supports devanagari numerals for Indic languages like Nepali and Hindi
+      * @param {Number} Number to be converted
+      * @param {locale} locale that number should be converted to
+      * @returns {String} Unicode string for localized numeral 
+      */
+     $.i18n._n = function(num, locale){
+
+	 locale = locale || $.i18n.lang;
+
+	 //48 is the base for western numerals
+	 var numBase = $.i18n[$.i18n.lang].numeralBase || 48;
+	 var prefix =  $.i18n[$.i18n.lang].numeralPrefix || "u00";
+     
+	 var convertDigit = function(digit){	     
+	     return '\\' + prefix + 
+		 (numBase + parseInt(digit)).toString(16);
+	 };
+	 
+	 var charArray = num.toString().split("").map(convertDigit);
+	 return eval('"' + charArray.join('') + '"');
+     };
+
+     $._n = $.i18n._n;
+
+     /* ToDo
+      * implement sprintf
+      * conversion functions for monetary and numeric 
+      * sorting functions (collation) for different locales
+      */
+
+ })(jQuery);
+
+
diff --git a/js/jquery.i18n.js~ b/js/jquery.i18n.js~
new file mode 100644
index 0000000..3a7aeb2
--- /dev/null
+++ b/js/jquery.i18n.js~
@@ -0,0 +1,14 @@
+(function($){
+     $.fn.i18n.setLocale = function (locale){
+	 
+	 $.i18n.lang = locale;
+     };
+
+
+
+
+
+     $.fn._ = $.fn.i18n;
+
+
+ })(jQuery);
\ No newline at end of file
diff --git a/js/jquery.i18n.ne.json b/js/jquery.i18n.ne.json
new file mode 100644
index 0000000..fe5e97b
--- /dev/null
+++ b/js/jquery.i18n.ne.json
@@ -0,0 +1,13 @@
+$.i18n.ne = {
+   numeralBase : 2406,
+   numeralPrefix:"u0"
+   /*
+    * additional values that could be added
+    * 
+    * monetary format
+    * non-monetary numeric format
+    * date format
+    * time format
+    * yes, no  for yes, no questions
+    */
+};
\ No newline at end of file
diff --git a/js/jquery.i18n.ne.json~ b/js/jquery.i18n.ne.json~
new file mode 100644
index 0000000..81c7332
--- /dev/null
+++ b/js/jquery.i18n.ne.json~
@@ -0,0 +1 @@
+$.i18n.ne = {};
\ No newline at end of file
diff --git a/js/kDoc.js b/js/kDoc.js
index 440162b..cf14bc2 100755
--- a/js/kDoc.js
+++ b/js/kDoc.js
@@ -3,15 +3,7 @@ $(document).ready(
 
 	var back = 'index.html';
 
-
-	var $help = $('#kHelpText').dialog({
-		position:[ "right", "top"], 
-		modal:'true',autoOpen:false,width:500,
-		height: 400
-		});
-
 	var parseUrlParams = function(){
-	    
 	    var doc = '';
 	    var params = window.location.search.slice(1).split('&');
 	    if (params){
@@ -22,50 +14,11 @@ $(document).ready(
 	    $('#iframeLessonPlan').attr('src', "" + doc + ".html");
 	};
 
-	parseUrlParams();
+	var $kHeader = $('#kHeader').kHeader({title:"Lesson Plan", zoom: true});
 		
-	$('#kHeaderHelpBtn').click(function(){ $help.dialog('open');});
-
 	
-	$('#kHeaderBackBtn').click(function(){
-				       window.location = back;
-				   });
-
-	$('#iframeLessonPlan').load(
-	    function(){
-		
-		var iframeScale = 1.0;
-		var iframeStyle = window.frames[0].document.body.style;
-		var translateY = 0;
-
-		$('#zoomIn').click(
-		    function(){
-			iframeScale = iframeScale + 0.1;
-			translateY = translateY + 50;
-			var scale = 'scale(' + iframeScale + ')';
-			var translate = "translate(0px, " + translateY + "px)";
-
-			iframeStyle.MozTransform = scale + ' ' + translate;
-			iframeStyle.WebkitTransform = scale + ' ' + translate;
- 		    });
-		
-		$('#zoomOut').click(
-		    function(){
-			iframeScale = iframeScale - 0.1;
-			translateY = translateY - 50;
-			
-			var scale = 'scale(' + iframeScale + ')';
-			var translate = "translate(0px, " + translateY + "px)";
-
-
-			iframeStyle.MozTransform = scale + ' ' + translate;
-			iframeStyle.WebkitTransform = scale + ' ' + translate;
-
-		    });
-		
-	    });
+	$('#kHeaderBackBtn').click(function(){ window.location = back; });
 
+	parseUrlParams();
 	Karma.scaleToViewport();
-	
-
 });
\ No newline at end of file
diff --git a/js/karma.js b/js/karma.js
index 928a06c..3d29073 100755
--- a/js/karma.js
+++ b/js/karma.js
@@ -275,6 +275,29 @@ Karma.scaleToViewport = function(){
     document.body.style.height = height;
 };
 
+Karma.scaleWindow = function(){
+    var width = "1200px";
+    var height = "900px";
+    var viewportHeight = "760px";
+    var $body = $('body');
+    var $kMain = $('#kMain');
+
+    if (window.innerWidth < 1150){
+	width = "950px";
+	height = "600px";
+	viewportHeight = "460px";
+	$body.css('border', '2px solid black');
+
+	//  460/760 * 16 = 9.6
+	$kMain.css('font-size', '9.6px');
+    } 
+
+    $body.css({border: '2px solid black', width: width, height: height});
+    $kMain.css({width: width, height: viewportHeight});
+
+
+};
+
     // Below are geometry and math helper methods
     
 /**
diff --git a/js/ui.kFooter.js b/js/ui.kFooter.js
index c126521..02d7937 100755
--- a/js/ui.kFooter.js
+++ b/js/ui.kFooter.js
@@ -1,5 +1,5 @@
 /**
-* @fileOverview a scoreboard widget
+* @fileOverview a footer widget 
 * @author Bryan Berry <bryan@olenepal.org> 
 *  uses MIT License
 */
@@ -11,7 +11,7 @@
      // This is a dummy function, just here as placeholder to
      // to make the jsdoc tool happy
      /** @name $.ui.kFooter
-      * @namespace KFooter widget 
+      * @namespace kFooter widget 
       * @example Emits the event kFooterWinGame when the maxScore is reached <br />
       * Emits the event kFooterRestart when game restarted <br />
       * Start button emits kFooterStart event when clicked <br />
@@ -94,62 +94,74 @@
 		      this._setData('total',  this._getData('total') - decVal);
 		      this._refresh();
 		  },
-		  _ : function(val, loc){
-		      var self = this;
-		      var locale = self._getData('locale') || loc;
-		      var convertNumLocale = function(num){
-			  //48 is the base for western numerals
-			  var convertDigit = function(digit){
-			  
-			      var numBase = 48;
-			      var prefix = "u00";
-			      
-			      if (self._getData('locale') === "ne"){
-				  prefix = "u0";
-				  numBase = 2406;
+		  /** Start the timer, defaults to 0:00 if no arguments supplied
+		   * @param {Number} [minutes] value for minutes, default to 0
+		   * @param {Number} [seconds]  value for seconds, default to 0 
+		   */ 
+		  startTimer : function(minutes, seconds){
+		      var timerRunning = this._getData('timerRunning')|| false;
+
+		      if (this._$timer && timerRunning === false){
+			  var mins = minutes || 0;
+			  var secs = seconds || 0;
+			  var timerId = null;
+			  var self = this;
+		      
+		      
+			  this._setData('mins', mins);
+			  this._setData('secs', secs);
+
+			  var addLeadingZero = function(num){
+			      if(''.concat(num).length === 1){
+				  return "0".concat(num);
+			      } else {
+				  return num;
 			      }
-			 
-			      return '\\' + prefix + 
-			      		  (numBase + parseInt(digit)).toString(16);
+			    
 			  };
-			  
-			  var charArray = num.toString().split("").map(convertDigit);
-			  return eval('"' + charArray.join('') + '"');
-		      };
-		      
-		      var convertStringLocale = function (str){
-			  if (self._getData('locale') === "ne"){
-			      switch(str){
-				  case "Score":
-				      return "अङ्क";
-				  case "Total":
-				      return "जम्मा";
-				  case "Play Again":
-				      return "फेरी खेलौ";
-				  case "Pause":
-				      return "खेल रोकौ";
-				  case "Start":
-				      return "सुरु गरौ";
-				  default:
-				      return "string not translated";
+
+			  var increaseTimer = function(){
+			      if (self._getData('timerRunning') === false){
+				  return;
 			      }
-			  }
-			      return "String really not translated";
-		      };    
+
+			      var s = self._getData('secs') + 1;
+			      var m = null;
+			      var timerId = null;
+					  
+			      if (s < 60) {
+				  self._setData('secs', s);
+				  self._$timerSecs.text(self._n(addLeadingZero(s)));
+			      } else {
+				  s = 0;
+				  m = self._getData('mins') + 1;
+				  self._$timerSecs.text(self._n(addLeadingZero(s)));
+				  self._$timerMins.text(self._n(addLeadingZero(m)));
+				  self._setData('secs', s);
+				  self._setData('mins', m);
+			      }
+				      
+			      timerId = setTimeout(increaseTimer, 1000);
+			      self._setData('timerId', timerId);
+
+			  };
 			  
-		      
-		      
-		      if (typeof val === "number"){
-			  return convertNumLocale(val);
-		      }
-		      
-		      if (locale !== "en"){
-			  return convertStringLocale(val);
-		      }else {
-			  return val;
-		      }
+			  timerId = setTimeout(increaseTimer , 1000);
 
-	  
+			  this._setData('timerRunning', true);
+			  this._setData('timerId', timerId);
+		      }
+		  },
+		  /** Stop the timer
+		   */
+		  stopTimer : function(){
+		      this._setData('timerRunning', false);
+		  },
+		  _ : function(val, loc){
+		      return $.i18n.call($.ui.kFooter, val, loc);
+		  },
+		  _n : function(val, loc){
+		      return $._n(val, loc);
 		  },
 		  _init : function(){
 
@@ -169,111 +181,117 @@
 
 		     
 		      this.element.addClass('ui-widget ui-widget-content ' +
-			      ' ui-kFooter-container');
-
-		      var $parent = $('<div>')
-			  .addClass('ui-kFooter-spacing');
+			      ' ui-kFooter');
+		      
+		      
+		      var $kFooter = $("<ul></ul>");
 		     
-		      this._scoreText = $('<div><span>' + this._("Score") + 
-					  "</span></div>")
-			  .addClass('ui-kFooter-spacing ui-kFooter-left ui-kFooter-text')
-			  .appendTo($parent);
-
-		      this._score = $("<div><span>" + this._(score) + "</span></div>")
-		          .addClass('ui-kFooter-spacing ui-kFooter-left' +
-				    ' ui-kFooter-text ui-kFooter-number')
-			  .find('span')
-		          .addClass('ui-corner-all')
-			  .end()
-			  .appendTo($parent)
-			  .find('span:first');
-
-
-		     $("<div><span>" + this._("Total") + "</span></div>")
-			  .addClass('ui-kFooter-spacing ui-kFooter-left' +
-				    ' ui-corner-all ui-kFooter-text')
-			  .appendTo($parent);
-
-		      this._total = $("<div><span>" + this._(total) + "</span></div>")
-		          .addClass('ui-kFooter-spacing ui-kFooter-left' +
-				    ' ui-kFooter-text ui-kFooter-number')
-			  .find('span')
-		          .addClass('ui-corner-all')
-			  .end()
-			  .appendTo($parent)
-			  .find('span:first');
-
-
-		      var $templateBtn = $('<button></button>')
-			      .addClass('ui-kFooter-spacing ui-corner-all ' +
-				  ' ui-state-default ui-kFooter-right ui-kFooter-button')
-			      .append(
-				  $('<span></span>')
-				      .addClass('ui-icon ui-kFooter-icon')
-			      )
-			      .append( 
-				      $('<span></span>')
-					  .addClass('ui-kFooter-button-text')
-			      );
-		       
-		      if(options.restartButton){
-			  var $restartBtn = $templateBtn.clone()
-			      .find('span:first')
-			      .addClass('ui-icon-arrowrefresh-1-w') 
-			      .end()
-			      .find('span:last') 
-			      .text(this._('Play Again'))
-			      .end()
-			      .click(function(){ self.restart();})
-			      .appendTo($parent);	  
-		      }   
+		      
+		      if(options.scoreboard === true){
+			  
+			  var $scoreboard = $("<li class='left'>" + this._("Score") + 
+			      "</li>" + "<li class='left'>" +
+			      "<span id='kFooterScore' class='ui-corner-all number'>" + 
+			      this._n(score) + "</span></li>" +
+			      "<li class='left'>" + this._("Total") + "</li>" +
+			      "<li class='left'><span id='kFooterTotal' " +
+			      "class='ui-corner-all number'>" + 
+			  this._n(total) + "</span></li>")
+			      .appendTo($kFooter);
+			 
+			  this._score = $('#kFooterScore', $scoreboard);
+			  this._total = $('#kFooterTotal', $scoreboard);
 
+		      }
 
-		      if(options.pauseButton){
+		      if(options.timer === true){
+			  this._$timer = $("<li class='left'>" + this._("Timer") + 
+			      "</li>" +
+			      "<li class='left'><span id='kFooterMins'" + 
+			      "class='ui-corner-all" +
+			      " number timer'>" + this._n("00") + 
+			      "</span></li>" +
+			      "<li class='left'><span id='kFooterSecs'" + 
+			      "class='ui-corner-all " +
+			      "number timer'>"+ this._n("00") + 
+			      "</span></li>")
+			      .appendTo($kFooter);
 
-			  var $pauseBtn = $templateBtn.clone()
-			    .find('span:first') //
-			    .removeClass('ui-icon-arrowrefresh-1-w')
-			    .addClass('ui-icon-pause') 
-			    .end()
-			    .find('span:last') 
-			    .text(this._('Pause'))
-			    .end()
-			    .click(function(){ 
-				       self.element.trigger('kFooterPause'); 
-				   })
-			    .appendTo($parent);
+			  this._$timerMins = $('#kFooterMins', this._$timer);
+			  this._$timerSecs = $('#kFooterSecs', this._$timer);		     
 		      }
 
-		      if(options.startButton){
-			  var $startBtn = $templateBtn.clone()
-			      .find('span:first')
-		              .addClass('ui-icon-play')
-		              .end()
-			      .find('span:last')
-			      .text(this._('Start'))
-		              .end()
+		      //if options.checkAnswerBtn === true
+			 
+		      if (options.restartButton === true){
+			  var $restartButton = $("<li class='right'><button " +
+			      "class='ui-corner-all ui-state-default'>" +
+ 			      "<span class='ui-icon ui-icon-arrowrefresh-1-w'>" +
+			      "</span>" + 
+			      "<span class='text left'>" + this._('Play Again') + 
+			      "</span></button></li>")
 			      .click(function(){ 
-				       self.element.trigger('kFooterStart'); 
-				   })
-			      .appendTo($parent);
+					 self.startTimer();
+					 self.restart();
+				     })
+			      .appendTo($kFooter);
+		      }
+		      
+		       if (options.pauseButton === true){
+			  var $pauseButton = $("<li class='right'><button " +
+			      "class='ui-corner-all ui-state-default'>" +
+ 			      "<span class='ui-icon ui-icon-pause'>" +
+			      "</span>" + 
+			      "<span class='text left'>" + this._('Pause') + 
+			      "</span></button></li>")
+			      .click(function(){ 
+					 self.stopTimer();
+					 self.element.trigger('kFooterPause'); 
+				     })
+			      .appendTo($kFooter);
 		      }
 
-
-		      $parent.find('button').hover(
+		      if (options.startButton === true){
+			  var $startButton = $("<li class='right'><button " +
+			      "class='ui-corner-all ui-state-default'>" +
+ 			      "<span class='ui-icon ui-icon-play'>" +
+			      "</span>" + 
+			      "<span class='text left'>" + this._('Start') + 
+			      "</span></button></li>")
+			      .click(function(){ 
+				      self.startTimer();
+				      self.element.trigger('kFooterStart'); 
+				     })
+			      .appendTo($kFooter);
+		      }
+		  
+		      $('button', $kFooter).hover(
 			      function(){ 
 				  $(this).addClass("ui-state-hover"); 
 			      },
 			      function(){ 
 				  $(this).removeClass("ui-state-hover"); 
 			      });
+		      
+		      
+		      // Check if any html w/in this.element, if so wrap it in <li> </li>
+		      // and add to $kFooter later
+		      var $userHtml = this.element
+			  .children()
+			  .appendTo($kFooter);
+			  
 
-		      this.element.append($parent);
+		      $userHtml.wrap('<li class="left"></li>');
 
+		      //get rid of userHtml
+		      this.element.empty();
+		      
+		      this.element.append($kFooter);
+		      
 		  },
 		  _refresh : function(){
-		      this._score.text(this._(this._getData('score')));
-		      this._total.text(this._(this._getData('total')));
+		      this._score.text(this._n(this._getData('score')));
+		      this._total.text(this._n(this._getData('total')));
 		  },
 		  /** Removes the kFooter widget and all related data from the DOM */
 		  destroy : function(){
@@ -284,7 +302,10 @@
 		  
 	      });
 
-	      $.ui.kFooter.getter = ['getScore', 'getTotal', '_convertNumLocale'];
+	      $.ui.kFooter.getter = ['getScore', 'getTotal', '_n', '_' ];
+
+	      $.ui.kFooter.i18n = {};
+
 		
 		/** Default settings for the kFooter widget
 		 * @namespace Default settings for the kFooter widget
@@ -311,6 +332,11 @@
 		   * @default "en"
 		   */
 		  locale: "ne",
+		  /** Display the scoreboard
+		   * @type boolean
+		   * @default true
+		   */
+		  scoreboard: true,
 		  /** Display the Start Button
 		   * @type boolean
 		   * @default false
@@ -325,7 +351,12 @@
 		   * @type boolean
 		   * @default false
 		   */
-		  pauseButton: false
+		  pauseButton: false,
+		  /** Display the timer
+		   * @type boolean
+		   * @default false
+		   */
+		  timer: false
 	      };
 
  })(jQuery);
\ No newline at end of file
diff --git a/js/ui.kFooter.ne.json b/js/ui.kFooter.ne.json
new file mode 100644
index 0000000..1235c68
--- /dev/null
+++ b/js/ui.kFooter.ne.json
@@ -0,0 +1,5 @@
+$.ui.kFooter.i18n.ne = {
+strings : {
+"score":"अङ्क", "total": "जम्मा", "play again": "फेरी खेलौ", "pause": "खेल रोकौ",
+"start": "सुरु गरौ" }
+};
\ No newline at end of file
diff --git a/js/ui.kFooter.ne.json~ b/js/ui.kFooter.ne.json~
new file mode 100644
index 0000000..8fadfaf
--- /dev/null
+++ b/js/ui.kFooter.ne.json~
@@ -0,0 +1,5 @@
+$.ui.kFooter.i18n.ne = {
+strings : {
+"score":"अङ्क", "total": "जम्मा", "play again": "फेरी खेलौ", "pause": "खेल रोकौ",
+"start": "सुरु गरौ" }
+j};
\ No newline at end of file
diff --git a/js/ui.kHeader.js b/js/ui.kHeader.js
new file mode 100755
index 0000000..b6382b3
--- /dev/null
+++ b/js/ui.kHeader.js
@@ -0,0 +1,208 @@
+/**
+* @fileOverview a Header widget
+* @author Bryan Berry <bryan@olenepal.org> 
+*  uses MIT License
+*/
+
+
+
+(function($){
+
+     // This is a dummy function, just here as placeholder to
+     // to make the jsdoc tool happy
+     /** @name $.ui.kHeader
+      * @namespace kHeader widget 
+      * @example  
+      */
+     $.ui.kHeader = function(){};
+
+     $.widget('ui.kHeader',
+	      /** @lends $.ui.kHeader.prototype */
+	      {
+		   _ : function(val, loc){
+		      var self = this;
+		      var locale = self._getData('locale') || loc;
+		      var convertNumLocale = function(num){
+			  //48 is the base for western numerals
+			  var convertDigit = function(digit){
+			  
+			      var numBase = 48;
+			      var prefix = "u00";
+			      
+			      if (self._getData('locale') === "ne"){
+				  prefix = "u0";
+				  numBase = 2406;
+			      }
+			 
+			      return '\\' + prefix + 
+			      		  (numBase + parseInt(digit)).toString(16);
+			  };
+			  
+			  var charArray = num.toString().split("").map(convertDigit);
+			  return eval('"' + charArray.join('') + '"');
+		      };
+		      
+		      var convertStringLocale = function (str){
+			  if (self._getData('locale') === "ne"){
+			      switch(str){
+				  case "":
+				      return "";
+				  default:
+				      return "string not translated";
+			      }
+			  }
+			      return "String really not translated";
+		      };    
+			  
+		      
+		      
+		      if (typeof val === "number"){
+			  return convertNumLocale(val);
+		      }
+		      
+		      if (locale !== "en"){
+			  return convertStringLocale(val);
+		      }else {
+			  return val;
+		      }
+
+	  
+		  },
+		  _init : function(){		      
+		      var options = $.extend({}, $.ui.kHeader.defaults, this.options);
+		     
+		      this.element.addClass('ui-widget ui-widget-content');
+
+		      var $kHeader = $("<ul></ul>");
+		      
+		      var backLink = "#";
+		      var urlParams = window.location.search.slice(1).split('&');
+		      if (urlParams){
+			  backLink = urlParams[0].split('=')[1];
+		      }
+			  
+		      var $backBtn = $("<li class='left'> <a href='" + backLink + 
+			      "' class='kHeader-btn kHeader-back'></a></li>")
+			      .appendTo($kHeader);
+		      
+		      var $lessonTitle = $("<li class='left kHeader-title'>" + 
+			      "<span>" + options.title + "</span><span class='ui-widget-header ui-icon " +
+			      "ui-icon-carat-1-s'></span></li>")
+			      .appendTo($kHeader);
+
+		      if(options.zoom === true){
+			  
+			  var iframeScale = 1.0;
+			  var translateY = 0;
+			  var getIframeStyle = function(){
+			         return window.frames[0].document.body.style;
+			  };
+
+			  var zoomIn = function(){
+			      var iframeStyle = getIframeStyle();
+			      iframeScale = iframeScale + 0.1;
+			      translateY = translateY + 50;
+			      var scale = 'scale(' + iframeScale + ')';
+			      var translate = "translate(0px, " + translateY + "px)";
+
+			      iframeStyle.MozTransform = scale + ' ' + translate;
+			      iframeStyle.WebkitTransform = scale + ' ' + translate;
+ 			  };
+
+			  var zoomOut = function(){
+			      var iframeStyle = getIframeStyle();
+			      iframeScale = iframeScale - 0.1;
+			      translateY = translateY - 50;
+			      
+			      var scale = 'scale(' + iframeScale + ')';
+			      var translate = "translate(0px, " + translateY + "px)";
+
+
+			      iframeStyle.MozTransform = scale + ' ' + translate;
+			      iframeStyle.WebkitTransform = scale + ' ' + translate;
+
+			  };
+
+			  $("<li class='left kHeader-zoomIn kHeader-btn'>" +
+			      " </li>")
+			      .click(zoomIn)
+			      .appendTo($kHeader);
+
+			  $("<li class='left kHeader-zoomOut " + 
+				  "kHeader-btn'> </li>")
+			      .click(zoomOut)
+			      .appendTo($kHeader);
+		      }
+
+		      
+		      
+		      if($('#' + options.help).length){
+			  if($.ui.dialog){
+			      var $help = $('#'+ options.help)
+					      .dialog({
+						  position:[ "right", "top"], 
+						  modal:'true',autoOpen:false,width:500,
+						  height: 400,
+						  dialogClass: 'kHeader-help'
+					      });
+			  } else {
+			      
+			      if(console){
+				  console.log("You need to add the jQuery UI dialog" +
+					      " widget in order to use Help feature.");
+			      }
+			  }
+
+		      }
+
+		      $("<li class='right'> <a href='#'"  +
+			      "' class='kHeader-btn kHeader-help'></a></li>")
+			      .click(function(){ 
+					 if($.ui.dialog && $help){
+					     $help.dialog('open');
+					 }
+				     })
+			      .appendTo($kHeader);
+		      
+
+		      $("<li class='right'> <a href='http://olenepal.org'"  +
+			      "' class='kHeader-btn kHeader-brand'" +
+			      "title='साझा शिक्षा ई-पाटी'></a></li>")
+			      .appendTo($kHeader);
+
+		      this.element.append($kHeader);
+		      
+		  },
+		  /** Removes the kHeader widget and all related data from the DOM */
+		  destroy : function(){
+		      this.element.remove();
+		      $.widget.prototype.destroy.apply(this, arguments);
+		  }
+
+		  
+	      });
+
+	      $.ui.kHeader.getter = [];
+		/** Default settings for the kHeader widget
+		 * @namespace Default settings for the kHeader widget
+		 * @extends $.ui.kHeader
+		 */			   
+	      $.ui.kHeader.defaults = {
+                  /** title
+		   * @type String 
+		   * @default ""
+		   */
+		  title: "",
+		  /** Turns on zoom buttons
+		   * @type boolean 
+		   * @default false
+		   */
+		  zoom: false,
+		  /** Id of element containing help text
+		   * @type String 
+		   * @default "kHelp"
+		   */
+		  help: "kHelp"
+	      };
+
+ })(jQuery);
\ No newline at end of file
diff --git a/js/ui.kHeader.js~ b/js/ui.kHeader.js~
new file mode 100755
index 0000000..e915764
--- /dev/null
+++ b/js/ui.kHeader.js~
@@ -0,0 +1,310 @@
+/**
+* @fileOverview a scoreboard widget
+* @author Bryan Berry <bryan@olenepal.org> 
+*  uses MIT License
+*/
+
+
+
+(function($){
+
+     // This is a dummy function, just here as placeholder to
+     // to make the jsdoc tool happy
+     /** @name $.ui.kFooter
+      * @namespace KFooter widget 
+      * @example Emits the event kFooterWinGame when the maxScore is reached <br />
+      * Emits the event kFooterRestart when game restarted <br />
+      * Start button emits kFooterStart event when clicked <br />
+      * Restart button emits kFooterRestart event when clicked <br />
+      * Pause button emits the kFooterPause event when clicked <br />
+      */
+     $.ui.kFooter = function(){};
+
+     $.widget('ui.kFooter',
+	      /** @lends $.ui.kFooter.prototype */
+	      {
+		  /** Gets the current score
+		   * @returns {Number} current score
+		   */
+		  getScore : function(){
+		      return this._getData('score');
+		  },
+		   /** Sets the current score
+		   * @param {Number} newScore new score
+		   */
+		  setScore : function(newScore){
+		      this._setData('score', parseInt(newScore));
+		      this._refresh();
+		  },
+		  /** Gets the current total
+		   * @returns {Number} current total
+		   */
+		  getTotal : function(){
+		      return this._getData('total');
+		  },
+		  /** Sets the current total
+		   * @param {Number} newTotal new total
+		   */
+		  setTotal : function(newTotal){
+		      this._setData('total', parseInt(newTotal));
+		      this._refresh();  
+		  },
+		  /**
+		   * Resets the score and total to initial values and triggers 
+		   * the "kFooterRestart" event
+		   */
+		  restart : function(){
+		      this.element.trigger('kFooterRestart');
+		      this._setData('score', this._getData('initialScore'));
+		      this._setData('total', this._getData('initialTotal'));
+		      this._refresh();
+		  },
+		  /** Increments the score by 1 or by the supplied numeric argument
+		   * @param {Number} [val] increment value
+		   */
+		  inc : function(val){
+		      var incVal = parseInt(val) || 1;
+		      this._setData('score',  this._getData('score') + incVal);
+		      this._refresh();
+		      if(this._getData('winScore') === this._getData('score')){
+			  this.element.trigger('kFooterWinGame');
+		      }
+		  },
+		   /** Increments the total by 1 or by the supplied numeric argument
+		   * @param {Number} [val] increment value
+		   */
+		  incTotal : function(val){
+		      var incVal = parseInt(val) || 1;
+		      this._setData('total',  this._getData('total') + incVal);
+		      this._refresh();
+		  },
+		   /** Decrements the score by 1 or by the supplied numeric argument
+		   * @param {Number} [val] decrement value
+		   */
+		  dec : function(val){
+		      var decVal = parseInt(val) || 1;
+		      this._setData('score',  this._getData('score') - decVal);
+		      this._refresh();
+		  },
+		   /** Decrements the total by 1 or by the supplied numeric argument
+		   * @param {Number} [val] decrement value
+		   */
+		  decTotal : function(val){
+		      var decVal = parseInt(val) || 1;
+		      this._setData('total',  this._getData('total') - decVal);
+		      this._refresh();
+		  },
+		  _ : function(val, loc){
+		      var self = this;
+		      var locale = self._getData('locale') || loc;
+		      var convertNumLocale = function(num){
+			  //48 is the base for western numerals
+			  var convertDigit = function(digit){
+			  
+			      var numBase = 48;
+			      var prefix = "u00";
+			      
+			      if (self._getData('locale') === "ne"){
+				  prefix = "u0";
+				  numBase = 2406;
+			      }
+			 
+			      return '\\' + prefix + 
+			      		  (numBase + parseInt(digit)).toString(16);
+			  };
+			  
+			  var charArray = num.toString().split("").map(convertDigit);
+			  return eval('"' + charArray.join('') + '"');
+		      };
+		      
+		      var convertStringLocale = function (str){
+			  if (self._getData('locale') === "ne"){
+			      switch(str){
+				  case "Score":
+				      return "अङ्क";
+				  case "Total":
+				      return "जम्मा";
+				  case "Play Again":
+				      return "फेरी खेलौ";
+				  case "Pause":
+				      return "खेल रोकौ";
+				  case "Start":
+				      return "सुरु गरौ";
+				  default:
+				      return "string not translated";
+			      }
+			  }
+			      return "String really not translated";
+		      };    
+			  
+		      
+		      
+		      if (typeof val === "number"){
+			  return convertNumLocale(val);
+		      }
+		      
+		      if (locale !== "en"){
+			  return convertStringLocale(val);
+		      }else {
+			  return val;
+		      }
+
+	  
+		  },
+		  _init : function(){
+
+		      var divDisplay = "inline";
+		      var score = this.options.score;
+		      var total = this.options.total;
+		      var self = this;
+		      
+		      var options = $.extend({}, $.ui.kFooter.defaults, this.options);
+
+		      this._setData('initialScore', parseInt(options.score));
+		      this._setData('initialTotal', parseInt(options.total));
+		      this._setData('score', parseInt(options.score));
+		      this._setData('total', parseInt(options.total)); 
+		      this._setData('winScore', parseInt(options.winningScore)); 
+		      this._setData('locale', options.locale);
+
+		     
+		      this.element.addClass('ui-widget ui-widget-content ' +
+			      ' ui-kFooter-container');
+
+		      var $kFooter = $("<ul></ul>");
+		     
+		      
+		      if(options.scoreboard === true){
+			  
+			  var $scoreboard = $("<li class='left'>" + this._("Score") + 
+			      "</li>" + "<li class='left'>" +
+			      "<span id='kFooterScore' class='ui-corner-all number'>" + 
+			      this._(score) + "</span></li>" +
+			      "<li class='left'>" + this._("Total") + "</li>" +
+			      "<li class='left'><span id='kFooterTotal' " +
+			      "class='ui-corner-all number'>" + 
+			      this._(total) + "</span></li>");
+			 
+			  this._score = $('#kFooterScore', $scoreboard);
+			  this._total = $('#kFooterTotal', $scoreboard);
+
+			  $kFooter.append($scoreboard);
+		      }
+
+		      //need timer stuff
+		      //if options.timer === true
+		      
+		      //if options.checkAnswerBtn === true
+			 
+		      if (options.restartButton === true){
+			  var $restartButton = $("<li class='right'><button " +
+			      "class='ui-corner-all ui-state-default'>" +
+ 			      "<span class='ui-icon ui-icon-arrowrefresh-1-w'>" +
+			      "</span>" + 
+			      "<span class='text left'>" + this._('Play Again') + 
+			      "</span></button></li>")
+			      .click(function(){ self.restart();})
+			      .appendTo($kFooter);
+		      }
+		      
+		       if (options.pauseButton === true){
+			  var $pauseButton = $("<li class='right'><button " +
+			      "class='ui-corner-all ui-state-default'>" +
+ 			      "<span class='ui-icon ui-icon-pause'>" +
+			      "</span>" + 
+			      "<span class='text left'>" + this._('Pause') + 
+			      "</span></button></li>")
+			      .click(function(){ 
+				      self.element.trigger('kFooterPause'); 
+				     })
+			      .appendTo($kFooter);
+		      }
+
+		      if (options.startButton === true){
+			  var $startButton = $("<li class='right'><button " +
+			      "class='ui-corner-all ui-state-default'>" +
+ 			      "<span class='ui-icon ui-icon-play'>" +
+			      "</span>" + 
+			      "<span class='text left'>" + this._('Start') + 
+			      "</span></button></li>")
+			      .click(function(){ 
+				      self.element.trigger('kFooterStart'); 
+				     })
+			      .appendTo($kFooter);
+		      }
+		  
+		      $('button', $kFooter).hover(
+			      function(){ 
+				  $(this).addClass("ui-state-hover"); 
+			      },
+			      function(){ 
+				  $(this).removeClass("ui-state-hover"); 
+			      });
+
+
+		      this.element.append($kFooter);
+		      
+		  },
+		  _refresh : function(){
+		      this._score.text(this._(this._getData('score')));
+		      this._total.text(this._(this._getData('total')));
+		  },
+		  /** Removes the kFooter widget and all related data from the DOM */
+		  destroy : function(){
+		      this.element.remove();
+		      $.widget.prototype.destroy.apply(this, arguments);
+		  }
+
+		  
+	      });
+
+	      $.ui.kFooter.getter = ['getScore', 'getTotal', '_convertNumLocale'];
+		
+		/** Default settings for the kFooter widget
+		 * @namespace Default settings for the kFooter widget
+		 * @extends $.ui.kFooter
+		 */			   
+	      $.ui.kFooter.defaults = {
+                  /** Initial score
+		   * @type Number 
+		   * @default 0
+		   */
+		  score: 0, 
+		  /** Initial total
+		   * @type Number
+		   * @default 0
+		   */
+		  total: 0, 
+		  /** The score that will win the game
+		   * @type Number
+		   * @default 0
+		   */
+		  winningScore: 0,
+		  /** Default locale, valid options are "en" and "ne" 
+		   * @type String
+		   * @default "en"
+		   */
+		  locale: "ne",
+		  /** Display the scoreboard
+		   * @type boolean
+		   * @default true
+		   */
+		  scoreboard: true,
+		  /** Display the Start Button
+		   * @type boolean
+		   * @default false
+		   */
+		  startButton: true,
+		  /** Display the Retart Button
+		   * @type boolean
+		   * @default true
+		   */
+		  restartButton: true,
+		  /** Display the Pause Button
+		   * @type boolean
+		   * @default false
+		   */
+		  pauseButton: true
+	      };
+
+ })(jQuery);
\ No newline at end of file
--
cgit v0.9.1