$(function(){
		   $("#sp-id-searchtabs").tabs();
		   
		   $("input.sp-css-datepicker").datepicker({
												   numberOfMonths :3,
												   showButtonPanel : true												   
												   });
		   $("#sp-id-searchform-basic a").click(function(){
												   $("#sp-id-searchform-basic").submit();
												   return false;
												   });
		   $("#sp-id-searchform-advanced a").click(function(){
												   $("#sp-id-searchform-advanced").submit();
												   return false;
												   });
		   $("#sp-id-searchform-excel a[href='#']").click(function(){
														 $("#sp-id-searchform-excel").submit();
														 return false;
														 });
		   $("form.sp-css-searchform[id!='sp-id-searchform-excel']").submit(function(){
													   $("#sp-id-results").html("<div id=\"sp-id-progressbar\"><img src=\"images/sp-loading.gif\" /></div>");
													   $.getJSON("sp-service.php",{
																 platenumbers : $(this).find("input.sp-css-searchbox").val(),
																 begin : $(this).find("input.sp-css-datepicker:eq(0)").val(),
																 end : $(this).find("input.sp-css-datepicker:eq(1)").val()
																 },
																 sp_service_handler
																 );
													   return false;
													   });
		   $("#sp-id-searchform-excel").submit(function(){
														$("#sp-id-results").html("<div id=\"sp-id-progressbar\"><img src=\"images/sp-loading.gif\" /></div>");
														$.ajaxFileUpload({
																url:'sp-service-excel.php',
																secureuri:false,
																fileElementId:'sp-id-uploadexcel',
																dataType: 'json',
																success: sp_service_handler,
																error: function (data, status, e)
																{
																	//alert(e);
																	//alert(data.responseText);
																}
															});
													   	return false;
														});
		   $("#sp-id-left").droppable({
									  accept: '#sp-id-results > h3',
									  activeClass: 'ui-state-default',
									  drop : function(ev,ui){
												var platenumber=ui.helper.text();
												$("#sp-id-results-body"+platenumber).fadeOut();
												ui.draggable.fadeOut("slow",function(){
																			  var imgsrc=$("#sp-id-results-img"+platenumber).find("img").attr("src");
																			  $("<li class=\"ui-widget-content ui-corner-tr\" >\
																					<h5 class=\"ui-widget-header\" >"+platenumber+"</h5>\
																					<img src=\""+imgsrc+"\" width=\"96\" height=\"72\"/>\
																					<a href=\"#\" class=\"ui-icon ui-icon-zoomin\">Amplify</a>\
																					<a href=\"#\" class=\"ui-icon ui-icon-trash\">Remove</a>\
																				</li>").fadeIn("slow").appendTo("#sp-id-left-list");
																			  $("#sp-id-left-list li").click(function(ev){
																													  var platenumber = $(this).find("h5").text();
																													  var imgsrc = $(this).find("img").attr("src");
																													  if($(ev.target).is('a.ui-icon-zoomin')){
																														  $("<div />").attr({
																																title:"Plate Number:"+platenumber,
																																id:"sp-id-results-img-dialog"+platenumber
																																})
																																.html("<img src=\""+imgsrc+"\" border=\"0\" />")
																																	.dialog({
																																		bgiframe:true,
																																		modal:true,
																																		width:600,
																																		height:400,
																																		maxWidth:1000,
																																		buttons:{
																																			Ok: function(){
																																					$(this).dialog('close');
																																				}
																																			}
																																		});
																															return false;
																													  }else if($(ev.target).is('a.ui-icon-trash')){
																														  $(this).fadeOut("slow");
																														  //$(this).remove();
																													  }
																													  return false;
																											});
																			  $(this).remove();
																			  $("#sp-id-results-body"+platenumber).remove();
																			  });
										  }
									  
									  });
		   $("#sp-id-left-download").click(function(){
													var lists = $("#sp-id-left-list").find("li");
													var platenumbers ="";
													if(lists.length == 0){return false;}
													$.each(lists, function(i, item){
																		    if(i > 0){platenumbers += ',';}
																		    platenumbers += $(item).find("h5").text();																		  
																		   });
													window.open("sp-getexcel.php?platenumbers="+platenumbers);
													return false;
													});
		   $("#sp-id-login").dialog({
									bgiframe:true,
									autoOpen:true,
									height:230,
									width:250,
									modal:true,
									buttons:{
										'LOGIN': function(){
											if($("#sp-id-login-username").val() == 'company1' & $("#sp-id-login-password").val() == '123456'){
												$(this).dialog('close');
												}
											else{
												$("#sp-id-login-error").addClass("ui-state-error").html("<span class=\"ui-icon ui-icon-alert\" style=\"float: left; margin-right: 0.3em;\"></span><span>Wrong username and password!</span>");
												}
											}
										}
									});
		   
			   
			   
});
function sp_service_handler(data){
	$("#sp-id-results").html("");
	$("#sp-id-results").accordion("destroy");	
	if(data.items.length == 0){
		$("#sp-id-results").html("<div class=\"ui-state-default ui-corner-all sp-css-notice\">\
								  <span class=\"ui-icon ui-icon-info\" style=\"float: left; margin-right: 0.3em;\"></span>\
								  <span>Sorry, no records found.</span>\
								  </div>");
		return;
	}
	$.each(data.items, function(i, item){
								$("<h3 />").attr("id","sp-id-results-header"+item.platenumber).appendTo("#sp-id-results");
								$("<a />").text("Plate Number :"+item.platenumber).appendTo("#sp-id-results-header"+item.platenumber);
								$("<div />").attr("id","sp-id-results-body"+item.platenumber).appendTo("#sp-id-results");
								$("<div />").addClass("sp-css-results-sub ui-widget-content ui-corner-all").html("<ul>\
																				 <li>Last Captured Time : <span class=\"sp-css-keyword\">"+item.lastcapturedtime+"</span></li>\
																				 <li>Last Captured Camera : <span class=\"sp-css-keyword\">"+item.lastcapturedcamera.id+"</span><a id=\"sp-id-results-cam"+item.platenumber+"\" href=\"#\" class=\"ui-icon ui-icon-search\">Lookup in Google Map</a></li>\
																				 </ul>").appendTo("#sp-id-results-body"+item.platenumber);
								$("<div />").addClass("sp-css-results-sub ui-widget-content ui-corner-all").html("<a href=\"#\" id=\"sp-id-results-img"+item.platenumber+"\"><img  width=\"160px\" height=\"140px\" src=\""+item.lastcapturedphoto+"\" border=\"0\" /></a>").appendTo("#sp-id-results-body"+item.platenumber);
								$("#sp-id-results-img"+item.platenumber).click(function(){
																									  $("<div />").attr({
																														title:"Plate Number:"+item.platenumber,
																														id:"sp-id-results-img-dialog"+item.platenumber
																														})
																									  					.html("<img src=\""+item.lastcapturedphoto+"\" border=\"0\" />")
																									  						.dialog({
																																bgiframe:true,
																																modal:true,
																																width:600,
																																height:400,
																																maxWidth:1000,
																																buttons:{
																																	Ok: function(){
																																			$(this).dialog('close');
																																		}
																																	}
																																});
																										return false;
																									  });
								$("#sp-id-results-cam"+item.platenumber).click(function(){
																						$("#sp-id-googlemap").remove();
																						$("<div title=\""+item.lastcapturedcamera.id+"\" \>").html("<div id=\"sp-id-googlemap\"/>").dialog({
																																													  bgiframe:true,
																																													  modal:true,
																																													  width:420,
																																													  height:420,
																																													  buttons:{
																																														  Ok:function(){
																																															  	$(this).dialog('close');
																																															  }
																																														  }
																																													  });
																						
																						var map = new google.maps.Map2(document.getElementById("sp-id-googlemap"));																						
																						var latlng = new GLatLng(item.lastcapturedcamera.lat,item.lastcapturedcamera.lng);
																						map.setCenter(latlng, item.lastcapturedcamera.z);
																						var marker = createInfoMarker(latlng, '<font color="#000000">'+item.lastcapturedcamera.id+'</font>');
																						map.addOverlay(marker);
																		 				return false;
																		 });
								$("#sp-id-results-header"+item.platenumber).draggable({
																	 cursor: 'move',
																	 cursorAt: {top:-12, left:-20},
																	 helper: function(event){return $('<div class="ui-widget-header">'+item.platenumber+'</div>');}
																	 });
								
								});
	
	$("#sp-id-results").accordion({
								 collapsible:true,
								 active:false
								 });
	
}

function createInfoMarker(latlng, address) {
   var marker = new GMarker(latlng);
   GEvent.addListener(marker, "click",
      function() {
         marker.openInfoWindowHtml(address);
      }
   );
  return marker;
}