<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="Random color scheme"
description="Random color scheme!"
height="200" scrolling="true"
screenshot="http://www.colr.org/colr_gg_ss1.png"
thumbnail="http://www.colr.org/colr_gg_thumb1.png"
author="Lloyd Dalton"
author_email="daltonlp@gmail.com"/>
<Content type="html">
<![CDATA[

<style type="text/css">
.color_scheme {clear:left;border:solid 0px #999;padding:5px;border-top:0;}
.color_scheme .scheme_swatch{ float:left; margin-right:5px; width:20px; height:20px; border:solid 1px #ccc;}
.tags {float:left; clear:left; margin:0; padding:2px; background-color:transparent; position:relative; top:-1px; font-size:x-small; white-space:nowrap;}
.tags .tag {color:#999;text-decoration:none;}
.another_button {font-size:x-small;color:#ccc;}
.search_button {font-size:x-small;color:#ccc;}
#content__MODULE_ID___base_search_q {border:solid 1px #ccc;}
.controls {color:#ccc;}
.controls a {color:#ccc;}
.search_results {max-height:98px;overflow:-moz-scrollbars-vertical;}
</style>

<script type="text/javascript">

var base_id = 'content__MODULE_ID___base';
var search_q = '';


var url = 'http://colr.appspot.com/json/random_scheme';
var search_url = 'http://colr.appspot.com/json/search_tags';

var jsonResults = _IG_FetchContent(url, display_scheme,{refreshInterval:5});

function display_scheme(jsondata) {
	var jsondata = eval('('+jsondata+')');
	var scheme = jsondata;
	var contents = draw_scheme(scheme) + draw_controls();

	_gel('content__MODULE_ID__').innerHTML = contents;
	hookup_events();


}

function hookup_events() {
	_gel(base_id+'_another').onclick = get_another_scheme;
	_gel(base_id+'_search').onclick = search_tags;
	_gel(base_id+'_search_q').onkeyup = function(e){try{if (e && e.keyCode && e.keyCode == 13) {search_tags();return;}if (event && event.keyCode && event.keyCode == 13) {search_tags();return;}}catch(e){}};

}

function display_search_results(jsondata) {
	var jsondata = eval('('+jsondata+')');
	var scheme_results = '<div class="search_results">';
	for (var i=0;i<jsondata.schemes.length;i++) {
		scheme_results += draw_scheme(jsondata.schemes[i]);
	}
	scheme_results += '</div>';
	var contents = scheme_results + draw_controls();

	_gel('content__MODULE_ID__').innerHTML = contents;
	hookup_events();
}

function get_another_scheme( ) {
	var jsonResults = _IG_FetchContent(url+'#'+randomString(4), display_scheme,{refreshInterval:5});
}

function search_tags( ) {
	search_q = _gel(base_id+'_search_q').value;
	var jsonResults = _IG_FetchContent(search_url+'?q='+search_q, display_search_results,{refreshInterval:5});
}




function draw_scheme( scheme ) {
	var colors = scheme['colors'];
	var tags = scheme['tags'];

	var contents = '<div class="color_scheme">';
	for (var l1=0;l1<colors.length;l1++)
		contents += '<div class="scheme_swatch" style="background-color:#'+colors[l1]+';">&nbsp;&nbsp;&nbsp;&nbsp;</div>';

	contents += '<div class="tags">';

	for (var l1=0;l1<tags.length;l1++)
		contents += '<span class="tag">'+tags[l1]+' </span>';

	contents += '</div>';
	contents += '</div>';


	return contents;
}

function draw_controls() {
	var contents = '';
	contents += '<div class="controls">';
	contents += '<div style="float:right;clear:left;margin-top:8px;"/><a class="search_button" id="'+base_id+'_search" href="javascript:void(0)">Search!</a><br/><input id="'+base_id+'_search_q" class="search_box" value="'+search_q+'"/></div>';
	contents += '<div style="clear:left;padding-top:8px;"/><a class="another_button" id="'+base_id+'_another" href="javascript:void(0)">Another!</a></div>';

	contents += '<br style="clear:both;margin-top:5px;"/>';

	contents += '<div style="float:right;position:relative;top:6px;"><span style="font-size:xx-small;">Hosted by <br/><a style="font-size:x-small;" href="http://www.clockwork.net">Clockwork</a></span></div>';
	contents += '<div><span style="font-size:x-small;">More at</span><br/><a target="_new" href="http://www.colr.org" style="">colr.org</a></div>';

	contents += '</div>'

		return contents;
}


function randomString(string_length) {
	var chars = "0123456789abcdefghiklmnopqrstuvwxyz";
	var randomstring = '';
	for (var i=0; i<string_length; i++) {
		var rnum = Math.floor(Math.random() * 36); // 36 = chars.length
		randomstring += chars.substring(rnum,rnum+1);
	}
	return randomstring;
}

</script>

<div id = "content__MODULE_ID__">
</div>
]]>
</Content>
</Module>

