<% if mode == 'preview' then %>
<script language="javascript">

	var coloredElements = [
		"appearance.textColor.color",
		"nonCSS.cellColor",
		"appearance.itemNumber.color",
		"appearance.body.background-color",
		"nonCSS.thumbBorderColor",
		"appearance.previewFull.background-color",
		"nonCSS.cellRolloverColor",
		"nonCSS.cellBorderColor",
		"appearance.detailText.color",
		"nonCSS.largeImageBorderColor",
		"nonCSS.sectionBorderColor"
	];

	function hexColorCmp(aValue,bValue) {
		aValueSplit = str_split(aValue, 2);
		aValueSum = hexdec(aValueSplit[0]) + hexdec(aValueSplit[1]) + hexdec(aValueSplit[2]);

		bValueSplit = str_split(bValue, 2);
		bValueSum = hexdec(bValueSplit[0]) + hexdec(bValueSplit[1]) + hexdec(bValueSplit[2]);

		return aValueSum - bValueSum;

	}

	function statusMessage( html ) {
		document.getElementById( 'kuler_message' ).innerHTML = html;
	}

	function subStatusMessage( html ) {
		document.getElementById( 'kuler_detail' ).innerHTML = html;
	}

	function getURLContents ( url, callback ) {
		document.AgFetchResults = callback;
		callCallback( "fetchURL", url );
	}

	var colors = null;

	function parseKulerXML( xmlstring ) {
		// convert string to XML object
		var xmlobject;

		// Windows requires us to include namespace prefix when searching for tags
		// by name.  Safari doesn't.  And neither offers an api for searching by
		// tags including the namespace <grrrr />.
		var HACK = "";

		if (window.ActiveXObject) {
			xmlobject=new ActiveXObject("Microsoft.XMLDOM");
			xmlobject.async=false;
			xmlobject.loadXML( xmlstring );
			HACK="kuler:";
 		}
		else {
			xmlobject = (new DOMParser()).parseFromString(xmlstring, "text/xml");
		}

		// get a reference to the root-element "rss"
		var root = xmlobject.getElementsByTagName('rss')[0];
		// get reference to "channel" element
		var channels = root.getElementsByTagName("channel");
		// now get all "item" tags in the channel
		var items = channels[0].getElementsByTagName("item");

		if( items.length == 0 ) {
			statusMessage( "No results found.  Ready." );
			return;
		}

		var myInfo = "" + items.length + " match<span id='kuler_detail'></span>:<br>";

		colors = new Array();

		for( var itemIndex = 0; itemIndex < items.length; itemIndex++ ) {
			var hexColorArray = new Array();
			colors[ itemIndex ] = hexColorArray;

			var item = items[ itemIndex ];
			// in the "item" we have a description, so get that
			var themeID = item.getElementsByTagName( HACK + 'themeID' )[0].firstChild.nodeValue;
			// we also get the "pubDate" element in the "item"
			var title = item.getElementsByTagName( 'title' )[0].firstChild.nodeValue;

			var themeSwatches = item.getElementsByTagName( HACK + 'themeSwatches' )[ 0 ];

			var swatches = themeSwatches.getElementsByTagName( HACK + 'swatch' );

			myInfo = myInfo + "<div style='margin:5px' onclick='applySwatch( " + itemIndex + " );'>";

			for( var swatchIndex = 0; swatchIndex < swatches.length; swatchIndex++ ) {
				var swatch = swatches[ swatchIndex ];
				var hexColor = swatch.getElementsByTagName( HACK + 'swatchHexColor' )[ 0 ].firstChild.nodeValue;
				myInfo = myInfo + "<span style='width:5px; background:#" + hexColor + ";'>&nbsp;</span>";
				hexColorArray[ swatchIndex ] = hexColor;
			}

			myInfo = myInfo + "\n";

			myInfo = myInfo + title + ": " + themeID + "</div>";
		}

		statusMessage(myInfo);
		
	}

	function applySwatch( index ) {
		subStatusMessage("<B>Applying swatch</B>")

		// use a delay, so the web view will actually display the above message before
		// starting this work, which may take a moment to complete.
		setTimeout("applySwatch0( " + index + " )", 10 );
	}

	var seed = 0;

	function applySwatch0( index ) {

		document.LR_modelManipulation = true;

		var swatches = colors[ index ];

		if( swatches == null ) {
			return;
		}

		for( var index = 0; index<coloredElements.length; index++ ) {
			var theColor = coloredElements[ index ];
			var swatchIndex = ( seed + index ) % swatches.length;
			if( theColor == null ) {
				break;
			}
			var hexColor = swatches[ swatchIndex ];
			callCallback( "updateModel", theColor, '#' + hexColor );
		}

		seed = seed + 1;
		document.LR_modelManipulation = false;
		subStatusMessage("")

	}

	function getTheme() {
		var query = document.getElementById( 'query' ).value;
		kulerURL = 'http://kuler.adobe.com/kuler/API/rss/search.cfm?searchQuery=' + query + '&startIndex=0&itemsPerPage=10'
		statusMessage( "Searching..." );
		getURLContents( kulerURL, parseKulerXML )
	}
	
	var kulerOn = false;
	function toggleKuler() {
		kulerOn = !kulerOn;
		var kulerElement = document.getElementById('kuler');
		var style = kulerElement.style;
		style.display = kulerOn ? '' : 'none';
	}
</script>
<table style="z-index: 2;position:absolute;top:10px;right:10px;">
	<tr>
	<td onclick="toggleKuler()" id="kulerToggler"><img src='$theRoot/kuler_blog_badge.png' width=28 height=28></td>
	<td id="kuler" style="background:white; display:none;">
		<div style="border:1px solid black; border-bottom:0; padding:5px;">
			Query: <input id='query' type='text' name='query' onkeypress="if( event.keyCode == 13 ) { getTheme(); event.keyCode=null; return false; }">
			<input type="button" onclick="getTheme(); return false;" name="button" value="Search">
		</div>
		<div style="border:1px solid black; border-top:0; padding:5px;">
			Status:
			<span id="kuler_message">Ready.</span>
		</div>
	</td>
</tr>
</table>
<% end %>
