/**
 * functions used for newSearch 
 */

var newHeightDevices = 0;
var newHeightDesigns = 0;
var designHeight = 138;
var deviceHeight = 68;
var mopen = false;
	
$(document).ready(function(){

	//check if the user has entered a word to search for
	$('#searchButton').click( function(){
		var keyword = document.getElementById('keyword');
		if(keyword.value != "" && keyword.value != document.getElementById('keyword').defaultValue){
			document.getElementById("search_b").submit();
		}
	});
	
	$('#select_presearch,#keyword').click(function() {
		reset_prehandler();
	    //$('#preselectBox').slideDown(150, function() {});
		$('#preselectBox').toggle();
		mopen = ($('#preselectBox').css('display')=='none') ? false : true;
	});
	
	$('#select_presearch').click(function() {
		if(mopen){
			$('#select_presearch').css('background-position','0px -30px');
		}
		else {
			$('#select_presearch').css('background-position','0px -20px');
		}
	});
	
	$('#preselectBox').click(function() {
		reset_prehandler();
	});

	//toggle checked radio buttons
	//the checked one will be unchecked
	var search_inputs = $('#preselectBox').find('input');
	
	//We need to bind click handler as well
	//as FF sets button checked after mousedown, but before click
	search_inputs.bind('click mousedown', (function() {
	    //Capture radio button status within its handler scope,
	    //so we do not use any global vars and every radio button keeps its own status.
	    //This required to uncheck them later.
	    //We need to store status separately as browser updates checked status before click handler called,
	    //so radio button will always be checked.
	    var isChecked;

	    return function(event) {
	        if(event.type == 'click') {
	            if(isChecked) {
	                //Uncheck and update status
	                isChecked = this.checked = false;
	            } else {
	                //Update status
	                //Browser will check the button by itself
	                isChecked = true;
	            }
		    } 
		    else {
		        //Get the right status before browser sets it
		        //We need to use onmousedown event here, as it is the only cross-browser compatible event for radio buttons
		        isChecked = this.checked;
		    }
	    };
	})());
	
	//find out the max height of the result's title
	//for skins
	$('#resultsSkins').find('a.title').each(function(index) {
	    newHeightDesigns = Math.max(newHeightDesigns,$(this).height());
	  });
	$('#resultsSkins').find('li').height(designHeight + newHeightDesigns + 20);
	//for devices
	$('#resultsDevices').find('a.title').each(function(index) {
	    newHeightDevices = Math.max(newHeightDevices,$(this).height());
	  });
	$('#resultsDevices').find('li').height(deviceHeight + newHeightDevices + 20);
	
	
	$('#select_presearch').hover(function(){
		if(mopen){
			$('#select_presearch').css('background-position','0px -30px');
		}
		else {
			$('#select_presearch').css('background-position','0px -20px');
		}
		},
		function (){
			if(mopen){
				$('#select_presearch').css('background-position','0px -10px');
			}
			else {
				$('#select_presearch').css('background-position','0px 0px');
			}
		}
	)
});

//close submenu when click-out;
function closePreselectBox(){
	if(mopen) {
		mopen = false;
		$('#select_presearch').css('background-position','0px 0px');
	}
	preselect_close();
	
}

document.onmousedown = closePreselectBox;//preselect_close;

var preselect_handler=0;

function preselect_hide(){
	reset_prehandler();
	$('#preselectBox').slideUp(150, function() {});
	//document.getElementById('select_presearch').style.backgroundPosition = '0 0';
}

function preselect_close() {
	var timeout = 250;
	if (preselect_handler == 0) {
		preselect_handler = window.setTimeout("preselect_hide()", timeout);
	}
}

function preselect_show(){
	reset_prehandler();
	document.getElementById('preselectBox').style.display = 'block';
	//document.getElementById('select_presearch').style.backgroundPosition = '0 -10px';
}

function reset_prehandler() {
	if (preselect_handler != 0) {
		clearTimeout(preselect_handler);
	} 
	preselect_handler=0;
}

//renders search results by click on "SEE MORE"
function appendResults(results, type, step, gray_outs)
{
	var resultsShownElm = document.getElementById('resultsShown');
	var resultsShown = parseInt(resultsShownElm.innerHTML);
	var resultsShownVar = resultsShown;

	var aclass = '';
    var rel = '';
    var imgClass = '';
    var maxAHeightDesigns = 0;
    var maxAHeightDevices = 0; 
    
	for (key in results){
	 	if(key > resultsShownVar-1 && key < resultsShownVar + step){
		 	if(type == "design"){
		 		if(!results[key]['licensed']) {
		 	        if (gray_outs)
		 	        {
		 	            aclass = " lightbox gray_out";
		 	            imgClass = ' class="gray_out"';
		 	        }
		 	         rel = 'rel="' + results[key]['id'] + '" ';
		 	    }
				var newItemLi = document.createElement("li"); //add list element

				var newItemSpinner = document.createElement("div");
				newItemSpinner.className = "spinner";
				
				var newItemA = document.createElement("a");
				newItemA.className = "imageWallItem hoverdetails";
				newItemA.href = results[key]['imageUrl'];
				
				var newItemImg = document.createElement("img"); //image of the skin
				newItemImg.nameClass = imgClass; //add class to the image of the skin
				newItemImg.src = results[key]['thumbnailUrl'];
				newItemImg.alt = "";
				
				var newItemATitle = document.createElement("a"); 
				newItemATitle.href = results[key]['imageUrl'];
				newItemATitle.text = results[key]['title'];
				newItemATitle.className = 'title';
				newItemATitle.innerText = results[key]['title']; // for ie6, 7
				
				newItemA.appendChild(newItemImg);
				newItemSpinner.appendChild(newItemA);
				newItemLi.appendChild(newItemSpinner);
				newItemLi.appendChild(newItemATitle);
				document.getElementById("resultsSkins").appendChild(newItemLi);
				//calculate the max height of the new elements
				maxAHeightDesigns = Math.max(maxAHeightDesigns, newItemATitle.offsetHeight);
			}
			else{
				var newItemLi = document.createElement("li"); //add list element
				newItemLi.className = "devices";
				
				var newItemSpinner = document.createElement("img");
				newItemSpinner.src = "/images/icons/spinner.gif";
				newItemSpinner.alt = "";
				newItemSpinner.className = "spinner";
				
				var newItemA = document.createElement("a");
				newItemA.href = results[key]['url'];
				newItemA.className = "device_container";
				
				var newItemATitle = document.createElement("a");
				newItemATitle.href = results[key]['url'];
				newItemATitle.text = results[key]['title'];
				newItemATitle.className = 'title';
				newItemATitle.innerText = results[key]['title'];
				
				var newItemImg = document.createElement("img"); 
				newItemImg.src = results[key]['thumbnailUrl'];
				newItemImg.alt = "";
				newItemA.appendChild(newItemImg);
				
				newItemLi.appendChild(newItemSpinner);
				newItemLi.appendChild(newItemA);
				newItemLi.appendChild(newItemATitle);
				document.getElementById("resultsDevices").appendChild(newItemLi);
				maxAHeightDevices = Math.max(maxAHeightDevices, newItemATitle.offsetHeight);
			}
		}
	}
	//compare the new calculated height with the old one
	newHeightDesigns = Math.max(newHeightDesigns,maxAHeightDesigns);
	newHeightDevices = Math.max(newHeightDevices,maxAHeightDevices);
	//set the height of the li according to the new calculated max height of the title
	$('#resultsSkins').find('li').height(designHeight + newHeightDesigns + 20);
	$('li.devices').height(deviceHeight + newHeightDevices + 20);

	resultsShown = resultsShownVar + step;
	var numResults = results.length;
	if(resultsShown >= numResults){
		resultsShown = numResults;
		document.getElementById("mainContentViewAll").style.display = "none";
	}
	resultsShownElm.innerHTML = resultsShown;
}