/*
 * picsearchImage.js
 *
 * Author: Jon Eriksmo
 * Email: jon@itano-systems.com
 * Date: 2009-11-09
 *
 */

function searchResultView(browserWidth) {
	// Some static values
	this.adWidth         = 165;		// The ad box
	this.filterWidth     = 154;		// The filter column
	this.adMargin        = 0;		// The margin to the left of the ad box
	this.imageWidth      = 158;		// The width of an image result including margin
	this.containerMargin = 0;		// The left/right margin of the container
	this.maxColumns      = 10;		// Max columns we will display (must be a value of 4-10)
	
	// These are temporary values that will be set in the calculateView() function
	this.browserWidth    = 0;
	this.containerWidth  = 0;
	this.resultWidth     = 0;
	this.imageColumns    = 0;
	this.resultPadding   = 0;
	

	var resultsPerPage = 30;

	this.getBrowserWidth = function() {
		if (!(document.documentElement.clientWidth == 0)) {
			return document.documentElement.clientWidth - 17;
		}
		else {
			return document.body.clientWidth - 17;
		}
	}	

	this.getNumberColumns = function(available) {
		for (var i = this.maxColumns; i >= 3; i--) {
			resultSize = (i * this.imageWidth);
			if (resultSize <= available || i == 3) {
				return i;
				break;
			}
		}
	}

	this.calculateView = function() {
		// First calculate the container width
		this.browserWidth   = this.getBrowserWidth();
		this.containerWidth = this.browserWidth;
		
		// We will never go below a container width of 700px
		this.containerWidth = Math.max(this.containerWidth, 700);

		
		// Then calculate the rest
		this.resultWidth   = this.containerWidth - this.adWidth - this.adMargin - this.filterWidth;
		this.imageColumns  = this.getNumberColumns(this.resultWidth);
		this.resultPadding = Math.floor((this.resultWidth - (this.imageColumns * this.imageWidth)) / this.imageColumns / 2 - 1 );
		if (this.resultPadding < 1) {
			this.resultPadding = 0;
		}
	}
	

	this.updateStartView = function() {

		// Update the result page links
		var browserWidth = this.getBrowserWidth();
		var resultWidth  = browserWidth - this.adWidth - this.adMargin - this.filterWidth;
		var columns      = this.getNumberColumns(resultWidth);

		// Target the links within related searches passing on "width" as a parameter
		$('a.linkSelector').each(function() {
	        this.href = this.href + "&width=" + browserWidth;
	    });
	}
	
	this.updateView = function() {

		// Update the result page links
		var browserWidth = this.getBrowserWidth();
		var resultWidth  = this.containerWidth - this.adWidth - this.adMargin - this.filterWidth;
		var columns      = this.getNumberColumns(resultWidth);

		// Target the links within related searches passing on "width" as a parameter
		$('a.linkSelector').each(function() {
			var expr = new RegExp(/width=[0-9]*/);
			var newHref = $(this).attr("href").replace(expr, "width=" + browserWidth);
			$(this).attr("href", newHref);
		});

		// Finally update all width references
		// this.updateWidthReferences();
	}

	this.updateWidthReferences = function() {
		var browserWidth = this.getBrowserWidth();
		// First update all input values with the name "width"
		$("input[name=width]").each(function(idx, item) {
			//alert(browserWidth);
			$(this).attr("value", browserWidth);
		});
		
		// Target the links within clsContainer passing on "width" as a parameter
		$('div.clsContainer').children().each(function(idx, item) {
			var expr = new RegExp(/width=[0-9]*/);
			var newHref = $(this).attr("href").replace(expr, "width=" + browserWidth);
			$(this).attr("href", newHref);
		});

		// Target the links within related searches passing on "width" as a parameter
		$('#relatedSearches').children().each(function(idx, item) {
			var expr = new RegExp(/width=[0-9]*/);
			var newHref = $(this).attr("href").replace(expr, "width=" + browserWidth);
			$(this).attr("href", newHref);
		});
		
	}
	
	this.alertValues = function() {
		alert(  "adWidth: " + this.adWidth + 
				"\nfilterWidth: " + this.filterWidth + 
				"\nadMargin: " + this.adMargin + 
				"\nbrowserWidth: " + this.browserWidth +
				"\ncontainerWidth: " + this.containerWidth +
				"\ncontainerMargin: " + this.containerMargin + 
				"\nimageColumns: " + this.imageColumns +
				"\nresultWidth: " + this.resultWidth + 
				"\nresultPadding: " + this.resultPadding +
				"\nimageWidth: " + this.imageWidth);
	}
}

srw = new searchResultView();
srw.calculateView();
// srw.alertValues();
srw.updateStartView();

// And if the user resizes the window, do it also
$(window).bind('resize', function() {
	srw = new searchResultView();
	srw.calculateView();
	srw.updateView();
});