$.blockUI.defaults.css = {}; 

$(document).ready( function() { Jupiter.attachClassToElements('.TSLaptopSelector', TSLaptopSelector, $(document)) });

function TSLaptopSelector(_element) {
	this.initialize(_element);
	
}

TSLaptopSelector.prototype.initialize = function(_element) {

	//store references to important elements
	this.element = $(_element);
	this.brandSelect = $("select.brand", this.element);
	this.lineSelect = $("select.line", this.element);
	this.modelSelect = $("select.model", this.element);
	this.matchingCasesDiv = $("div.matching_cases .thumbnails");
	this.matchingCasesTitle = $("div.matching_cases .title");
		
	//install callbacks
	var self = this;
	this.brandSelect.change(function (e) {self.brandChanged(e, this);});
	this.lineSelect.change(function (e) {self.lineChanged(e, this);});
	this.modelSelect.change(function (e) {self.modelChanged(e, this);});
	$(".dimension_selector input", this.element).keyup(function (e) {self.dimensionChanged(e, this);});
	
	//set up initial state
	this.clearDimensions();
	this.clearBrand();
	this.brandSelect.attr("disabled", "disabled");
	this.matchTimer = null;
	
	//load the brands
	$.getJSON(appPath+"brands/index_json/", null, function(data, textStatus) { self.brandsLoaded(data, textStatus, this); });
}

TSLaptopSelector.prototype.brandsLoaded = function(data, textStatus, settings) {
	
	
	//repopulate the brand menu
	this.brandSelect.empty();
	$("<option>").attr("value", "null").text("Select Brand").appendTo(this.brandSelect);
	var self = this;
	$.each(data, function(i, item) {

		if (item.Brand && item.Brand.id && item.Brand.name){
			$("<option>").attr("value", item.Brand.id).text(item.Brand.name).appendTo(self.brandSelect);
		}
	});
	
	//activate it
	this.brandSelect.attr("disabled", false);
}

TSLaptopSelector.prototype.linesLoaded = function(data, textStatus, settings) {	

	//repopulate the line menu
	this.lineSelect.empty();
	$("<option>").attr("value", "null").text("Select Line").appendTo(this.lineSelect);
	var self = this;
	$.each(data.Line, function(i, item) {
		if (item.id && item.name){
			$("<option>").attr("value", item.id).text(item.name).appendTo(self.lineSelect);
		}
	});
	
	//activate it
	this.lineSelect.attr("disabled", false);
}

TSLaptopSelector.prototype.modelsLoaded = function(data, textStatus, settings) {
	//store the current data for this line
	this.lineData = data;
		
	//repopulate the line menu
	this.modelSelect.empty();
	$("<option>").attr("value", "null").text("Select Model").appendTo(this.modelSelect);
	var self = this;
	$.each(data.Laptop, function(i, item) {
		if (item.id && item.name){
			$("<option>").attr("value", item.id).text(item.name).appendTo(self.modelSelect);
		}
	});
	
	//activate it
	this.modelSelect.attr("disabled", false);
}


TSLaptopSelector.prototype.matchesLoaded = function(data, textStatus, settings) {
	//display results
	this.matchingCasesDiv.empty();
	
	
	if (data.length == 0){
		//no results
		$("<div>").attr("style","color: red;").text("No matching cases").appendTo(this.matchingCasesDiv);
	}else{
		//populate the matching items
		
		var self = this;
		//for (n = 0; n<12; n++){
		$.each(data, function(i, item) {
			if (item.CaseItem){
				
				thumb = $("<div>").attr("class", "case_thumbnail")
				
				
				link = $("<a>").attr("href",item.CaseItem.url).attr("target", "_parent");
				link.appendTo(thumb);
				
				$("<img>").attr("src",item.CaseItem.thumbnail_url).appendTo(link);
				$("<span>").attr("class", "item_name").text(item.CaseItem.name).appendTo(link);
				$("<span>").attr("class","item_price").text(item.CaseItem.description).appendTo(thumb);
				
				
				
			
				
				thumb.appendTo(self.matchingCasesDiv);
			}
		});
		//}
		
		//$("<span>").attr("style","clear: both;").appentTo(self.matchingCasesDiv);
	}
	
	
	this.showResultsLoaded();
	return;
}


TSLaptopSelector.prototype.brandChanged = function (event){
	this.lineData = null;
	
	//reset/disable line
	this.lineSelect.empty();
	$("<option>").attr("value", "null").text("Select Line").appendTo(this.lineSelect);
	this.lineSelect.attr("disabled", "disabled");
	
	//reset/disable model
	this.modelSelect.empty();
	$("<option>").attr("value", "null").text("Select Model").appendTo(this.modelSelect);
	this.modelSelect.attr("disabled", "disabled");

	//reset dimensions
	this.clearDimensions();
	
	//
	this.hideResults();
	
	//load lines for brand
	var self = this;
	if (this.brandSelect.val() != "null"){
		$.getJSON(appPath+"brands/view_json/"+this.brandSelect.val(), null, function(data, textStatus) { self.linesLoaded(data, textStatus, this); });
	}
}

TSLaptopSelector.prototype.lineChanged = function (event){
	this.lineData = null;
	
	//reset/disable model
	this.modelSelect.empty();
	$("<option>").attr("value", "null").text("Select Model").appendTo(this.modelSelect);
	this.modelSelect.attr("disabled", "disabled");

	//reset dimensions
	this.clearDimensions();
	
	//
	this.hideResults();

	//load models for line
	var self = this;
	if (this.lineSelect.val() != "null"){
		$.getJSON(appPath+"lines/view_json/"+this.lineSelect.val(), null, function(data, textStatus) { self.modelsLoaded(data, textStatus, this); });
	}
}

TSLaptopSelector.prototype.modelChanged = function (event){
	
	//make sure they picked a model
	if (this.modelSelect.val() == "null"){
		return;
	}
	
	//find the data for chosen model
	var self = this;
	$.each(this.lineData.Laptop, function(i, item) {
		if (item.id && item.id == self.modelSelect.val()){
			self.currentLaptopData = item;
		}
	});
	
	//populate dimensions
	$("#length_inches", this.element).val(this.currentLaptopData.length);
	$("#width_inches", this.element).val(this.currentLaptopData.width);
	$("#thickness_inches", this.element).val(this.currentLaptopData.thickness);
	
	$("#length_mm", this.element).val(Math.round(this.currentLaptopData.length * 25.4));
	$("#width_mm", this.element).val(Math.round(this.currentLaptopData.width  * 25.4));
	$("#thickness_mm", this.element).val(Math.round(this.currentLaptopData.thickness  * 25.4));
		
	//
	//console.log(this.currentLaptopData);
	this.matchingCasesTitle.text("Results: "+this.brandSelect.children('option:selected').text() +" "+this.lineSelect.children('option:selected').text()+" "+this.currentLaptopData.name);	
	this.showResultsLoading();
	
	

	//find matching cases
//	$.getJSON(appPath+"case_items/match_json/" + this.currentLaptopData.length + "/" + this.currentLaptopData.width + "/" + this.currentLaptopData.thickness, 
//				null, 
//				function(data, textStatus) { self.matchesLoaded(data, textStatus, this); });		
	
	//here we do the load after a slight delay (this makes sure that the results take at least .5 seconds to come up to help make it clear that a search was performed, we found this made it clearer for people we tested this with)
	
	if(typeof this.matchTimer == "number") {
		window.clearTimeout(this.matchTimer);
		delete this.matchTimer;
	}
	
	
	this.matchTimer = window.setTimeout(function() {
		$.getJSON(appPath+"case_items/match_json/" + Math.floor(self.currentLaptopData.length* 25.4) + "/" + Math.floor(self.currentLaptopData.width* 25.4) + "/" + Math.floor(self.currentLaptopData.thickness* 25.4), 
				null, 
				function(data, textStatus) { self.matchesLoaded(data, textStatus, this); });
		
 }, 500);
	
	
}


TSLaptopSelector.prototype.dimensionChanged = function (event, element){
	//since the user is changing the value, the brand/line/model is no longer applicable
	this.clearBrand();
	
	//convert the value just changed by the user, populate
	id = $(element).attr("id");
	if (id == "length_inches"){
		$("#length_mm", this.element).val(Math.round($(element).val() * 25.4));
	}
	if (id == "width_inches"){
		$("#width_mm", this.element).val(Math.round($(element).val() * 25.4));
	}
	if (id == "thickness_inches"){
		$("#thickness_mm", this.element).val(Math.round($(element).val() * 25.4));
	}
	
	if (id == "length_mm"){
		$("#length_inches", this.element).val(Math.round($(element).val() / 2.54) / 10.0);
	}
	if (id == "width_mm"){
		$("#width_inches", this.element).val(Math.round($(element).val() / 2.54) / 10.0);
	}
	if (id == "thickness_mm"){
		$("#thickness_inches", this.element).val(Math.round($(element).val() / 2.54) / 10.0);
	}
	
	//if one of the fields is 0 or blank, don't search, and clear results if they are there
	if ( Number($("#length_mm", this.element).val()) == 0 || Number($("#width_mm", this.element).val()) == 0 || Number($("#thickness_mm", this.element).val()) == 0){
		this.hideResults();
		return;
	}
	
	//perform search (search is defered a bit, so if multiple edits happen quickly they get grouped into one search)
	this.matchingCasesTitle.text("For Your Dimensions");	

	this.showResultsLoading();
	 
	if(typeof this.matchTimer == "number") {
		window.clearTimeout(this.matchTimer);
		delete this.matchTimer;
	}
	
	var self = this;
	this.matchTimer = window.setTimeout(function() {
			$.getJSON(appPath+"case_items/match_json/"+$("#length_mm", this.element).val()+
					"/"+$("#width_mm", this.element).val()+
					"/"+$("#thickness_mm", this.element).val()
					, null, function(data, textStatus) { self.matchesLoaded(data, textStatus, this); });
			
	 }, 1500);

}

TSLaptopSelector.prototype.showResultsLoading = function (){
	
	$(".matching_cases").fadeIn("fast");
	
	$('.matching_cases').block({ 
         message: '<img src="/matcher/app/webroot/img/ajax-loader.gif" /><br/><h3>LOADING</h3>'/*,
         css: {border: 'none', color: '#ffffff', backgroundColor: 'none'}*/
    });
	return;
}

TSLaptopSelector.prototype.showResultsLoaded = function (){
	$(".matching_cases").fadeIn("fast");
	$('.matching_cases').unblock();
}

TSLaptopSelector.prototype.hideResults = function(){
	var self = this;
	$(".matching_cases").fadeOut("fast", function(){
		self.matchingCasesDiv.empty();
	});
	
}



TSLaptopSelector.prototype.clearBrand = function() {
	this.lineSelect.attr("disabled", "disabled");
	this.modelSelect.attr("disabled", "disabled");
	
	this.brandSelect.val("null");
	this.lineSelect.val("null");
	this.modelSelect.val("null");
	
}

TSLaptopSelector.prototype.clearDimensions = function() {
	$(".dimension_selector input", this.element).val("");
}