MindField = new function() {
  var BASE_URL = 'http://crowdscanner.com/rest/character_content.js';
  var STYLESHEET = "http://images.crowdscanner.com/mindfield_widget.css";
  var CONTENT_URL = "http://dev.crowdscanner.com/rest/character_content.js";
  var ROOT = "crowdscanner_widget";

  function requestStylesheet(stylesheet_url) {
    stylesheet = document.createElement("link");
    stylesheet.rel = "stylesheet";
    stylesheet.type = "text/css";
    stylesheet.href = stylesheet_url;
    stylesheet.media = "all";
    document.lastChild.firstChild.appendChild(stylesheet);
  }

  function requestContent( local ) {
    var script = document.createElement('script');
    // How you'd pass the current URL into the request
    // script.src = CONTENT_URL + '&url=' + escape(local || location.href);
    script.src = CONTENT_URL;
    // IE7 doesn't like this: document.body.appendChild(script);
    // Instead use:
    document.getElementsByTagName('head')[0].appendChild(script);
  }

  this.serverResponse = function( data ) {
    if (!data) return;
    var div = document.getElementById(ROOT);
    var innerContent = "<div style='padding-top:10px;'><span style='color:#666666;font-size:20px; font-style:bold;font:Helvetica,Verdana,Arial,Sans-Serif;padding-left:15px;' >Who's coming to MindField?</span></div>";
    var theKeys = []; 
 
    var count = 0;
    for (key in data){ 
	theKeys[count] = key;
	count++;
	//innerContent += "<img style='width:75px;height:75px;display:block;padding:10px;' src='"+data[key]+"' /><span style='padding-left:40px;'>"+key+"</span>";	
    }	
    
    innerContent += "<div style='display:block;height: 450px;background:#F7F7F7;border:1px solid #F1F1F1;'><img class= 'thumbnail' style='width:128px;height:128px;float:left;margin:10px 10px 20px 10px;' src='"+data[theKeys[0]]+"' />"
    innerContent += "<img class= 'thumbnail'style='width:128px;height:128px;float:left;margin:10px 0px 20px 10px;' src='"+data[theKeys[1]]+"' />"
    innerContent += "<img class= 'thumbnail'style='width:128px;height:128px;float:left;margin:0px 0px 20px 85px;' src='"+data[theKeys[2]]+"' />"
    innerContent += "<img class= 'thumbnail'style='width:128px;height:128px;float:left;margin:0px 10px 10px 10px;' src='"+data[theKeys[3]]+"' />"
    innerContent += "<img class= 'thumbnail'style='width:128px;height:128px;float:left;margin:0px 0px 10px 10px;' src='"+data[theKeys[4]]+"' /></div>"
    innerContent += "<div style='padding-top:10px;' ><span style='color:#909090;margin-left:38px;font:Helvetica,Verdana,Arial,Sans-Serif;'>Are you coming to MindField?</span><a style='margin:15px;color:black;text-decoration:none;' href='http://crowdscanner.com/mindfield'><img src='http://images.crowdscanner.com/arrowPlayWeb.png' style='height:58px;width:260px;'></a> <div style='font-size:12px;padding:6px 3px 3px 55px;'><a class='CSWidget' href='http://crowdscanner.com/mindfield' style='text-decoration:none; font-style:bold;'>People Hunt, powered by CrowdScanner</a></div></div>";
    div.innerHTML = innerContent;
    div.style.display = 'block'; // make element visible
  }

  requestStylesheet(STYLESHEET);
  document.write("<div id='" + ROOT + "' style='display: none'></div>");
  requestContent();
}

