var pageSize = 6;
var tags = {"data": []};
var debug = false;

var SEARCH_WATERMARK_CLASS = "watermark";
var SEARCH_WATERMARK_TEXT = "Search here";
var DISABLED_BUTTON_IMG = "images/button_download_disabled.png";
var ENABLED_BUTTON_IMG = "images/button_download.png";
var GREY_SPAN_IMG = "http://www.philkocher.com/pkocher/images/greyspan.gif";
var GREY_SPAN_IMG_HEIGHT = 20;
var GREY_SPAN_IMG_WIDTH = 400;
var DROPDOWN_SELECT_TEXT = "-Select Your Resolution-";
var DROPDOWN_SELECT_VALUE = "-1";

var RELATIVE_CLASS = "relative";
var SELECTED_TAB_CLASS = "selected";
var PAGE_LIST_CLASS = "pageList";
var PAGE_NUM_CLASS = "pageNum";
var SELECTED_CLASS = ".selected";
var PAGE_PREFIX_CLASS = ".page"
var SELECTED_INDEX_CLASS = ".selectedIndex";
var SEARCH_AREA_LIST_CLASS = "search";
var BOTTOM_PAGE_LIST_CLASS = "bottom";
var TAG_SEARCH_ID = "tagSearch";
var GALLERY = "#galleries";
var FOOTER = "#foot";
var CONTACT_INFO = "#contactInfo";

var TOKEN = "{RESOLUTION}";
var PREVIEW_TOKEN = "prev";

$(function(){
	ini();
	
	function ini(){
		//add a saftey check for firebug logging
		if(typeof console == 'undefined'){	
			console = new Object();
			console.log = function(msg){
				return;
			};
		}
		
		//load all the tags
		$.each(data.rows, function(i, wp){
			$.each(wp.tags, function(j, t){
				var cTag = t.toLowerCase();
				var tagInfo = new Object();
				tagInfo.tag = cTag;
				tagInfo.wp = wp;
				tags.data.push(tagInfo);
			});
		});
		
		//preload all images
		var imgs = [];
		$.each(data.rows, function(i, wp){
			var img = new Image();
			img.src = wp.base.replace(TOKEN, PREVIEW_TOKEN);
			img.onload = function(){
				console.log('finished loading ' + $(this).attr('src'));
			}
			imgs.push(img);
		});
		
		var cPage = 0;
		var total = data.rows.length;
		var numOfPages = Math.round(total/pageSize);
		
		writePages(cPage, numOfPages);
		var rows = getRows(cPage, pageSize);
		loadContent(rows);
	}
	
	function scroll(){
		$.scrollTo('#logo', 400);
	}
	
	$(".bottom .pageNum").live("click", function(){
		$.scrollTo('#foot');
		setTimeout(scroll, 1000);
	});
	
	$(".pageNum").live("click", function(){
		$("#" + TAG_SEARCH_ID).val("");
		$("#" + TAG_SEARCH_ID).trigger("blur");
		var btn = $(this);
		var index = parseInt(btn.text()) - 1;
		
		var gal = $(GALLERY);
		var f = $(FOOTER);
		f.hide();
		if($.browser.msie){
			gal.html("");
			$(SELECTED_CLASS).removeClass(SELECTED_TAB_CLASS);
			$(PAGE_PREFIX_CLASS + index).addClass(SELECTED_TAB_CLASS);
			var rows = getRows(index, pageSize);
			loadContent(rows);
			gal.show();
			f.show();
		}
		else{
			gal.addClass(RELATIVE_CLASS)
			gal.animate(
				{left: '-=1000', opacity: 0}, 
				{duration: 200, 
				easing: 'easeInQuint', 
				complete: function(){
					gal.html("");
					$(SELECTED_CLASS).removeClass(SELECTED_TAB_CLASS);
					$(PAGE_PREFIX_CLASS + index).addClass(SELECTED_TAB_CLASS);
					var rows = getRows(index, pageSize);
					loadContent(rows);
					gal.animate(
						{left: 0, opacity: 100}, 
						{duration: 400, 
						easing: 'easeOutQuint', 
						complete: function(){
							gal.show();
							f.show();
						}}
					);
				}}
			);
		}
		
	});
	
	function getRows(cPage, pageSize){
		var rowsToLoad = [];
		var newRowIndex = 0;
		var uBound = ((pageSize*cPage)+pageSize);
		var lBound = (cPage * pageSize);
		for(num=lBound;num<uBound;num++){
			rowsToLoad[newRowIndex++] = data.rows[num];
		}
		
		return rowsToLoad;
	}
	
	function writePages(cPage, numOfPages){
		var pageList = $("<div>").addClass(PAGE_LIST_CLASS);
		var list = $("<ul>");
		for(i=0;i<numOfPages;i++){
			var pageLink = $("<a>")
				.addClass(PAGE_NUM_CLASS)
				.attr("href", "javascript://")
				.text((i+1));
			
			var listItem = $("<li>").append(pageLink);
			listItem.addClass("page" + i);
			if(i == cPage){
				listItem.addClass(SELECTED_TAB_CLASS);
			}
			list.append(listItem);
			
			pageList.append(list);
		}
		var txt = $("<input>").attr("type", "text").attr("id", TAG_SEARCH_ID);
		//add watermark to textbox
		txt.watermark(SEARCH_WATERMARK_TEXT, {className: SEARCH_WATERMARK_CLASS, useNative: true});
		var li = $("<li>").addClass(SEARCH_AREA_LIST_CLASS);
		list.append(li.append(txt));
		$(CONTACT_INFO).after($("<div>").css({"clear":"both"}));
		$(CONTACT_INFO).after(pageList);
		
		var clone = pageList.clone();
		clone.addClass(BOTTOM_PAGE_LIST_CLASS);
		$.each(clone.find("li"), function(i, li){
			if($(li).hasClass(SEARCH_AREA_LIST_CLASS)){
				$(li).remove();
			}
		});
		$(GALLERY).after(clone);
		clone.after($("<div>").addClass("clear"));
	}
	
	/*
	 *
	 * This fires when the user selects a value from the dropdown list
	 *
	 */
	$(".wpSelect").live("change", function(){
		//add change code here to enable and disable the download button
		var btnDl = $(this).parent(".gallery").find("img.downloadButton");
		
		if($(this).val() == DROPDOWN_SELECT_VALUE){
			//set state of button to disabled
			var btnSrc = btnDl.attr("src", DISABLED_BUTTON_IMG)
				.attr("disabled", true);
		}
		else{
			//set state of button to enabled
			var btnSrc = btnDl.attr("src", ENABLED_BUTTON_IMG)
				.removeAttr("disabled");
		}
	});
	
	/*
	 *
	 * This fires when the user clicks the download button
	 *
	 */
	$(".downloadButton").live("click", function(){
		var button = $(this);
		var parentddl = button.parents().find(".wpSelect :selected");
		if(parentddl.val() != DROPDOWN_SELECT_VALUE){
			var imgUrl = parentddl.val();
			var dimensions = parentddl.html();
			
			var width = dimensions.split("x")[0] + "px";
			var height = dimensions.split("x")[1] + "px";
			
			document.open(imgUrl, width, height);
		}
	});
	
	
	/*
	 *
	 * This method loads whatever rows are passed in and creates the wallpapers for the user
	 *
	 */
	function loadContent(rows){
		//"container" which adds the line
		var container = $('<div>')
				.addClass('container')
				.append(
					$('<span>')
						.append(
							$('<img>')
								.attr('height', GREY_SPAN_IMG_HEIGHT)
								.attr('width', GREY_SPAN_IMG_WIDTH)
								.attr('src', GREY_SPAN_IMG)
								)
						);
						
		$.each(rows, function(i, wallpaper){
			if(wallpaper == null) return;
			//gallery container	
			var gallery = $("<div>")
				.addClass("gallery")
				.addClass("projectTitle");
			
			//title
			var title = $("<div>")
				.addClass("title")
				.html(wallpaper == null ? "TITLE" : wallpaper.title);
			
			//add the title to gallery
			gallery.append(title);
			
			//description		
			var desc = $("<div>")
				.addClass("desc")
				.text(wallpaper == null ? "DESC": wallpaper.desc);
			
			//add the desc to gallery
			gallery.append(desc);
			
			var projImg = $("<div>")
				.addClass("projectImg")
				.attr('id', i);
			
			
			var baseImg = wallpaper == null ? "": wallpaper.base;
			var coverImg = $("<img>")
				.attr("src", baseImg.replace(TOKEN,PREVIEW_TOKEN))
				.attr("alt", wallpaper == null ? "ALT": wallpaper.title)
				.attr("title", wallpaper == null ? "TITLE": wallpaper.title);
			projImg.append(coverImg);
			
			var ddl = $("<select>")
				.addClass("wpSelect");
			//create all of the ddl options here
			
			ddl.append($("<option>").text(DROPDOWN_SELECT_TEXT).val(DROPDOWN_SELECT_VALUE));
			$.each(wallpaper.resx, function(j, grps){
				var optGroup = $("<optgroup>")
					.attr("label", grps.group);
				
				$.each(grps.imgs, function(k, imgs){
					var opt = $("<option>")
						.text(imgs)
						.val(baseImg.replace(TOKEN,imgs));
				
					//add each one to the list
					optGroup.append(opt);
				});
				ddl.append(optGroup);
			});
			
			var dlContainer = $("<span>")
				.addClass("downloadContainer");
			
			var downloadButton = $("<img>")
				.addClass("downloadButton")
				.attr("src", DISABLED_BUTTON_IMG)
				.attr("disabled", true);
			
			dlContainer.append(downloadButton);
			
			//add the project images to gallery
			gallery.append(projImg);
			
			//add the ddl to the output	
			gallery.append(ddl);

			//add the ddl to the output	
			gallery.append(dlContainer);
			
			//create the output
			$(GALLERY).append(container.clone());
			$(GALLERY).append(gallery);
		});
	};
	
	var matchCase = false;
	var minChars = 3;
	var delay = 500;
	var timeout;
	var hasFocus;
	var lastKeyPressCode;
	var previousValue;
	var blockSubmit;
	var KEY = {
			UP: 38,
			DOWN: 40,
			DEL: 46,
			TAB: 9,
			RETURN: 13,
			ESC: 27,
			COMMA: 188,
			PAGEUP: 33,
			PAGEDOWN: 34,
			BACKSPACE: 8
	};
	
	/*
	 * This event fires when the search textbox is typed into
	 */
	$("#" + TAG_SEARCH_ID).bind($.browser.opera ? "keypress" : "keydown", function(e){
		hasFocus = 1;
		lastKeyPressCode = e.keyCode;
		
		switch(e.keyCode){
			case KEY.TAB:
			case KEY.RETURN:
				e.preventDefault();
				blockSubmit = true;
				return false;
				break;
			case KEY.BACKSPACE:
				timeout = setTimeout(onChange, true);
				break;
			case KEY.ESC:
				break;
			default:
				clearTimeout(timeout);
				timeout = setTimeout(onChange, delay);
				break;
		}
	}).focus(function(){
		hasFocus++;
	}).blur(function(){
		hasFocus = 0;
	});
	
	var tagSearch = $('#' + TAG_SEARCH_ID);
	function onChange(notUsed, skipPrevCheck){
		//get current value
		var currentValue = tagSearch.val();
		
		if(!skipPrevCheck && currentValue == previousValue){
			return;
		}
		
		previousValue = currentValue;
		
		if(currentValue.length >= minChars){
			//perform search
			if(!matchCase){
				currentValue = currentValue.toLowerCase();
			}
			doSearch(currentValue);
		}
		else{
			if(currentValue.length == 0){
				//set the tab back to 0
				$(".page0 .pageNum").trigger("click");
			}
		}
	};
	
	/*
	 *
	 Called when the user types in the textbox to perform a search
	 *
	*/
	function doSearch(searchStr){
		var results = [];
		//perform search
		if(searchStr != null && searchStr.length > 0){
			var rEx = new RegExp(searchStr);
			var match = [];
			$.each(tags.data, function(i, t){
				if(t.tag.search(rEx) != -1){
					if($.inArray(t.wp, results) == -1){
						results.push(t.wp);
					}
				}
			});
		}
		
		var gal = $(GALLERY);
		var f = $(FOOTER);
		if(results.length > 0){
			gal.html("");
			loadContent(results);
		}
		else{
			if(searchStr.length > 0){
				//nothing found
				gal.html("");
				gal.html($("<h1>").addClass("noResultsFound").text("No results found for " + searchStr));
			}
		}
	}
});