var d = document;

function pad(n, p) {
	while(String(n).length < p) n = '0' + n;
	return n;
}

// create the searchSheet object
var searchSheet = {};

// Create Search Sheet
searchSheet.createSearchSheet = function (div) {
	// search sheet HTML
	var sHTML = "";

	sHTML += "<div class=\"column span-10 last search-sheet\">";
	sHTML += "<h1 class=\"section-heading\">SEARCH\</h1>";
	sHTML += "<form action=\"/search\" name=\"search_form\" method=\"post\" accept-charset=\"utf-8\">";
	sHTML += "<div class=\"column span-9 append-1 first last\">";
	sHTML += "<p class=\"search_box\">";
	sHTML += "<span class=\"sbox_l\"></span>";
	sHTML += "<span class=\"sbox\"><input type=\"search\" id=\"srch_fld\" name=\"srch_fld\" placeholder=\"Search\" autosave=\"bsn_srch\"results=\"5\" onkeyup=\"applesearch.onChange('srch_fld','srch_clear')\" class=\"span-8\"/></span>";
	sHTML += "<span class=\"sbox_r\"id=\"srch_clear\"></span>";
	sHTML += "</p>";
	sHTML += "</div>";
	sHTML += "<div class=\"column span-10 first last\">";
	sHTML += "<div class=\"column span-5 first\">";
	sHTML += "<h2 class=\"section-heading\">SEARCH:</h2>";
	sHTML += "<ul class=\"checkbox-list column span-5\">";
	sHTML += "<li class=\"column span-1 first\"><input type=\"checkbox\"name=\"search_opt[]\"value=\"all\"/> <label for=\"search_opt[]\">all</label></li>";
	sHTML += "<li class=\"column span-1\"><input type=\"checkbox\"name=\"search_opt[]\"value=\"titles\"/> <label for=\"search_opt[]\">titles</label></li>";
	sHTML += "<li class=\"column span-1\"><input type=\"checkbox\"name=\"search_opt[]\"value=\"tags\"/> <label for=\"search_opt[]\">tags</label></li>";
	sHTML += "<li class=\"column span-2 last\"><input type=\"checkbox\"name=\"search_opt[]\"value=\"full text\"/> <label for=\"search_opt[]\">full text</label></li>";
	sHTML += "</ul>";
	sHTML += "</div>";
	sHTML += "<div class=\"column span-5 last\">";
	sHTML += "<h2 class=\"section-heading\">INCLUDE RESULTS FROM:</h2>";
	sHTML += "<ul class=\"checkbox-list column span-5\">";
	sHTML += "<li class=\"column span-1 first\"><input type=\"checkbox\"name=\"search_results[]\"value=\"all\"/> <label for=\"search_results[]\">all</label></li>";
	sHTML += "<li class=\"column span-1\"><input type=\"checkbox\"name=\"search_results[]\"value=\"talk\"/> <label for=\"search_results[]\">talk</label></li>";
	sHTML += "<li class=\"column span-1\"><input type=\"checkbox\"name=\"search_results[]\"value=\"work\"/> <label for=\"search_results[]\">work</label></li>";
	sHTML += "<li class=\"column span-2 last\"><input type=\"checkbox\"name=\"search_results[]\"value=\"case studies\"/> <label for=\"search_results[]\">case notes</label></li>";
	sHTML += "</ul>";
	sHTML += "</div>";
	sHTML += "</div>";
	sHTML += "<div class=\"column span-3 prepend-7 last\">";
	sHTML += "<div class=\"dh_new_media_shell\">";
	sHTML += "<a href=\"#\" class=\"dh_new_media\" onclick=\"searchSheet.animateSheet('search')\">";
	sHTML += "<div class=\"tr\"><div class=\"bl\"><div class=\"br\">";
	sHTML += "<span>Cancel</span>";
	sHTML += "</div></div></div>";
	sHTML += "</a>";
	sHTML += "</div>";
	sHTML += "<div class=\"dh_new_media_shell\">";
	sHTML += "<a href=\"/search\" class=\"dh_new_media\" onclick=\"document.search_form.submit(); return false;\">";
	sHTML += "<div class=\"tr\"><div class=\"bl\"><div class=\"br\">";
	sHTML += "<span>Search</span>";
	sHTML += "</div></div></div>";
	sHTML += "</a>";
	sHTML += "</div>";
	sHTML += "</div>";
	sHTML += "</form>";
	sHTML += "</div>";

	// set innerHTML. so dirty.
	div.innerHTML = sHTML;

	// set up Safari style search box
	applesearch.init();
	
	// set up checkboxes
	var findCheckboxes = function(el) {
		var type = el.getAttribute('type');
		return (type == "checkbox");
	}

	var checkBoxes = YAHOO.util.Dom.getElementsBy(findCheckboxes, "input", div);
	YAHOO.util.Event.addListener(checkBoxes, 'click', searchSheet.toggleCheck);
	
	for (var i=0; i < checkBoxes.length; i++) {
		if (checkBoxes[i].name == "search_results[]") {
			if (window.location.pathname.match(/\/talk\/?/) && checkBoxes[i].value == "talk") {
				checkBoxes[i].checked = "checked";
				break;
			} else if (window.location.pathname.match(/\/work\/?/) && checkBoxes[i].value == "work") {
				checkBoxes[i].checked = "checked";
				break;
			} else if (window.location.pathname.match(/\/case\/?/) && checkBoxes[i].value == "case studies") {
				checkBoxes[i].checked = "checked";
				break;
			} if (!window.location.pathname.match(/\/talk|work|case\/?/) && checkBoxes[i].value == "all") {
				checkBoxes[i].checked = "checked";
				break;
			}
		} else {
			if (checkBoxes[i].value == "all") {
				checkBoxes[i].checked = "checked";
			}
		}
	}
}

// Create Filter Sheet
searchSheet.createFilterSheet = function (div) {

	var fHTML = "";
	fHTML += "<div class=\"column span-10 first last search-sheet\">";
	fHTML += "<h1 class=\"section-heading\">FILTER\</h1>";
	fHTML += "<form action=\"/filter\" method=\"post\" name=\"filter_form\" accept-charset=\"utf-8\">";
	fHTML += "<div class=\"clear\">";
	fHTML += "<p class=\"column span-10\" id=\"filter-01\">";
	fHTML += "<p>";
	fHTML += "Filter work tagged with: ";
	fHTML += "<select class=\"span-2\" name=\"tag_id[]\">";
	fHTML += "<option value=\"1\">Nullam Porttitor</option>";
	fHTML += "<option value=\"2\">Mauris Aliquet</option>";
	fHTML += "<option value=\"3\">Donec Non Tortor</option>";
	fHTML += "<option value=\"4\">Quisque in Wisi</option>";
	fHTML += "<option value=\"5\">Curabitur Quis</option>";
	fHTML += "</select>";
	fHTML += "<input type=\"image\" src=\"/assets/images/logos/plus-button.png\" name=\"plus\" value=\"+\" class=\"plus-minus\" id=\"filter-plus-01\" onclick=\"searchSheet.addRow(this); return false;\" />";
	fHTML += "</p>";
	fHTML += "</p>";
	fHTML += "</div>";
	fHTML += "<div class=\"column span-5 append-5 first\">";
	fHTML += "<h2 class=\"section-heading\">INCLUDE RESULTS FROM:</h2>";
	fHTML += "<ul class=\"checkbox-list column span-5\">";
	fHTML += "<li class=\"column span-1 first\"><input type=\"checkbox\" name=\"search_results[]\" value=\"all\" /> <label for=\"search_results[]\">all</label></li>";
	fHTML += "<li class=\"column span-1\"><input type=\"checkbox\" name=\"search_results[]\" value=\"talk\" /> <label for=\"search_results[]\">talk</label></li>";
	fHTML += "<li class=\"column span-1\"><input type=\"checkbox\" name=\"search_results[]\" value=\"work\" /> <label for=\"search_results[]\">work</label></li>";
	fHTML += "<li class=\"column span-2 last\"><input type=\"checkbox\" name=\"search_results[]\" value=\"case studies\" /> <label for=\"search_results[]\">case studies</label></li>";
	fHTML += "</ul>";
	fHTML += "</div>";
	fHTML += "<div class=\"column span-3 prepend-7 last\">";
	fHTML += "<div class=\"dh_new_media_shell\">";
	fHTML += "<a href=\"#\" class=\"dh_new_media\" onclick=\"searchSheet.animateSheet('filter')\">";
	fHTML += "<div class=\"tr\"><div class=\"bl\"><div class=\"br\">";
	fHTML += "<span>Cancel</span>";
	fHTML += "</div></div></div>";
	fHTML += "</a>";
	fHTML += "</div>";
	fHTML += "<div class=\"dh_new_media_shell\">";
	fHTML += "<a href=\"/filter\" class=\"dh_new_media\" onclick=\"document.filter_form.submit(); return false;\">";
	fHTML += "<div class=\"tr\"><div class=\"bl\"><div class=\"br\">";
	fHTML += "<span>Filter</span>";
	fHTML += "</div></div></div>";
	fHTML += "</a>";
	fHTML += "</div>";
	fHTML += "</div>";
	fHTML += "</form>";
	fHTML += "</div>";

	// set innerHTML. so dirty.
	div.innerHTML = fHTML;
}

searchSheet.addRow = function (button) {
	// find the containing DIV
	var container = YAHOO.util.Dom.getAncestorByTagName(button, "DIV");
	var row = YAHOO.util.Dom.getAncestorByTagName(button, "P");
	var preId = row.id.substring(0, row.id.length-2);

	var i = 0;
	var thisRow;

	while (thisRow = document.getElementById(preId+pad(i+1, 2))) {
		// loop to find how many rows there are
		i++;
	}

	var lastRow		= document.getElementById(preId+pad(i, 2));
	var newRow		= row.cloneNode(true);
	newRow.id		= preId+pad(i+1, 2);
	
	// if first row
	if (row.id.substr(-2) == "01") {
		var catSelect = newRow.firstChild;
		// update class on category select
		catSelect.className = "column span-2";
	
		// add AND/OR select
		var andOrSpan = catSelect.cloneNode(true);
		andOrSpan.className = "column span-1";

		var andOrHTML = "<span class=\"column span-1\">";
		andOrHTML    += "<select class=\"span-1\" name=\"tag_andor[]\">";
		andOrHTML    += "<option value=\"and\">and</option>";
		andOrHTML    += "<option value=\"or\">or</option>";
		andOrHTML    += "</select>";
		andOrHTML    += "</span>";
	
		andOrSpan.innerHTML = andOrHTML;
		newRow.insertBefore(andOrSpan, catSelect);
		
		// add minus button
		var minusHTML = "<input type=\"image\" src=\"/assets/images/logos/minus-button.png\" name=\"minus\" value=\"-\" class=\"plus-minus\" id=\"filter-minus-01\" onclick=\"searchSheet.removeRow(this); return false;\" />";
		newRow.lastChild.innerHTML += minusHTML;
	}
	
	// correct plus / minus IDs
	var buttons = newRow.getElementsByTagName('INPUT');
	buttons[0].id = "filter-plus-"+pad(i+1, 2);
	buttons[1].id = "filter-minus-"+pad(i+1, 2);
		
	container.insertBefore(newRow, lastRow.nextSibling);

	// grow container
	var searchDiv = d.getElementById('search');
	var anim = new YAHOO.util.Anim(searchDiv);
	var targH = searchDiv.firstChild.clientHeight;
	anim.attributes  = { height: { to: targH } };
	anim.duration = 0.2;
	anim.method   = YAHOO.util.Easing.easeOut;
	
	anim.animate();

	return false;
}

searchSheet.removeRow = function (button) {
	// find the containing DIV
	var container = YAHOO.util.Dom.getAncestorByTagName(button, "DIV");
	var row = YAHOO.util.Dom.getAncestorByTagName(button, "P");
	container.removeChild(row);
	
	var rows = container.getElementsByTagName("P");
	
	// reorder row IDs
	var j=0;
	for (var i = rows.length - 1; i >= 0; i--){
		var row = rows[i];
		var preId = row.id.substring(0, row.id.length-2);
		// set new ID
		row.id = preId+pad(i+1, 2);
		
		// set plus/minus button ids too
		// correct plus / minus IDs
		var buttons = row.getElementsByTagName('INPUT');
		buttons[0].id = "filter-plus-"+pad(i+1, 2);
		if (buttons[1]) buttons[1].id = "filter-minus-"+pad(i+1, 2);
	};
	
	// shrink container
	var searchDiv = d.getElementById('search');
	YAHOO.util.Dom.setStyle(searchDiv, 'height', searchDiv.firstChild.clientHeight+"px");

	return false;
}

searchSheet.animateSheet = function (id) {
	var containerDiv = document.getElementById('container');
	var sDiv = document.getElementById('search');
	
	if (!sDiv) {
		// create search holder
		var sDiv = document.createElement('div');
		sDiv.setAttribute('id', 'search');
		YAHOO.util.Dom.addClass(sDiv, "column");
		YAHOO.util.Dom.addClass(sDiv, "span-12");
		containerDiv.insertBefore(sDiv, document.getElementById('header').nextSibling);
	}
	
	var anim = new YAHOO.util.Anim('search');
	var targH, dur, ease;

	var type = (id.indexOf('search') > -1) ? "search" : "filter";

	if (sDiv.innerHTML == "") {	
		if (type == "search") {
			searchSheet.createSearchSheet(sDiv);
		} else {
			searchSheet.createFilterSheet(sDiv);
		}

		// get full height
		targH = sDiv.clientHeight;
		dur   = 0.5;
		ease  = YAHOO.util.Easing.easeOut;
	
		// set height to 0
		sDiv.style.height  = "0px";
		sDiv.style.borderBottom = "1px solid #CCC";
	
	} else {
		targH = 0;
		dur   = 0.2;
		ease  = YAHOO.util.Easing.easeOut;

		if (sDiv.firstChild.firstChild.innerHTML.toLowerCase().indexOf(type) > -1) {
			// if sheet was closed destroy it.
			var callback = function() {
				containerDiv.removeChild(sDiv);
			}
		} else {
			// swap with other sheet
			var callback = function () {
				sDiv.innerHTML = "";
				sDiv.style.height = "";
				sDiv.style.borderBottom = "none";
				if (type == "search") {
					searchSheet.animateSheet("search-button");
				} else {
					searchSheet.animateSheet("filter-button");
				}
				
			}
		}

		anim.onComplete.subscribe(callback);
	}

	anim.attributes  = { height: { to: targH } };
	anim.duration = dur;
	anim.method   = ease;

	anim.animate();
}

searchSheet.toggleCheck = function(e) {
	// set up checkboxes
	var findCheckboxes = function(el) {
		var type = el.getAttribute('type');
		return (type == "checkbox");
	}

	var checkBoxes = YAHOO.util.Dom.getElementsBy(findCheckboxes, "input", "search");
	
	for (var i=0; i<checkBoxes.length; i++) {
		if (checkBoxes[i].name == this.name) {
			if (this.value == "all" && checkBoxes[i] != this) {
				checkBoxes[i].checked = false;
			} else if (checkBoxes[i].value == "all" && checkBoxes[i] != this) {
				checkBoxes[i].checked = false;
			}
		}
	}
}

searchSheet.sheetHandler = function(e) {
	searchSheet.animateSheet(this.href);
	YAHOO.util.Event.preventDefault(e);
	return false;
}

searchSheet.init = function() {
	// find search & filter links
	var findSearch = function(el) {
		var href = el.getAttribute('href');
		return (href.match(/\/search\/?$/));
	}

	var searchLinks = YAHOO.util.Dom.getElementsBy(findSearch, "a");
	YAHOO.util.Event.addListener(searchLinks, 'click', searchSheet.sheetHandler);	
}

YAHOO.util.Event.onAvailable('search-button', searchSheet.init);