<?xml  version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="Dow Jones Share Prices"
             description="Dow Jones share prices from NYSE Euronext"
             author="Jorn Westerhout"
             author_email="jornwesterhout+DowJonesSharePrices@gmail.com"
             screenshot="http://i576.photobucket.com/albums/ss204/jornwesterhout/dowjonessharepricesscreenshot.png"
             thumbnail="http://i576.photobucket.com/albums/ss204/jornwesterhout/dowjonessharepricesthumbnail.png"
      category="news"  
      category2="finance"      
      height="500"
      width="450"  > 
<Require feature="idi"/>
<Require feature="locked-domain" />
<Require feature="setprefs"/>
<Require feature="com.google.gadgets.analytics" />
</ModulePrefs>
<UserPref datatype="hidden" name="_table_query_url" display_name="Data source url" />
<UserPref name="_table_query_refresh_interval" display_name="Refresh interval (seconds)" default_value="60" datatype="enum" required="false">
<EnumValue value="60" display_value="60"/>
<EnumValue value="120" display_value="120"/>
</UserPref>
<Content type="html"><![CDATA[

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<div  style=" width:100%; height:100%;">


<div id="tablediv" style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#C0C0C0; overflow: auto;">
Loading Dow Jones Share Prices..<br> 
<img src="http://www.google.com/ig/images/spinner.gif" />
<iframe width="100" height="50" style="visibility:hidden" src="http://spreadsheets.google.com/ccc?key=t9iCtTQpP23KjZgzb6CFOnw&hl=en"></iframe>
</div>


<a href="https://plus.google.com/104993332184688635928/" target="_blank"><font color="black" face="arial" size="2"><b>Follow Daily Deals on Google Plus to Stay Updated on the Latest Offers</b></font></a>



</div>


<script>

var ga = new _IG_GA("UA-10792601-7");
ga.reportPageview('/view/dowjonesshareprices');

/**
 * Load the APIs and run sendQuery when the load is complete
 */
var gadgetHelper = null;
_IG_RegisterOnloadHandler(loadVisualizationAPI);
function loadVisualizationAPI() { 
  google.load("visualization", "1");
  google.setOnLoadCallback(sendQuery);
}

/**
 * Create a query (shaped by the Gadget's user preferences), then 
 * send it to the spreadsheet data source. Also give the name of a 
 * function ("handleQueryResponse") to run once the spreadsheet data 
 * is retrieved:
 */
function sendQuery() {
  var prefs = new _IG_Prefs(); // User preferences 
  prefs.set("_table_query_url", "http://spreadsheets.google.com/ccc?key=t9iCtTQpP23KjZgzb6CFOnw&hl=en");
  gadgetHelper = new google.visualization.GadgetHelper(); 
  var query = gadgetHelper.createQueryFromPrefs(prefs);
  query.send(handleQueryResponse);
} 

/**
 * The core logic. Process the spreadsheet data however you want. 
 * In this case, we create HTML to be presented back to the user. 
 * We'll use inline comments to provide a step-by-step description 
 * of what we're doing:
 */
function handleQueryResponse(response) {

  /**
   * Use the visualization GadgetHelper class to handle errors 
   */
  if (!gadgetHelper.validateResponse(response)) {
    return;     // Default error handling was done, just leave. 
  }

  /**
   * GET THE DATA FROM THE SPREADSHEET - sorry to scream in caps, but 
   * this is a key step
   */
  var data = response.getDataTable();

  var html = [];   // start the HTML output string

  html.push('<div style=" width:100%; height:440px; overflow:auto;">');
  
  html.push('<table width="100%" border="0" celpadding="0" cellspacing="0"><tr style="font-size: 15px; cursor:default;"><td style="border-style:solid;border-color:#ffffff;border-bottom-color:#000000;border-width:2px;">&nbsp;</td><td align="right" style="border-style:solid;border-color:#ffffff;border-bottom-color:#000000;border-width:2px;">Price</td><td align="right" style="border-style:solid;border-color:#ffffff;border-bottom-color:#000000;border-width:2px;">%</td></tr>');
  
  /**
   * Process all Rows in the specified range
   */
  for (var row = 0; row < data.getNumberOfRows(); row++) {

  html.push('<tr style="font-size: 14px; cursor:default;" onmouseover="cellover(this)" onmouseout="cellout(this)">');
  
    /**
     * Process the Columns in each Row
     */
    for (var col = 0; col < data.getNumberOfColumns(); col++) {
  
  if (data.getFormattedValue(0, 0)=='Dow Jones'){
  } else {
  document.location.reload();
  }
  
    if ((col==0)||(col==2)||(col==3)){
  
  if (col==2){
  html.push('<td align="right" style="border-style:solid;border-color:#ffffff;border-bottom-color:#000000;border-width:1px;">');
  } else if(col==3){
  html.push('<td align="right" width="60" style="border-style:solid;border-color:#ffffff;border-bottom-color:#000000;border-width:1px;">');
  } else {
  html.push('<td style="border-style:solid;border-color:#ffffff;border-bottom-color:#000000;border-width:1px;">');
  }
  
      /**
       * GET A DATA VALUE FROM THE RANGE - sorry again for screaming - but 
       * this is the next key step 
       */
      var formattedValue = data.getFormattedValue(row, col);
      formattedValue = escapeHtml(formattedValue);
    if (col==3){
    
      if (formattedValue.substring(0,1)=='-'){
      html.push('<font color="red">'+formattedValue+'</font>');
      } else if(formattedValue.substring(0,2)=='0%'){ 
      html.push(formattedValue);
      } else {
      html.push('<font color="green">'+formattedValue+'</font>');
      }
        
    } else {
    html.push(formattedValue);
    
    }

    html.push('</td>');
    
  }
    }
  
  html.push('</tr>');
  
  } 
  
  html.push('</table>');
  
  html.push('</div>');


  
  /**
   * Set the generated html into the container div.
   */
  var tableDiv = _gel('tablediv');
  tableDiv.innerHTML = html.join('');

}

/**
 * Define any supporting code you need 
 * (like this handy function to escape special characters for html output):
 */
function escapeHtml(text) {
  if (text == null) {
    return '';
  }
  return _hesc(text);
} 

</script> 

<script language="javascript" type="text/javascript"> 
function makearray(n) {
  this.length = n;
  for(var i = 1; i <= n; i++)
    this[i] = 0;
  return this;
}
function hex(i) {
  if (i < 0)    return "00";
  else if (i > 255) return "ff";
  else      return "" + hexa[Math.floor(i/16)] + hexa[i%16];
}
function hexnumtodec(hexchar) {
  if (parseInt(hexchar) == hexchar) return Number(hexchar)
  hexchar = hexchar.toUpperCase()
  switch (hexchar) {
    case 'A': return 10; break;
    case 'B': return 11; break;
    case 'C': return 12; break;
    case 'D': return 13; break;
    case 'E': return 14; break;
    case 'F': return 15; break;
  }
}
function hextodec(daHex) {
  var daDec = Number((16 * hexnumtodec(daHex.substring(0,1))) + hexnumtodec(daHex.substring(1,2)))
  return daDec
}
 
function setColor(r,g,b) {
  var hr = hex(r); var hg = hex(g); var hb = hex(b);
  var daColor = "#"+hr+hg+hb
  daEl.style.backgroundColor = daColor
  if (daColor == colorend.toLowerCase()) {
    clearInterval(iId)
    iId = null
    timerRunning = false
  }
}
 
function fade() {
  i++
  setColor(
    Math.floor(sr * ((step-i)/step) + er * (i/step)),
    Math.floor(sg * ((step-i)/step) + eg * (i/step)),
    Math.floor(sb * ((step-i)/step) + eb * (i/step)));
}
hexa = new makearray(16);
for(var i = 0; i < 10; i++)
  hexa[i] = i;
hexa[10]="a"; hexa[11]="b"; hexa[12]="c";
hexa[13]="d"; hexa[14]="e"; hexa[15]="f";
 
var i
var iId = null
var sr, sg, sb
var er, eg, eb
var interval = 1
var step = 16
var colorstart
var colorend
var daEl
var timerRunning = false
 
function myfade(el,cs,ce,iv,st) {
  daEl = el
  colorstart = cs
  colorend = ce
  interval = iv
  step = st
  i = 0
  if (timerRunning) {
    clearInterval(iId)
    iId = null
  }
  var myRe = /#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})/i
  if (colorstart.match(myRe)) {
    sr = hextodec(RegExp.$1)
    sg = hextodec(RegExp.$2)
    sb = hextodec(RegExp.$3)
  }
  if (colorend.match(myRe)) {
    er = hextodec(RegExp.$1)
    eg = hextodec(RegExp.$2)
    eb = hextodec(RegExp.$3)
  }
  timerRunning = false;
  iId = setInterval("fade()",interval)
  timerRunning = true;
}
function cellover(table_cell) {
  // play around with these values
  // element, from_color, to_color, interval(milliseconds), transition steps
  myfade(table_cell,'#FFFFFF','#B9D4E6',10,16)
}
function cellout(table_cell) {
  if (timerRunning) {
    clearInterval(iId)
    iId = null
  }
  table_cell.style.backgroundColor = '#FFFFFF'
}
</script> 

</div>


  ]]> 
</Content>
</Module>
