var THUMB_MAX = 60;
var BLANK_IMG = "white.png";
var THUMB_DIR = './thumb';
var TINEYE_API = 'http://www.tineye.com/search?url=http://anime.udp.jp/face-search-v1/';
var IQDB_API = 'http://iqdb.org/?url=http://anime.udp.jp/face-search-v1/';
var NAO_API = 'http://saucenao.com/search.php?db=999&url=http://anime.udp.jp/face-search-v1/';

var g_history = new Array();
var g_history_search = false; // umm

function hasHistory()
{
	return (g_history.length > 1) ? true: false;
}

function popHistory()
{
	if (hasHistory()) {
		g_history.pop();
		var hist = g_history[g_history.length - 1];
		return hist;
	}
	return null;
}

function pushHistory(key, isface)
{
	if (!g_history_search) {
		g_history.push({"key": key, "isface": isface });
	} else {
		g_history_search = false;
	}
}

function historyBack()
{
	if (hasHistory()) {
		var hist = popHistory();
		if (hist) {
			g_history_search = true;
			if (hist.isface) {
				searchFace(hist.key, THUMB_DIR + '/' + hist.key);
			} else {// color
				var r = parseInt(hist.key.substr(0, 2), 16);
				var g = parseInt(hist.key.substr(2, 2), 16);
				var b = parseInt(hist.key.substr(4, 2), 16);
				var hex = hist.key
				searchHairColor(r, g, b, hex);
			}
		}
	}
}


function updatePermalink(key, isface)
{
	var a = YAHOO.util.Dom.get('permalink');
	if (a) {
		var uri = location.href.split('?');
		if (uri[0]) {
			if (isface) {
				a.href = uri[0] + '?face=' + key
			} else {
				a.href = uri[0] + '?color=' + key
			}
		}
	}
	
	pushHistory(key, isface);
}

function initSearch()
{
	var path_query = location.href.split('?');
	
	if (path_query && path_query.length == 2) {
		var query = path_query[1];
		var param = new Object;
		var kvs = query.split('&');
		for (var i = 0; i < kvs.length; ++i) {
			var kv = kvs[i].split('=');
			if (kv[0]) {
				if (kv[1] && !kv[1].match(/[^0-9a-zA-Z_\.]/)) {
					param[kv[0]] = decodeURIComponent(kv[1]);
				} else {
					param[kv[0]] = null;
				}
			}
		}
		if (param['face']) {
			searchFace(param['face'], THUMB_DIR + '/' + param['face']);
		} else if (param['color'] && param['color'].length == 6) {
			var r = parseInt(param['color'].substr(0, 2), 16);
			var g = parseInt(param['color'].substr(2, 2), 16);
			var b = parseInt(param['color'].substr(4, 2), 16);
			var hex = param['color'];
			searchHairColor(r, g, b, hex);
		}
	}
}

function setHairColorResult(result, r, g, b, hex)
{
    var i;
    var imgs = YAHOO.ui.imgs;
    var rec_set = result.resultset;
    YAHOO.util.Dom.setStyle("query-image", "backgroundImage", "");
    YAHOO.util.Dom.setStyle("query-image", "background", "#" + hex);

    for (i = 0; i < THUMB_MAX && i < rec_set.length; ++i) {
	imgs[i].img.src = rec_set[i].face_thumb;
	imgs[i].face_thumb = rec_set[i].face_thumb;
	imgs[i].img_thumb = rec_set[i].img_thumb;
	imgs[i].key = rec_set[i].key;
    }

    YAHOO.util.Dom.get("tags").innerHTML = makeTagCloud(rec_set);
    
    updatePermalink(hex, false);
}

function tagCompare(a, b)
{
    if (a.name > b.name) {
	return 1;
    } else if (a.name < b.name) {
	return -1;
    }
    return 0;
}

function makeTagCloud(rec_set)
{
    var i, j;
    var tag_hash = {};
    var tags = new Array;
    var tag_html = "";
    var max_count = 0;
    var min_count = 1000;
    
    for (i = 0; i < THUMB_MAX && i < rec_set.length; ++i) {
	if (rec_set[i].tags) {
	    for (j = 0; j < rec_set[i].tags.length; ++j) {
		if (!tag_hash[rec_set[i].tags[j]]) {
		    tag_hash[rec_set[i].tags[j]] = 1;
		} else {
		    tag_hash[rec_set[i].tags[j]] += 1;
		}
	    }
	}
    }
    
    for (var key in tag_hash) {
	tags.push({name: key, count: tag_hash[key]});
	if (tag_hash[key] > max_count) {
	    max_count = tag_hash[key];
	}
	if (tag_hash[key] < min_count) {
	    min_count = tag_hash[key];
	}
    }
    tags.sort(tagCompare);
    tag_html = "<h2>related danbooru tags</h2><ul>"
    for (i = 0; i < tags.length; ++i) {
	if (tags[i].count > 2) {
	    //var tag_url = "http://danbooru.donmai.us/post?tags=rating%3As+" + encodeURIComponent(tags[i].name);
	    var tag_url = "javascript:void(0)";
	    tag_html += "<li><a  style=\"font-size:"
	    + (100 + ((tags[i].count - min_count) / max_count) * 250)
		+ "%;\" href=\""
		+ tag_url + "\">"
		+ tags[i].name + "</a></li>\n"
	}
    }
    tag_html += "</ul>"
    return tag_html;
}

function clearThumb()
{
    var imgs = YAHOO.ui.imgs;    
    for (i = 0; i < THUMB_MAX; ++i) {
	imgs[i].img.src = BLANK_IMG;
    }
    YAHOO.util.Dom.get("tags").innerHTML = "";
}

function searchHairColor(r, g, b, hex)
{
    var query = "search_haircolor.cgi?r=" + r + "&g=" + g + "&b=" + b;

    YAHOO.util.Dom.setStyle("query-image", "background", "#FFFFFF");
    YAHOO.util.Dom.setStyle("query-image", "backgroundImage", "url(ajax-loader.gif)");
    YAHOO.util.Dom.setStyle("query-image", "backgroundRepeat", "no-repeat");

    clearThumb();
    
    YAHOO.util.Connect.asyncRequest(
        "GET",
	query,
	{
	    success: function(o) {
		var result = YAHOO.lang.JSON.parse(o.responseText);
		setHairColorResult(result, r, g, b, hex);
	    },
	    failure: function(o) {
		alert("server error");
	    }
	},
	null
    );
}

function searchFace(key, face_thumb)
{
    var query = "search_face.cgi?face=" + key;
    
    if (!face_thumb) {
	face_thumb = THUMB_DIR + '/' + key;
    }

    YAHOO.util.Dom.setStyle("query-image", "background", "#FFFFFF");
    YAHOO.util.Dom.setStyle("query-image", "backgroundImage", "url(ajax-loader.gif)");
    YAHOO.util.Dom.setStyle("query-image", "backgroundRepeat", "no-repeat");

    
    clearThumb();
    
    YAHOO.util.Connect.asyncRequest(
        "GET",
	query,
	{
	    cache: false,
	    success: function(o) {
		var result = YAHOO.lang.JSON.parse(o.responseText);
		setFaceResult(result, key);
	    },
	    failure: function(o) {
		alert("server error");
	    }
	},
	null
    );
}

function setFaceResult(result, key)
{
    var imgs = YAHOO.ui.imgs;
    var query_thumb = result.query_thumb;
    var rec_set = result.resultset;
    
    YAHOO.util.Dom.setStyle("query-image", "background", "#FFFFFF");
    YAHOO.util.Dom.setStyle("query-image", "backgroundImage", "url(" + query_thumb + ")");
    YAHOO.util.Dom.setStyle("query-image", "backgroundRepeat", "no-repeat");
    
    for (i = 0; i < THUMB_MAX && i < rec_set.length; ++i) {
	imgs[i].img.src = rec_set[i].face_thumb;
	imgs[i].face_thumb = rec_set[i].face_thumb;
	imgs[i].img_thumb = rec_set[i].img_thumb;
	imgs[i].key = rec_set[i].key;
    }
    YAHOO.util.Dom.get("tags").innerHTML = makeTagCloud(rec_set);
    
    updatePermalink(key, true);
}

function showColorPicker()
{
    YAHOO.ui.picker_dialog.show();
}

function setImage(img_url)
{
    var img = YAHOO.util.Dom.get("viewer-img");
    var div = YAHOO.util.Dom.get("viewer-search");
    var tineye = YAHOO.util.Dom.get("viewer-search-tineye");
    var iqdb = YAHOO.util.Dom.get("viewer-search-iqdb");
    var nao = YAHOO.util.Dom.get("viewer-search-nao");    
    
    img.src = BLANK_IMG;
    img.src = img_url;

    div.style.display = "block";
    tineye.href = TINEYE_API + img_url;
    iqdb.href = IQDB_API + img_url;
    nao.href = NAO_API + img_url;        
}


function showImage(img_url, e)
{
    var xy = YAHOO.util.Event.getXY(e);

    setImage(img_url);
    YAHOO.ui.viewer_dialog.show();
    YAHOO.ui.viewer_dialog.cfg.setProperty("xy", [xy[0]-24,xy[1]-140]);
}

function hideImage()
{
    var img = YAHOO.util.Dom.get("viewer-img");
    var search_div = YAHOO.util.Dom.get("viewer-search");    
    
    //YAHOO.ui.viewer_dialog.hide();
    YAHOO.ui.viewer_dialog.cfg.setProperty("xy", [690, 140]);
    img.src = BLANK_IMG;
    search_div.style.display = "none";
}

function onClickThumb(e, img, viewermode)
{
    var id_token = img.id.split('-');
    var id = id_token[1];
    var imgs = YAHOO.ui.imgs;
    
    if (!imgs[id] || !imgs[id].img_thumb) {
	return;
    }
    if (viewermode) {
	showImage(imgs[id].img_thumb, e);
    } else {
	searchFace(imgs[id].key, imgs[id].face_thumb);
    }
}

function initUI()
{
    var color_button = new YAHOO.widget.Button("color-query-button");
    var random_button = new YAHOO.widget.Button("random-query-button", {disabled:true});
    var back_button = new YAHOO.widget.Button("history-back-button");
    var i;

    YAHOO.ui.picker = new YAHOO.widget.ColorPicker("color-picker-container", {
	    showhexcontrols: false,
	    showwebsafe: false,
	    showhsvcontrols: false,
	    showrgbcontrols: true,
	    showhexsummary:  false,
	    images: {
		PICKER_THUMB: "http://yui.yahooapis.com/2.7.0/build/colorpicker/assets/picker_thumb.png",
		HUE_THUMB: "http://yui.yahooapis.com/2.7.0/build/colorpicker/assets/hue_thumb.png"
	    }

	}
    );
    YAHOO.ui.picker_dialog = new YAHOO.widget.Dialog("color-picker-overlay", {
		visible:false, 
		//		effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25},
		width: "320px",
		height: "280px",
		close: true,
		xy: [85,80],
		buttons : [
                  { text:"検索",
		    handler:function() {
			  searchHairColor(
				YAHOO.ui.picker.get("red"),
				YAHOO.ui.picker.get("green"),
				YAHOO.ui.picker.get("blue"),
				YAHOO.ui.picker.get("hex")
			  );
			  this.hide();
		    },
		    isDefault:true
		  }
		] 
	}
    );
    YAHOO.ui.viewer_dialog = new YAHOO.widget.SimpleDialog("viewer-overlay", {
	    visible:true,
	    xy: [690,140]
	}
    );
    YAHOO.ui.picker_dialog.render();
    color_button.on("click", showColorPicker);
    back_button.on("click", historyBack);
    //random_button.on("click", searchRandom);

    YAHOO.ui.viewer_dialog.render();
    
    // cache img tags
    YAHOO.ui.imgs = new Array();
    for (i = 0; i < THUMB_MAX; ++i) {
	YAHOO.ui.imgs[i] = new Object;
 	YAHOO.ui.imgs[i].img = YAHOO.util.Dom.get("thumb-" + i);
	YAHOO.ui.imgs[i].face_thumb = null;
	YAHOO.ui.imgs[i].img_thumb = null;

	YAHOO.util.Event.addListener(
	    YAHOO.ui.imgs[i].img,
	    "mouseover",
	    function (o) {
		YAHOO.util.Dom.addClass(this, "thumb-mouseover");
		
		var ids = this.id.split('-');
		var viewer_div = YAHOO.util.Dom.get("viewer-box-" + ids[1]);
		if (viewer_div) {
    		    YAHOO.util.Dom.setStyle(viewer_div, "visibility", "visible");
		}
		setImage(YAHOO.ui.imgs[ids[1]].img_thumb);		
	});
	YAHOO.util.Event.addListener(
	    YAHOO.ui.imgs[i].img,
            "mouseout",
	    function (o) {
		YAHOO.util.Dom.removeClass(this, "thumb-mouseover");
		
		var id_token = this.id.split('-');
		if ((o.relatedTarget && o.relatedTarget.id != "viewer-link-" + id_token[1])
		   || (o.toElement && o.toElement.id != "viewer-link-" + id_token[1]))
		{
		    var viewer_div = YAHOO.util.Dom.get("viewer-box-" + id_token[1]);
		    if (viewer_div) {
    		        YAHOO.util.Dom.setStyle(viewer_div, "visibility", "hidden");
		    }
		}
	});
	YAHOO.util.Event.addListener(
	    YAHOO.ui.imgs[i].img,
            "click",
	    function (e) {
	        onClickThumb(e, this, false);
	    }
	);
	
	var viewer_div = YAHOO.util.Dom.get("viewer-box-" + i);
	if (viewer_div) {
	    YAHOO.util.Event.addListener(
	        viewer_div,
                "mouseout",
		function (o) {
		    var id_token = this.id.split('-');
		    if ((o.relatedTarget && o.relatedTarget.id != "thumb-" + id_token[2])
		       || (o.toElement && o.toElement.id != "thumb-" + id_token[2]))
		    {
		        YAHOO.util.Dom.setStyle(this, "visibility", "hidden");
		    }
		}
	    );
	}
	var viewer_link = YAHOO.util.Dom.get("viewer-link-" + i);
	if (viewer_link) {
	    YAHOO.util.Event.addListener(
	        viewer_link,
                "click",
		function (e) {
		    var id_token = this.id.split('-');
		    var img = YAHOO.util.Dom.get("thumb-" + id_token[2]);
		    if (img) {
			onClickThumb(e, img, true);
		    }
		    return false;
		}
	    );
	}
    }
    // viewer
    YAHOO.util.Event.addListener(
	 "viewer-img",
	 "click",
	 hideImage
    );
    
    initSearch();
}
YAHOO.util.Event.onDOMReady(initUI);
YAHOO.namespace('ui');