var crossSellEngineClass = function(){
	this.prefixId = "";
/*
this.offersRs = {
	template: "",
	data: {
		detailsContent: "Check-in: Thursday, xx Apr   Check-out: Friday, xx Apr   Nights: x",
		items: []
	} ,
	error: {
		code: "",
		content: "<table><tr><td><div class="noResultsContent">No Results. Please...</div></td></tr></table>" 
	}
}

*/	
	this.offersRs = null;
	this.visibleItemsCount = 0;
	this.firstVisibleItem = {x:0,y:0};
	this.wrapHtml = {allStart:"<table class='blockOffersTable'><tr>",allEnd:"</tr></table>",itemStart:"<td class='blockOffersTD'>",itemEnd:"</td>"};
	this.buttonsState = {top:4,right:4,bottom:4,left:4}; // values: 1 - active; 2 - disabled; 3 - notAvail; 4 - hidden		
	
	this.init = function(params){
		this.prefixId = params.prefixId;
		var setLinkEvent = function(postfixId, params){
			document.getElementById(this.prefixId+postfixId).getElementsByTagName("A")[0].onclick = function(o,params){return function(){o.onClickNavigation(params);return false}}(this,params)
		}
		
		setLinkEvent.apply(this,["_navTop","top"]);
		setLinkEvent.apply(this,["_navRight","right"]);
		setLinkEvent.apply(this,["_navBottom","bottom"]);
		setLinkEvent.apply(this,["_navLeft","left"]);						
		
		this.load(params);
	};
	
	this.onClickNavigation = function(vector){
		var p = {};
		switch(vector){
			case "top":
				p = {dX:0,dY:-1};
				break;
			case "right":
				p = {dX:1,dY:0};
				break;
			case "bottom":
				p = {dX:0,dY:1};
				break;
			case "left":
				p = {dX:-1,dY:0};
				break;
		}
		this.show(p);
			
	};

	this.show = function(params){
		var dX = (params.dX) ? params.dX : 0;
		var dY = (params.dY) ? params.dY : 0;
		var x = this.firstVisibleItem.x + dX;
		var y = this.firstVisibleItem.y + dY;		
		var cols = this.offersRs.data.items[0].length;
		var rows = this.offersRs.data.items.length;		
		var buttonsState = {}; // {top,right,bottom,left}; values: 1 - active; 2 - disabled; 3 - notAvail; 4 - hidden
		var resArea = document.getElementById(this.prefixId + "_result");
		if(!this.visibleItems){
			if(!resArea.offsetWidth){
				setTimeout(function(o,params){ return function(){o.show(params)}}(this, params),100);
				return;
			}
			resArea.visibility = "hidden";
			resArea.innerHTML = this.wrapHtml.allStart + this.wrapHtml.itemStart + this.getItemHTML(0,0) + this.wrapHtml.itemEnd + this.wrapHtml.allEnd;
			this.visibleItems = Math.floor(resArea.offsetWidth / resArea.getElementsByTagName("TD")[0].offsetWidth); 
			this.visibleItems = (this.visibleItems > cols) ? cols : this.visibleItems;
			resArea.innerHTML = "";
			resArea.visibility = "visible";
					
		}	
		
		var oDetailsArea = document.getElementById(this.prefixId+"_details");
		if(oDetailsArea){
			oDetailsArea.innerHTML = this.offersRs.data.detailsContent;	
		}		
				
		buttonsState = {top:1,right:1,bottom:1,left:1};
				
		if(x<=0){
			x = 0;
			buttonsState.left = 2;
		}
		else if(x+this.visibleItems >= cols){
			x = cols - this.visibleItems;
			buttonsState.right = 2;
		}
		
		if(this.visibleItems >= cols){
			buttonsState.left = 4;
			buttonsState.right = 4;					
		}
		
		if(y<=0){
			y = 0;
			buttonsState.top = 2;
		}
		else if(y >= rows-1){
			y = rows - 1;
			buttonsState.bottom = 2;
		}				
		
		if(rows == 1){
			buttonsState.top = 4;
			buttonsState.bottom = 4;					
		}				
		
		this.firstVisibleItem.x = x;
		this.firstVisibleItem.y = y;				
		this.buttonsState = buttonsState;

		this.setButtonState("_navTop",buttonsState.top);
		this.setButtonState("_navRight",buttonsState.right);
		this.setButtonState("_navBottom",buttonsState.bottom);
		this.setButtonState("_navLeft",buttonsState.left);												
		
		var itemsHTML = "";
		
		for(var i=0; i<this.visibleItems; i++){
			itemsHTML+= this.wrapHtml.itemStart + this.getItemHTML(x+i,y) + this.wrapHtml.itemEnd; 
		}				
		
		itemsHTML = this.wrapHtml.allStart + itemsHTML + this.wrapHtml.allEnd;
		resArea.innerHTML = itemsHTML;

				
	};
	
	this.getItemHTML = function (x,y){
		var html = "";
		html = this.offersRs.data.items[y][x];
		return html;
	};
	
	this.setButtonState = function (postfixId, state){
		var oBtn = document.getElementById(this.prefixId+postfixId);
		if(oBtn){
			var btnClass = "";				
			switch(state){
				case 1:
					btnClass = "active";
					break;
				case 2:
					btnClass = "disabled";
					break;
				case 3:
					btnClass = "notAvail";
					break;
				case 4:
					btnClass = "hidden";
					break;
			}
			oBtn.className = btnClass; 
		}	
	};	
}


/* public methods of crossSellEngineClass below may be redefined in other places */
	
crossSellEngineClass.prototype.load = function(params){
		if(params.ajaxConfig){
			var stateClass = "crossSellOffers crossSellOffersLoading"; // loading, view result, view no result, view error msg
			var oArea = document.getElementById(this.prefixId);
			oArea.className = stateClass;	
			
	 	var ajaxConfig = params.ajaxConfig;
			ajaxConfig.extraParams = params;
			ajaxConfig.success = function(o){return function(response, config){o.loadSuccessCallBack(response, config)}}(this);
			ajaxConfig.error = function(o){return function(response, config){o.loadErrorCallBack(response, config)}}(this);			
			ajax.request(ajaxConfig);		
		}
	};
	
crossSellEngineClass.prototype.loadSuccessCallBack = function(response, config){
		var stateClass = "crossSellOffers"; // loading, view result, view no result, view error msg
		var oArea = document.getElementById(this.prefixId);
		this.offersRs = response;
		if(this.offersRs.data){
			/* result */
			stateClass+= "";
			oArea.className = stateClass;	
			this.show({});
		}
		else {
			/* error with success marker */
			document.getElementById(this.prefixId+"_noResult").innerHTML = this.offersRs.error.content;
			stateClass+= " crossSellOffersNoResults";
			oArea.className = stateClass;				
		}	
	};	
	
crossSellEngineClass.prototype.loadErrorCallBack = function(response, config){
		var stateClass = "crossSellOffers"; // loading, view result, view no result, view error msg
		var oArea = document.getElementById(this.prefixId);
		this.offersRs = response;
		
		/* error without success marker */
		stateClass+= " crossSellOffersError";
		oArea.className = stateClass;			
	
	};