Now tickets have a ticket background image

html/javascript/shoppingCart.js

@@ -1,8 +1,5 @@
 //here are all the hardcoded devices
 
-var array = new Array;
-localStorage.setItem('unavailable',JSON.stringify(array));
-
 var dev1 = {
 	id: 1,
 	name:"George",
@@ -82,7 +79,7 @@ function show(){
 			var id = cart[i];												//this gets the id value from the cart
 			for(var j = 0; j < devices.length; j++){						//iterate device list
 				if(devices[j].id === id){									//match the id's
-					html += '<div> <input class = "deviceCheckbox" type = "checkbox" id = "' + id + '"> </input>' + devices[j].name + '</div>';	//create listing of all the devices
+					html += '<div> <input class = "deviceCheckbox" type = "checkbox" id = "' + id + '"> </input><a class = "divlink" href = "#"><div id = "ticket' + id +'" class = "ticket"><p class = "tickettext">' + devices[j].name + '</p></div></a></div>';	//create listing of all the devices
 					break;													//break out of loop when we match
 				}
 			}
@@ -98,6 +95,31 @@ function show(){
 	for(var i = 0; i < checkboxes.length; i++){								//iterate them
 		checkboxes[i].addEventListener('click',changeStatus);				//when we click on a checkbox, it should add/remove the id from the selected array
 	}
+
+	var tickets = document.getElementsByClassName('ticket');
+	for(var i = 0; i < tickets.length; i++){
+		tickets[i].addEventListener('click',clickTicket);
+	}
+}
+
+/**
+This allows a ticket click to do the same thing as clicking on the checkbox.
+**/
+function clickTicket(){
+	var checkboxes = document.getElementsByClassName('deviceCheckbox');
+	var id = this.getAttribute('id');
+	id = parseInt(id.replace(/[^0-9\.]/g,''),10);
+	if(document.getElementById(id).checked == true){
+		document.getElementById(id).checked = false;
+		for(var i = 0; i < checked.length; i++){							//iterate checked array
+			if(id == checked[i])											//find the right checkbox
+				checked.splice(i,1);										//remove from the array
+		}
+	}
+	else{
+		document.getElementById(id).checked = true;
+		checked.push(id);
+	}
 }
 
 /**

html/webpages/requestPage.html

@@ -101,7 +101,7 @@ <h4>Operating Systems</h4>
     </div>
 
     <div class = "displayDevice">
-          <h2>Available Devices</h2>
+      <h2>Available Devices</h2>
 		  <div id = "devContainer"></div>   
 	  </div>
 

html/webpages/shoppingCart.html

@@ -32,6 +32,19 @@
                 position: absolute; 
                 padding-left: 30px;
             }
+
+            div.ticket{
+                background-image: url('../imgs/ticket.png');
+                display: inline-block;
+                height: 126px;
+                width: 240px;
+            }
+
+            p.tickettext{
+                text-align: center;
+                vertical-align: middle;
+                line-height: 126px;
+            }
     </style>
 
     </head>
@@ -71,10 +84,11 @@ <h4>Shopping Cart Options</h4>
         </div>
 
         <div class = "displayDevice">
+            <h2>Welcome to your shopping cart!</h2>
             <div id="shoppingContainer">
             </div>
         </div>
-        
+
         <script src="../javascript/shoppingCart.js"></script>
     </body>
 </html>