// JavaScript Document

var limit = 6;
var submit_form = "";

Ext.onReady(function(){

	var idb = Ext.getDom("id_brand");
	var ids = Ext.getDom("id_serie");
	var idm = Ext.getDom("id_model");
	var pr_sbm = Ext.getDom("printer-submit-btn");
	var pt_sbm = Ext.getDom("part-submit-btn");
	
	var res = Ext.getDom("div-results");
	
	idb.onchange = function(){
		opt = new Option("<Select your Printer Series>", 0);
		ids.length = 0;
		ids.options[0] = new Option("Loading Printer Series...", 0);
		Ext.Ajax.request({
			url: "admin/json/series_combo.php",
			params: {id:this.value},
			callback: function(options, success, response) {
				ids.options[0] = opt;
				var json = Ext.decode(response.responseText);
				for(var i = 0; i < json.length; i++)
					ids.options[ids.options.length] = new Option(json[i][1], json[i][0]);
				ids.disabled = false;
				idm.disabled = true;
			}
		});
	}

	ids.onchange = function(){
		opt = new Option("<Select your Printer Model>", 0);
		idm.length = 0;
		idm.options[0] = new Option("Loading Printer Models...", 0);
		Ext.Ajax.request({
			url: "admin/json/models_combo.php",
			params: {id:this.value},
			callback: function(options, success, response) {
				idm.options[0] = opt;
				var json = Ext.decode(response.responseText);
				for(var i = 0; i < json.length; i++)
					idm.options[idm.options.length] = new Option(json[i][1], json[i][0]);
				idm.disabled = false;
			}
		});
	}
	
	pr_sbm.onclick = function(){
		submit_form = "printer-search-form";
		loadAjaxRequest({start:0, limit: limit, sort:"product", dir:"ASC"});
	}
	
	pt_sbm.onclick = function(){
		submit_form = "part-search-form";
		loadAjaxRequest({start:0, limit: limit, sort:"product", dir:"ASC"});
	}
	
	function loadAjaxPage(page){
		var start = (page-1) * limit;
		loadAjaxRequest({start: start, limit: limit, sort:"product", dir:"ASC"});
	}
	
	function loadAjaxRequest(params) {
		res.innerHTML = "<div class=\"forTitle\">Loading ...</div>";
		Ext.getDom("div-pagination").style.display = "none";
		Ext.Ajax.request({
			url: "admin/json/search_results.php",
			params: params,
			form: submit_form,
			callback: function(options, success, response) {
				createResultGrid(Ext.decode(response.responseText).records);
				createPagination(params.start, Number(Ext.decode(response.responseText).totalCount));
			}
		});
	}
	
	function createResultGrid(json){
		if(json.length){
		
			var rows = Math.ceil(json.length / 3);
			var index, html;
			
			var newTable = document.createElement("table");
			newTable.className = "dataTable";			

			for(var i=0; i < rows; i++){
				var newRow = newTable.insertRow(i);
				for(var j=0; j < 3; j++){
					index = (i*3)+j;
					var newCell = newRow.insertCell(j);
					if(index < json.length){
						html = "<div class=\"forTitle\">"+json[index].brand+" "+json[index].serie+"<br />"+json[index].model+"</div>";
						html += "<img class=\"forThumbnail\" src=\"thumbs/"+json[index].img+"\" border=\"0\" />";
						html += "<div>"+json[index].product+"</div>";
						html += "<div>Retail USD "+Number(json[index].retail).toFixed(2)+"</div>";
						html += "<div class=\"forPrice\">Our Low Price USD "+Number(json[index].price).toFixed(2)+"</div>";
						html += "<div>"+json[index].link+"</div>";
						newCell.innerHTML = html;
					} else
						newCell.style.border = "none";
				}
			}
			res.innerHTML = "";
			res.appendChild(newTable);
			
		} else
			res.innerHTML = "<div class=\"forTitle\">No matching records !!!</div>";
	}
	
	function createPagination(start, count){
		var div = Ext.getDom("div-pagination");
		if(count){
			var from = start + 1;
			var to = (start + limit) > count ? count : (start + limit);
			Ext.getDom("div-display").innerHTML = "Displaying Records "+from+" to "+to+" of "+count;
			div.style.display = "block";
			
			var html = "";
			var page = start / limit;
			page++;
			var pages = Math.ceil(count / limit);
			
			// PAGES
			var newTable = document.createElement("table");
			newTable.className = "pagesTable";
			
			var newRow = newTable.insertRow(0);
			var i = 0;
			
			if(page>1){
				var newCell = newRow.insertCell(i++);
				var newDiv = document.createElement("div");
				newDiv.className = "forNavigation";
				newDiv.onclick = function(){
					loadAjaxPage(1);
				}
				newDiv.innerHTML = "<img src=\"images/first.gif\" border=\"0\" />";
				newCell.appendChild(newDiv);

				var newCell = newRow.insertCell(i++);
				var newDiv = document.createElement("div");
				newDiv.className = "forNavigation";
				newDiv.onclick = function(){
					loadAjaxPage((page-1));
				}
				newDiv.innerHTML = "<img src=\"images/previous.gif\" border=\"0\" />";
				newCell.appendChild(newDiv);
			}
			
			var newCell = newRow.insertCell(i++);
			newCell.innerHTML = "Page&nbsp;&nbsp;"+page+"&nbsp;&nbsp;of&nbsp;&nbsp;"+pages;
			
			if(page < pages){
				var newCell = newRow.insertCell(i++);
				var newDiv = document.createElement("div");
				newDiv.className = "forNavigation";
				newDiv.onclick = function(){
					loadAjaxPage((page+1));
				}
				newDiv.innerHTML = "<img src=\"images/next.gif\" border=\"0\" />";
				newCell.appendChild(newDiv);

				var newCell = newRow.insertCell(i++);
				var newDiv = document.createElement("div");
				newDiv.className = "forNavigation";
				newDiv.onclick = function(){
					loadAjaxPage(pages);
				}
				newDiv.innerHTML = "<img src=\"images/last.gif\" border=\"0\" />";
				newCell.appendChild(newDiv);
			}
			
			Ext.getDom("div-pages").innerHTML = "";
			Ext.getDom("div-pages").appendChild(newTable);
			// PAGES
						
		} else
			div.style.display = "none";

	}
	
	Ext.Ajax.request({
		url: "admin/json/brands_combo.php",
		callback: function(options, success, response) {
			opt = idb.options[0];
			idb.length = 0;
			idb.options[0] = opt;
			var json = Ext.decode(response.responseText);
			for(var i = 0; i < json.length; i++)
				idb.options[idb.options.length] = new Option(json[i][1], json[i][0]);
			idb.disabled = false;
		}
	});
	
	pr_sbm.onclick.call();

});