<?xml version="1.0" encoding="UTF-8" ?>
<Module>
	<ModulePrefs 
	  	title="iGoogle Skin" 
		description="Customize your iGoogle page with a number of easy options - condense the page, hide content (header,footer,etc), change colors, change layout, etc"
		author="Matt Kruse"
		author_email="gadget@mattkruse.com"
		screenshot="http://www.JavascriptToolbox.com/gadget/skin/skin.png"
		thumbnail="http://www.javascripttoolbox.com/gadget/skin/skin_thumb.png"
		author_affiliation="Matt Kruse"
		author_location="IL, USA"
		author_link="http://www.MattKruse.com/"
	> 
		<Require feature="setprefs"/>
		<Require feature="minimessage"/>
	</ModulePrefs>
	<UserPref name="lastmsg" datatype="hidden" default_value="0" />
	
	<UserPref name="hidesearch"  datatype="hidden" default_value="" />
	<UserPref name="hideuser"  datatype="hidden" default_value="" />
	<UserPref name="hidetabs"  datatype="hidden" default_value="" />

	<UserPref name="hidefooter"  datatype="hidden" default_value="" />
	<UserPref name="showgadgeticons"  datatype="hidden" default_value="" />
	
	<UserPref name="stoprefresh"  datatype="hidden" default_value="" />

	<UserPref name="backgroundcolor"  default_value="#eee" datatype="hidden"/>
	<UserPref name="titlebarcolor"  default_value="#4E8EE2" datatype="hidden" />
	<UserPref name="titlebarbg"  default_value="http://static.netvibes.com/themes/plain/images/module-header.gif" datatype="hidden" />
	<UserPref name="titlebarbgrpt"  default_value="repeat-x" datatype="hidden" />
	<UserPref name="titlebarbgpos"  default_value="top left" datatype="hidden" />

	<UserPref name="titlecolor"  default_value="white" datatype="hidden" />
	<UserPref name="bordercolor"  default_value="#4E8EE2" datatype="hidden" />
	<UserPref name="borderwidth"  default_value="2px" datatype="hidden" />
	<UserPref name="modareapadding"  default_value="5px" datatype="hidden" />
	<UserPref name="modboxinpadding"  default_value="0px" datatype="hidden" />
	<UserPref name="mcpadding"  default_value="0px" datatype="hidden" />
	<UserPref name="modbox"  default_value="border:none;margin-top:4px;margin-bottom:0px;" datatype="hidden" />

	<UserPref name="c1width"  default_value="32%" datatype="hidden"/>

	<UserPref name="c2width"  default_value="32%" datatype="hidden"/>
	<UserPref name="c3width"  default_value="32%" datatype="hidden"/>
	<UserPref name="columnspacing"  default_value="5px" datatype="hidden"/>
	<UserPref name="iconcolor"  datatype="hidden" default_value="o"/>

   <Content type="html-inline"> 
     <![CDATA[ 

	<!-- Include jQuery because it makes scripting easier -->
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
	
	<!-- 
	All options for this gadget are set in the content area itself and copied to user prefs with js.
	This gives me a lot more flexibility on how to present options.
	-->
	
	<!-- These are styles internal to the gadget -->
	<style>
	form.skinform {
		display:inline;
	}
	table.skinprefs {
		border:1px solid #cccccc;
		border-collapse:collapse;
		width:95%;
	}
	table.skinprefs td {
		border:1px solid #cccccc;
		font-size:90%;
	}
	table.skinprefs td.prefname {
		width:175px;
	}
	table.skinprefs textarea, table.skinprefs input.text, table.skinprefs select {
		font-size:90%;
	}
	table.skinprefs textarea {
		width:95%;
	}
	table.skinprefs td.savebutton {
		text-align:center;
		padding:5px;
	}
	</style>
	
	<script>
	var prefs__MODULE_ID__ = new _IG_Prefs(__MODULE_ID__);
	var msg__MODULE_ID__ = new _IG_MiniMessage(__MODULE_ID__, _gel("m___MODULE_ID___h").parentNode );

	// Functions for handling miniMessages
	// -----------------------------------
	var lastmsg__MODULE_ID__ = prefs__MODULE_ID__.getInt("lastmsg");
	function addMsg__MODULE_ID__(dt,msg) {
		if (dt>lastmsg__MODULE_ID__) {
			var msg = msg__MODULE_ID__.createDismissibleMessage(msg,function(){updateLstMsg__MODULE_ID__(dt)});
			msg.style.color="black";
		}
	}
	function updateLstMsg__MODULE_ID__(dt) {
		prefs__MODULE_ID__.set("lastmsg",dt);
	}
	// User Messages to alert of added features, etc
	// ---------------------------------------------
	addMsg__MODULE_ID__(2007060401,"2007-06-04: Added the ability to hide the user toolbar that appears in the upper right.");
	addMsg__MODULE_ID__(2007061101,"2007-06-11: Added option to stop page auto-refreshes");
	addMsg__MODULE_ID__(2008021101,"2008-02-11: Bug fix for IE and fix for hiding header with theme");
	addMsg__MODULE_ID__(2008031801,"2008-03-18: Fixed column width issues");
	
	// On page load, optionally put gadget favicon's in their gadget boxes
	// -------------------------------------------------------------------
	if (prefs__MODULE_ID__.getString("showgadgeticons")=="true") {
		_IG_RegisterOnloadHandler( function() { showicons__MODULE_ID__(); } );
	}
	
	// Functions to show or hide favicons for gadgets
	// ----------------------------------------------
	function showicons__MODULE_ID__() {
		var m = window.remote_modules;
		for (var i=0; i<m.length; i++) {
			var id = m[i].id;
			var url = m[i].spec_url.replace(/^(http:\/\/[^\/]+).*/,"$1")+"/favicon.ico";
			var favicon = '<div class="showgadgeticon" style="float:left;width:16px;height:16px;padding:0px;margin-right:4px;"><img width="16" src="'+url+'" onerror="this.parentNode.style.display=\'none\'"></div>';
			jQuery("#m_"+id+"_title").prepend(favicon);
		}
	}
	function hideicons__MODULE_ID__() {
		jQuery(".showgadgeticon").css("display","none");
	}
	
	
	// Get an input's value
	// --------------------
	function val__MODULE_ID__(input) {
		var val = input.value;
		if (input.type=="select-one") {
			val = input.options[input.selectedIndex].value;
		}
		return val;
	}
	
	// A function to programmatically set a user pref based on a form input
	// --------------------------------------------------------------------
	function setpref__MODULE_ID__(input) {
		var val = val__MODULE_ID__(input);
		var name = input.name.replace(/m___MODULE_ID___up_/,"");
		
		// Update display in real-time if possible
		var sh = (val==""?'slideDown':'slideUp');
		var aspeed = "fast";
		if (name=="hidesearch") { jQuery("#gsea,#gbar")[sh](aspeed); }
		else if (name=="hideuser") { jQuery("#guser")[sh](aspeed); }
		else if (name=="hidetabs") { jQuery("#tabs")[sh](aspeed); }
		else if (name=="hidefooter") { jQuery("#footerwrap")[sh](aspeed); }
		else if (name=="backgroundcolor") { jQuery("body,#modules").css("background-color",val); }
		else if (name=="showgadgeticons") { if (val=="true") {showicons__MODULE_ID__();} else {hideicons__MODULE_ID__();} }
		else if (name=="titlebarcolor") { jQuery("h2.modtitle").css("background-color",val); }
		else if (name=="titlebarbg") { jQuery("h2.modtitle").css("background-image","url("+val+")"); }
		else if (name=="titlebarbgrpt") { jQuery("h2.modtitle").css("background-repeat",val); }
		else if (name=="titlebarbgpos") { jQuery("h2.modtitle").css("background-position",val); }
		else if (name=="titlecolor") { jQuery("h2.modtitle").css("color",val); }
		else if (name=="bordercolor") { jQuery(".modboxin, .modtitle").css("border-color",val); }
		else if (name=="borderwidth") { jQuery(".modboxin, .modtitle").css("border-width",val); }
		
		else if (name=="modareapadding") { jQuery("#modules").css("padding",val); }
		else if (name=="modboxinpadding") { jQuery("div.modboxin").css("padding",val); }
		else if (name=="mcpadding") { jQuery(".mc").css("padding",val); }
		else if (name=="modbox") { createCSS(".modbox",val); }
		
		else if (name=="c1width") { jQuery("#c_1").css("width",val); }
		else if (name=="c2width") { jQuery("#c_2").css("width",val); }
		else if (name=="c3width") { jQuery("#c_3").css("width",val); }
		else if (name=="columnspacing") { jQuery("#c_2,#c_3").css("margin-left",val); }
		else if (name=="iconcolor") {
			createCSS(
				"a.ddbox {background-image:url('/ig/images/arrow_"+val+".gif') !important}"+
				"a.delbox {background-image:url('/ig/images/x_"+val+".gif') !important}"+
				"a.minbox {background-image:url('/ig/images/min_"+val+".gif') !important}"+
				"a.maxbox {background-image:url('/ig/images/max_"+val+".gif') !important}"+
				"a.ddbox:hover {background-image:url('/ig/images/arrow_"+val+"_highlight.gif') !important}"+
				"a.delbox:hover {background-image:url('/ig/images/x_"+val+"_highlight.gif') !important}"+
				"a.minbox:hover {background-image:url('/ig/images/min_"+val+"_highlight.gif') !important}"+
				"a.maxbox:hover {background-image:url('/ig/images/max_"+val+"_highlight.gif') !important}"
			);
		}
	}

	// Write out inputs for a user pref	
	// --------------------------------
	function sel__MODULE_ID__(name,options) {
		var s = '<select name="m___MODULE_ID___up_'+name+'" onchange="setpref__MODULE_ID__(this)">';
		var sel = prefs__MODULE_ID__.getString(name);
		for (var i=0; i<options.length; i++) {
			s += '<option value="'+options[i][0]+'"'+(sel==options[i][0]?' selected="selected"':'')+'>'+(options[i][1]||options[i][0])+'</option>';
		}
		s += '</select>';
		document.write(s);
	}
	function text__MODULE_ID__(name) {
		var s = '<input class="text" name="m___MODULE_ID___up_'+name+'" onchange="setpref__MODULE_ID__(this)" value="'+_hesc(prefs__MODULE_ID__.getString(name))+'">';
		document.write(s);
	}
	function textarea__MODULE_ID__(name,rows) {
		rows = rows || 3;
		var s = '<textarea name="m___MODULE_ID___up_'+name+'" rows="'+rows+'" wrap="no" onchange="setpref__MODULE_ID__(this)">'+_hesc(prefs__MODULE_ID__.getString(name))+'</textarea>';
		document.write(s);
	}
	
	// Save options
	// ------------
	function save__MODULE_ID__(f) {
		_fsetp(f,'__MODULE_ID__',32); // Why 32? I don't know!
		f.submit();
	}
	
	// A function to create new CSS rules
	// http://snippets.dzone.com/posts/show/3817
	function createCSS(selector, declaration) {
		var ua = navigator.userAgent.toLowerCase();
		var isIE = (/msie/.test(ua)) && !(/opera/.test(ua)) && (/win/.test(ua));
		var style_node = document.createElement("style");
		style_node.setAttribute("type", "text/css");
		style_node.setAttribute("media", "screen"); 
		if (!isIE) style_node.appendChild(document.createTextNode(selector + " {" + declaration + "}"));
		document.getElementsByTagName("head")[0].appendChild(style_node);
		if (isIE && document.styleSheets && document.styleSheets.length > 0) {
			var last_style_node = document.styleSheets[document.styleSheets.length - 1];
			if (typeof(last_style_node.addRule) == "object") last_style_node.addRule(selector, declaration);
		}
	};

	
	</script>
	
	<!-- The real preference-settings content -->
	<div class="skinmsg">Minimize this Gadget to hide all the options. Changes to most options will be visible immediately, but no changes will be saved until you explicitly click Save.</div>
	<form class="skinform" action="/" onsubmit="return false;">
	<table class="skinprefs">
	<tbody>
		<tr>
			<td class="prefname">Hide Page Header:</td>
			<td class="prefvalue"><script>sel__MODULE_ID__("hidesearch",[["display:none;","Yes"],["","No"]])</script></td>
		</tr>
		<tr>
			<td class="prefname">Hide User Menu:</td>
			<td class="prefvalue"><script>sel__MODULE_ID__("hideuser",[["display:none;","Yes"],["","No"]])</script></td>
		</tr>
		<tr>
			<td class="prefname">Hide Tabs:</td>
			<td class="prefvalue"><script>sel__MODULE_ID__("hidetabs",[["display:none;","Yes"],["","No"]])</script></td>
		</tr>
		<tr>
			<td class="prefname">Hide Footer:</td>
			<td class="prefvalue"><script>sel__MODULE_ID__("hidefooter",[["display:none;","Yes"],["","No"]])</script></td>
		</tr>
		<tr>
			<td class="prefname">Show Gadget Favicons:</td>
			<td class="prefvalue"><script>sel__MODULE_ID__("showgadgeticons",[["","No"],["true","Yes"]])</script></td>
		</tr>
		<tr>
			<td class="prefname">Stop Page Auto-Refresh:</td>
			<td class="prefvalue"><script>sel__MODULE_ID__("stoprefresh",[["","No"],["true","Yes"]])</script></td>
		</tr>

		<tr>
			<td class="prefname">Page Background Color:</td>
			<td class="prefvalue"><script>text__MODULE_ID__("backgroundcolor")</script></td>
		</tr>
		<tr>
			<td class="prefname">Module Title Bar Color:</td>
			<td class="prefvalue"><script>text__MODULE_ID__("titlebarcolor")</script></td>
		</tr>
		<tr>
			<td class="prefname">Module Title Bar Background Img:</td>
			<td class="prefvalue">url: <script>text__MODULE_ID__("titlebarbg")</script><br>Position: <script>sel__MODULE_ID__("titlebarbgpos",[["top left"],["top center"],["top right"],["center left"],["center center"],["center right"],["bottom left"],["bottom center"],["bottom right"]])</script><br>Repeat: <script>sel__MODULE_ID__("titlebarbgrpt",[["no-repeat"],["repeat"],["repeat-x"],["repeat-y"]])</script></td>
		</tr>
		<tr>
			<td class="prefname">Module Title Color:</td>
			<td class="prefvalue"><script>text__MODULE_ID__("titlecolor")</script></td>
		</tr>
		<tr>
			<td class="prefname">Border Color:</td>
			<td class="prefvalue"><script>text__MODULE_ID__("bordercolor")</script></td>
		</tr>
		<tr>
			<td class="prefname">Border Width:</td>
			<td class="prefvalue"><script>text__MODULE_ID__("borderwidth")</script></td>
		</tr>
		<tr>
			<td class="prefname">Main Module Area Padding:</td>
			<td class="prefvalue"><script>text__MODULE_ID__("modareapadding")</script></td>
		</tr>
		<tr>
			<td class="prefname">Module Content Padding:</td>
			<td class="prefvalue"><script>text__MODULE_ID__("modboxinpadding")</script></td>
		</tr>
		<tr>
			<td class="prefname">Module Content Item Padding:</td>
			<td class="prefvalue"><script>text__MODULE_ID__("mcpadding")</script></td>
		</tr>
		<tr>
			<td class="prefname">Gadget Box ("modbox") Style:</td>
			<td class="prefvalue"><script>textarea__MODULE_ID__("modbox")</script></td>
		</tr>

		<tr>
			<td class="prefname">Column 1 Width:</td>
			<td class="prefvalue"><script>text__MODULE_ID__("c1width")</script></td>
		</tr>
		<tr>
			<td class="prefname">Column 2 Width:</td>
			<td class="prefvalue"><script>text__MODULE_ID__("c2width")</script></td>
		</tr>
		<tr>
			<td class="prefname">Column 3 Width:</td>
			<td class="prefvalue"><script>text__MODULE_ID__("c3width")</script></td>
		</tr>
		<tr>
			<td class="prefname">Space Between Columns:</td>
			<td class="prefvalue"><script>text__MODULE_ID__("columnspacing")</script></td>
		</tr>
		<tr>
			<td class="prefname">Gadget Icon Color:</td>
			<td class="prefvalue"><script>sel__MODULE_ID__("iconcolor",[["blue","Blue"],["purple","Purple"],["green","Green"],["orange","Orange"]])</script></td>
		</tr>

		<tr>
			<td colspan="2" class="savebutton"><input type="button" value="Save" onclick="save__MODULE_ID__(this.form)"></td>
		</tr>
	</tbody>
	</table>
	</form>

	<!-- These are the generated styles! -->
	<style>
		#gsea,#gbar,#nhdrwrapsizer{ __UP_hidesearch__ !important; }
		#guser{ __UP_hideuser__ !important; }
		#tabs{ __UP_hidetabs__ !important; }
		#footerwrap { __UP_hidefooter__; }

		body,#modules { background-color:__UP_backgroundcolor__; }
		.modtitle_text { color: __UP_titlecolor__; }
		.modtitle a, .modtitle a:visited  { color: __UP_titlecolor__ !important; }
		.modtitle { background-image:url(__UP_titlebarbg__); background-repeat:__UP_titlebarbgrpt__; background-position:__UP_titlebarbgpos__;}

		#modules { padding: __UP_modareapadding__ !important }
		div.modboxin { padding:__UP_modboxinpadding__; }
		.modboxin, .modtitle { border-color: __UP_bordercolor__; border-width:__UP_borderwidth__; }
		.mc { padding:__UP_mcpadding__; }
		.modbox { __UP_modbox__; }
		
		#new_user_demo { display:none; }

		#c_1 { width:__UP_c1width__ !important; }
		#c_2 { width:__UP_c2width__ !important; }
		#c_3 { width:__UP_c3width__ !important; }
		#c_2, #c_3 { margin-left: __UP_columnspacing__; }

		a.ddbox {background-image:url('/ig/images/arrow___UP_iconcolor__.gif') !important}
		a.delbox {background-image:url('/ig/images/x___UP_iconcolor__.gif') !important}
		a.minbox {background-image:url('/ig/images/min___UP_iconcolor__.gif') !important}
		a.maxbox {background-image:url('/ig/images/max___UP_iconcolor__.gif') !important}
		a.ddbox:hover {background-image:url('/ig/images/arrow___UP_iconcolor___highlight.gif') !important}
		a.delbox:hover {background-image:url('/ig/images/x___UP_iconcolor___highlight.gif') !important}
		a.minbox:hover {background-image:url('/ig/images/min___UP_iconcolor___highlight.gif') !important}
		a.maxbox:hover {background-image:url('/ig/images/max___UP_iconcolor___highlight.gif') !important}

		.mmlib_table__MODULE_ID__ { z-index:10; position:relative; cursor:pointer; }
	</style>
	
	<script>
		if (prefs__MODULE_ID__.getString("stoprefresh")) {
			window._reload = function() { if (window.status) { window.status="Page Reload Cancelled"; } };
		}
		// If header is hidden, IE will continually try to focus the search box. Avoid that
		if (prefs__MODULE_ID__.getString("hidesearch")!="") {
			window.qryin = {'focus':function(){}};
		}
	</script>
     ]]> 
   </Content> 
</Module>
