<?xml version="1.0" encoding="UTF-8"?>
<Module>
    <ModulePrefs description="This is a Ning App that checks for skinning on a social network." 
        author_affiliation="Ning, Inc." 
        title="Skinning Test" 
        screenshot="" 
        author_email="" 
        author="" 
        author_location="" 
        directory_title="" 
        title_url="" 
        thumbnail="">
        <Require feature="opensocial-0.8"/>
        <Require feature="skins"/>
        <Require feature="views"/>
        <Require feature="dynamic-height"/>
    </ModulePrefs>
    <Content type="html" view="ning.main,canvas,profile">
        <![CDATA[<div class="gadget">
<style type="text/css">
	/* Core Ning Icon Library Code */
	.xg_sprite {
	  background-repeat:no-repeat;
	  background-color:transparent;
	  padding-left:20px;
	  line-height:1.65em;
	  *line-height:1.45em;
	  *overflow-y:visible;
	  zoom:1;
	}
	.xg_icon {
	  background-repeat:no-repeat;
	  background-color:transparent;
	  height: 17px;
	  width: 17px;
	  padding: 1px 2px 1px 0;
	  _padding:0;
	  margin:1px 0 1px 2px;
	  _margin:0;
	  text-indent: -9999px;
	  font-size:0 !important;
	  vertical-align: middle;
	  display:-moz-inline-stack;
	  display:inline-block;
	  zoom:1;
	  *display:inline;
	}
	.del {
	  display:none;
	  *display:inline;
	  width:0;
	  font-size:0;
	  line-height:0;
	  margin-left:-1px;
	}

	/* xg_sprite edge cases */
	.xg_sprite-message-send, .xg_sprite-message-forward, .xg_sprite-message-reply, .xg_sprite-message-reply-all, .xg_sprite-message-add, .xg_sprite-message-remove, .xg_sprite-folder-add, .xg_sprite-folder-remove {
	padding-left:26px !important;
	}

	/* xg_sprite Definitions */
	.xg_sprite-add {background-position: left -40px;}
	.xg_module_foot .xg_sprite-add, .xg_sprite-add-small {background-position: left -93px;}
	.xg_sprite-about {background-position: left -146px;}
	.xg_sprite-application-add, .xg_sprite-application-alert, .xg_sprite-application-view {background-position: left -202px;}
	.xg_sprite-alert {background-position: left -256px;}
	.xg_sprite-back {background-position: left -311px;}
	.xg_sprite-ban, .xg_sprite-ban-member {background-position: left -366px;}
	.xg_sprite-check {background-position: left -422px;}
	.xg_sprite-close {background-position: left -477px;}
	.xg_sprite-delete {background-position: left -531px;}
	.xg_sprite-discussion {background-position: left -584px;}
	.xg_sprite-discussion-open {background-position: left -637px;}
	.xg_sprite-discussion-close {background-position: left -693px;}
	.xg_sprite-download {background-position: left -749px;}
	.xg_sprite-edit {background-position: left -804px;}
	.xg_sprite-embed {background-position: left -860px;}
	.xg_sprite-event {background-position: left -916px;}
	.xg_sprite-favorite-add {background-position: left -972px;}
	.xg_sprite-favorite-remove {background-position: left -1028px;}
	.xg_sprite-feature {background-position: left -1084px;}
	.xg_sprite-feature-add {background-position: left -1138px;}
	.xg_sprite-feature-remove {background-position: left -1192px;}
	.xg_sprite-friend {background-position: left -1246px;}
	.xg_sprite-friend-add {background-position: left -1302px;}
	.xg_sprite-friend-pending, .xg_sprite-friend-request, .xg_sprite-friend-request-sent {background-position: left -1358px;}
	.xg_sprite-friend-remove {background-position: left -1414px;}
	.xg_sprite-folder {background-position: left -1470px;}
	.xg_sprite-folder-add {background-position: left -1523px;}
	.xg_sprite-folder-remove {background-position: left -1578px;}
	.xg_sprite-group {background-position: left -1633px;}
	.xg_sprite-help {background-position: left -1689px;}
	.xg_sprite-inbox {background-position: left -1745px;}
	.xg_sprite-info-view {background-position: left -1798px;}
	.xg_sprite-leave {background-position: left -1859px;}
	.links a, .xg_sprite-link-bullet {background-position: left -1913px;}
	.xg_sprite-manage {background-position: left -1964px;}
	.xg_sprite-message {background-position: left -2020px;}
	.xg_sprite-message-add, .xg_sprite-follow-add {background-position: left -2073px;}
	.xg_sprite-message-block {background-position: left -2127px;}
	.xg_sprite-message-unblock {background-position: left -2181px;}
	.xg_sprite-message-forward {background-position: left -2238px;}
	.xg_sprite-message-new {background-position: left -2291px;}
	.xg_sprite-message-send {background-position: left -2341px;}
	.xg_sprite-message-remove, .xg_sprite-follow-remove {background-position: left -2391px;}
	.xg_sprite-message-reply {background-position: left -2445px;}
	.xg_sprite-message-reply-all {background-position: left -2500px;}
	.xg_sprite-network-friend-request {background-position: left -2555px;}
	.xg_sprite-network-invitation {background-position: left -2614px;}
	.xg_sprite-network-manage {background-position: left -2670px;}
	.xg_sprite-next {background-position: left -2728px;}
	.xg_sprite-permalink {background-position: left -2779px;}
	.xg_sprite-profile-photo-reset {background-position: left -2828px;}
	.xg_sprite-play {background-position: left -2884px;}
	.xg_sprite-previous {background-position: left -2939px;}
	.xg_sprite-private-network {background-position: left -2990px;}
	.xg_sprite-public-network {background-position: left -3050px;}
	.xg_sprite-refresh, .xg_sprite-rotate {background-position: left -3110px;}
	.xg_sprite-repeat-playback {background-position: left -3163px;}
	.xg_sprite-rss {background-position: left -3216px;}
	.xg_sprite-search {background-position: left -3270px;}
	.xg_sprite-setting {background-position: left -3326px;}
	.xg_sprite-share {background-position: left -3382px;}
	.xg_sprite-star {background-position: left -3438px;}
	.xg_sprite-view {background-position: left -3492px;}
	.xg_sprite-view-fullsize {background-position: left -3547px;}
	.rich-comment {background-position: left -3601px;}
	.rich-comment em {background-position: right -3707px;}
	.xg_sprite-blog {background-position: left -3813px;}
	.xg_sprite-discussion {background-position: left -3869px;}
	.xg_sprite-event {background-position: left -3923px;}
	.xg_sprite-invite {background-position: left -3980px;}
	.xg_sprite-music {background-position: left -4036px;}
	.xg_sprite-note {background-position: left -4091px;}
	.xg_sprite-photo {background-position: left -4145px;}
	.xg_sprite-video {background-position: left -4199px;}


	/* xg_icon Definitions */
	.xg_icon-album, .xg_icon-album-add {background-position: -50px top;}
	.xg_icon-album-feature {background-position: -92px top;}
	.xg_icon-album-comment {background-position: -139px top;}
	.xg_icon-about18 {width:18px;height:18px;background-position: -181px top;}
	.xg_icon-activityfeed {width:16px;height:16px;background-position: -224px top;}
	.xg_icon-activityfeed18 {width:18px;height:18px;background-position: -265px top;}
	.xg_icon-ad {width:16px;height:16px;background-position: -308px top;}
	.xg_icon-ad18 {width:18px;height:18px;background-position: -349px top;}
	.xg_icon-application, .xg_icon-application-add, .xg_icon-application-alert {background-position: -392px top;}
	.xg_icon-application-comment {background-position: -435px top;}
	.xg_icon-application-feature, .xg_icon-application-recommended {width:22px;height:18px;background-position: -478px top;}
	.xg_icon-badge {width:16px;height:16px;background-position: -525px top;}
	.xg_icon-badge18 {width:18px;height:18px;background-position: -566px top;}
	.xg_icon-birthday {width:16px;height:16px;background-position: -609px top;}
	.xg_icon-birthday18 {width:18px;height:18px;background-position: -650px top;}
	.xg_icon-blog16 {width:16px;height:16px;background-position: -693px top;}
	.xg_icon-blog18 {width:18px;height:18px;background-position: -734px top;}
	.xg_icon-blog, .xg_icon-blog-add {background-position: -777px top;}
	.xg_icon-blog-comment {background-position: -818px top;}
	.xg_icon-blog-feature {background-position: -858px top;}
	.xg_icon-chat {width:16px;height:16px;background-position: -905px top;}
	.xg_icon-chat18 {width:18px;height:18px;background-position: -946px top;}
	.xg_icon-check {background-position: -989px top;}
	.xg_icon-close, .xg_icon-delete, .delete, .smalldelete, .activity-delete, .recipient-delete, .activity-close {background-position: -1031px top;}
	.xg_icon-comment {background-position: -1066px top;}
	.xg_icon-discussion16 {width:16px;height:16px;background-position: -1110px top;}
	.xg_icon-discussion18 {width:18px;height:18px;background-position: -1151px top;}
	.xg_icon-discussion, .xg_icon-discussion-add {background-position: -1194px top;}
	.xg_icon-discussion-feature {background-position: -1236px top;}
	.xg_icon-discussion-reply, .xg_icon-discussion-comment {background-position: -1278px top;}
	.xg_icon-edit {width:16px;height:16px;background-position: -1322px top;}
	.xg_icon-event16 {width:16px;height:16px;background-position: -1362px top;}
	.xg_icon-event18 {width:18px;height:18px;background-position: -1403px top;}
	.xg_icon-event, .xg_icon-event-add {background-position: -1446px top;}
	.xg_icon-event-attend {background-position: -1489px top;}
	.xg_icon-event-invite, .xg_icon-event-update {background-position: -1529px top;}
	.xg_icon-event-comment {background-position: -1570px top;}
	.xg_icon-event-feature {background-position: -1613px top;}
	.xg_icon-friend-made {background-position: -1659px top;}
	.xg_icon-group16 {width:16px;height:16px;background-position: -1704px top;}
	.xg_icon-group18 {width:18px;height:18px;background-position: -1745px top;}
	.xg_icon-group-comment {background-position: -1788px top;}
	.xg_icon-group-discussion-reply {background-position: -1828px top;}
	.xg_icon-group-discussion-add {background-position: -1873px top;}
	.xg_icon-group-discussion {background-position: -1918px top;}
	.xg_icon-group-feature {background-position: -1966px top;}
	.xg_icon-group-invite {background-position: -2011px top;}
	.xg_icon-group-join {background-position: -2057px top;}
	.xg_icon-group-private {background-position: -2101px top;}
	.xg_icon-group, .xg_icon-group-add, .xg_icon-group-public {background-position: -2147px top;}
	.xg_icon-help, .xg_icon-help-active {background-position: -2193px top;}
	.xg_icon-help {opacity: .25; filter: alpha(opacity = 25); zoom: 1;}
	.xg_icon-help18 {width:18px;height:18px;background-position: -2234px top;}
	.xg_icon-info {background-position: -2277px top;}
	.xg_icon-invitation-accept {background-position: -2318px top;}
	.xg_icon-member16 {width:16px;height:16px;background-position: -2362px top;}
	.xg_icon-member18 {width:18px;height:18px;background-position: -2403px top;}
	.xg_icon-message {background-position: -2446px top;}
	.xg_icon-miniplayer {height:16px;width:21px;background-position: -2489px top;}
	.xg_icon-music16 {width:16px;height:16px;background-position: -2535px top;}
	.xg_icon-music18 {width:18px;height:18px;background-position: -2576px top;}
	.xg_icon-music, .xg_icon-music-add {background-position: -2619px top;}
	.xg_icon-music-feature {background-position: -2658px top;}
	.xg_icon-network-description {width:16px;height:16px;background-position: -2703px top;}
	.xg_icon-network-description18 {width:18px;height:18px;background-position: -2744px top;}
	.xg_icon-network-join {background-position: -2787px top;}
	.xg_icon-announcement, .xg_icon-public-network {background-position: -2833px top;}
	.xg_icon-network {background-position: -2879px top;}
	.xg_icon-ningapps18 {width:18px;height:18px;background-position: -2920px top;}
	.xg_icon-note16 {width:16px;height:16px;background-position: -2963px top;}
	.xg_icon-note18 {width:18px;height:18px;background-position: -3004px top;}
	.xg_icon-note, .xg_icon-note-add {background-position: -3047px top;}
	.xg_icon-note-comment {background-position: -3089px top;}
	.xg_icon-note-feature {background-position: -3127px top;}
	.xg_icon-permalink {background-position: -3172px top;}
	.xg_icon-photo16 {width:16px;height:16px;background-position: -3215px top;}
	.xg_icon-photo18 {width:18px;height:18px;background-position: -3256px top;}
	.xg_icon-photo, .xg_icon-photo-add {background-position: -3299px top;}
	.xg_icon-photo-comment {background-position: -3343px top;}
	.xg_icon-photo-feature {background-position: -3385px top;}
	.xg_icon-private {width:16px;height:16px;background-position: -3432px top;}
	.xg_icon-profile-feature {background-position: -3473px top;}
	.xg_icon-profile-update {background-position: -3517px top;}
	.xg_icon-rating-star-on {width:12px;height:12px;background-position: -3561px top;}
	.xg_icon-rating-star-off {width:12px;height:12px;background-position: -3598px top;}
	.xg_icon-rating-set-on {width:65px;height:12px;background-position: -3635px top;}
	.xg_icon-rating-set-off {width:65px;height:12px;background-position: -3725px top;}
	.xg_icon-refresh, .xg_icon-rotate {background-position: -3815px top;}
	.xg_icon-rss {width:16px;height:16px;background-position: -3854px top;}
	.xg_icon-rss18 {width:18px;height:18px;background-position: -3895px top;}
	.xg_icon-search {width:16px;height:16px;background-position: -3938px top;}
	.xg_icon-textbox {width:16px;height:16px;background-position: -3979px top;}
	.xg_icon-textbox18 {width:18px;height:18px;background-position: -4020px top;}
	.xg_icon-upload-music {height:32px;width:32px;background-position: -4063px top;}
	.xg_icon-upload-phone {height:32px;width:32px;background-position: -4120px top;}
	.xg_icon-upload-photo {height:32px;width:32px;background-position: -4177px top;}
	.xg_icon-upload-video {height:32px;width:32px;background-position: -4234px top;}
	.xg_icon-video16 {width:16px;height:16px;background-position: -4291px top;}
	.xg_icon-video18 {width:18px;height:18px;background-position: -4332px top;}
	.xg_icon-video, .xg_icon-video-add {background-position: -4375px top;}
	.xg_icon-video-comment {background-position: -4416px top;}
	.xg_icon-video-feature {background-position: -4456px top;}
	
	/* Open issue in jquery where :hover will not work if dynamically inserted after page rendered. */
	a { text-decoration:none; }
	a:hover { text-decoration:underline; }
	input { font-size:1em; padding: 2px 1px; border-width:1px; border-color: #666666 #CCCCCC #CCCCCC; }
	.button { font-face: 'Lucida Grande, Helvetica, Arial'; font-size:1em; line-height:1em !important; padding:0.21em 0.3em 0.16em; border:1px solid #AAAAAA; cursor:pointer }	
	
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/ui.core.js"></script>
<script>
	
	/*
	  Color Contrast | Andrew Waer 
	  Origins: http://juicystudio.com/services/colourcontrast.php

	  Usage:

	  // Contrast test for two colors
	  // returns passing score OR false if test fails
	  Contrast.test('#ffffff', '#000000');

	  // find best match from one or two color sets
	  // returns array containing two hex values OR false if no match
	  Contrast.match('#ffffff', ['#000000', '#336699']);
	  Contrast.match(['#ffffff', '#000000', '#336699']);
	  Contrast.match(['#ffffff','#ffffcc'], ['#000000', '#336699']);
	*/

	var Contrast = function()
	{
	  // private functions and properties
	  var _private =
	  {
	    min : { 
	      'brightness': 125, 
	      'difference': 500 
	    },
	    brightness : function(rgb1, rgb2){
	      var b1 = ((rgb1.r * 299) + (rgb1.g * 587) + (rgb1.b * 114)) / 1000;
	      var b2 = ((rgb2.r * 299) + (rgb2.g * 587) + (rgb2.b * 114)) / 1000;
	      return Math.abs(Math.round(b1-b2));
	    },
	    difference : function(rgb1, rgb2){
	      var diff = (Math.max(rgb1.r, rgb2.r) - Math.min(rgb1.r, rgb2.r)) + 
	                 (Math.max(rgb1.g, rgb2.g) - Math.min(rgb1.g, rgb2.g)) + 
	                 (Math.max(rgb1.b, rgb2.b) - Math.min(rgb1.b, rgb2.b));
	      return Math.abs(Math.round(diff));
	    },
	    rgb : function(hex){
	      hex = hex.replace('#','');
	      var rgb = {
	        r: parseInt(hex[0] + hex[1], 16),
	        g: parseInt(hex[2] + hex[3], 16),
	        b: parseInt(hex[4] + hex[5], 16)
	      };
	      return rgb;
	    }
	  };
	  // public functions and properties
	  var _public =
	  {
	    test : function(hex1, hex2){
	      var rgb1 = _private.rgb(hex1);
	      var rgb2 = _private.rgb(hex2);
	      var brightness = _private.brightness(rgb1, rgb2);
	      var difference = _private.difference(rgb1, rgb2);
	      return (
	        brightness >= _private.min.brightness && difference >= _private.min.difference
	          ? ((brightness - _private.min.brightness) + (difference - _private. min.difference))
	          : false
	      );
	    },
	    match : function(hex1, hex2){
	      var total_score, i, j;

	      if (typeof hex1 == 'string') {hex1 = [hex1];}
	      if (typeof hex2 == 'string') {hex2 = [hex2];}
	      var best_match = { 
	        score: 0,
	        hex1:  null,
	        hex2:  null
	      };
	      if (hex2 == null){
	        for (i=0; i<hex1.length; i++){
	          for (j=0; j<hex1.length; j++){
	            total_score = _public.test(hex1[i], hex1[j]);
	            if (total_score > best_match.score){
	              best_match.score = total_score;
	              best_match.hex1 = hex1[i];
	              best_match.hex2 = hex1[j];
	            }
	          }
	        }
	      } 
	      else {
	        for (i=0; i<hex1.length; i++){
	          for (j=0; j<hex2.length; j++){
	            total_score = _public.test(hex1[i], hex2[j]);
	            if (total_score > best_match.score){
	              best_match.score = total_score;
	              best_match.hex1 = hex1[i];
	              best_match.hex2 = hex2[j];
	            }
	          }
	        }
	      }
	      return (
	        best_match.score > 0
	        ? [ best_match.hex1, best_match.hex2 ]
	        : false
	      );
	    }
	  };
	  return _public;
	}();
	
function getWebsafeRGB(i) {
	if (i % 51 == 0) {
		return i;
	} else {
		return (i % 51 < 25) ? i-(i%51) : i+(51-(i%51));
	}
}
function convertToHex(str) {
	// This function converse RGB (comma delimited) to HEX. If already HEX, leaves alone.
	str_ar = str.replace(/rgb\(|\)/g, "").split(",");
	str_ar[0] = parseInt(str_ar[0], 10).toString(16).toLowerCase();
	str_ar[1] = parseInt(str_ar[1], 10).toString(16).toLowerCase();
	str_ar[2] = parseInt(str_ar[2], 10).toString(16).toLowerCase();
	str_ar[0] = (str_ar[0].length == 1) ? '0' + str_ar[0] : str_ar[0];
	str_ar[1] = (str_ar[1].length == 1) ? '0' + str_ar[1] : str_ar[1];
	str_ar[2] = (str_ar[2].length == 1) ? '0' + str_ar[2] : str_ar[2];
	var returnVal = ('#' + str_ar.join(""));
	if (str.indexOf("#") >= 0) { returnVal = str; }
	return returnVal; 
}
	
jQuery.getBgColor = function() {
	var val = gadgets.skins.getProperty(gadgets.skins.Property.BG_COLOR);
	return val;
};

jQuery.getFontColor = function() {
	var val = gadgets.skins.getProperty(gadgets.skins.Property.FONT_COLOR);
	return val;
};
jQuery.getAnchorColor = function() {
	var val = gadgets.skins.getProperty(gadgets.skins.Property.ANCHOR_COLOR);
	return val;
};
jQuery.fn.cssSkin = function() {
	var cssObj = {
		'background-color' : jQuery.getBgColor,
		'color' : jQuery.getFontColor,
		'font-face' : 'Lucida Grande, Helvetica, Arial',
		'font-size' : '13px',
		'line-height' : '1.3em',
		'margin-top' : '-1em'
	}

    return this.each(function() {
		$(this).css(cssObj);
		$("A").css( {
			'color' : jQuery.getAnchorColor,
		});
		var strHexAnchorColor = convertToHex(gadgets.skins.getProperty(gadgets.skins.Property.ANCHOR_COLOR));
		$(".xg_sprite").css( {
			'backgroundImage' : 'url(http://cssdemo01.ning.com/xn_resources/widgets/index/gfx/icons/xg_sprite-' + strHexAnchorColor + '.png)',
			'_backgroundImage' : 'url(http://cssdemo01.ning.com/xn_resources/widgets/index/gfx/icons/ie6/xg_sprite-' + strHexAnchorColor + '.png)'
		});
		$('.button').css('background-color', jQuery.getAnchorColor);
		var buttonContrast = Contrast.test(strHexAnchorColor, '#222222');
	  	$('.button').css('color', (Contrast.test(strHexAnchorColor, '#222222')) ? '#222222' : '#FFFFFF');
    });
};
$(document).ready(function() {
	$("div").cssSkin();	
	gadgets.window.adjustHeight();
	
	// alert(convertToHex(gadgets.skins.getProperty(gadgets.skins.Property.BG_COLOR))); => returns '#333333'
});
</script>
        </div>]]>
    </Content>
    <Content type="html" view="ning.main,canvas,profile">
        <![CDATA[<div class="gadget">

		<!-- What this does: When the document is ready, jQuery will call the ready() method which will run the cssSkin function on the element where id="div". -->
		
		<p><a href="#">Vivamus vel nisl rhoncus risus aliquam aliquam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec ut est vel purus ornare pretium.</a> Ut ultrices. Pellentesque quis velit. Suspendisse pharetra euismod turpis. Curabitur non lacus. Morbi ante. Nullam a quam ac urna volutpat molestie. Sed posuere pharetra nunc. Mauris ut eros eu purus ultrices vulputate. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec fringilla mi vitae felis. Etiam pellentesque. Donec vel sem quis erat vulputate ullamcorper. Curabitur odio lectus, pellentesque et, elementum sed, euismod non, nisl. Donec luctus, tellus quis fermentum dignissim, massa eros consequat augue, et congue nibh urna at nisl. Etiam mi velit, bibendum ut, tempus ac, egestas sed, libero. Nulla ullamcorper vehicula lorem. Pellentesque commodo, sem et gravida lobortis, lectus ante facilisis massa, ac luctus arcu ligula quis justo.</p>
		
		<ul>
			<li>List item 1</li>
		</ul>

		<h1>Standard Headers with zebra styling</h1>
		<ul>
			<li>List item 1</li>
			<li class="">List item 2</li>
			<li>List item 3</li>
			<li class="">List item 4</li>
		</ul>
		
		<form>
			<p><input type="text"></p>
			<!-- Make sure you add class="button" for the values to take shape. -->
			<p><input class="button" type="submit" value="Insert Text Here"></p>
		</form>
		
		<a class="xg_sprite xg_sprite-add" href="/invite">Add icon is to the left. (class="xg_sprite xg_sprite-add")</a><br>
		<a class="xg_sprite xg_sprite-edit" href="/invite">Edit icon is to the left. (class="xg_sprite xg_sprite-edit")</a><br>
		<a class="xg_sprite xg_sprite-delete" href="/invite">Delete icon is to the left. (class="xg_sprite xg_sprite-delete")</a>		
		
        </div>]]>
    </Content>
</Module>