/**
 * Settings
 */

var xmlFilename = '/educacion/UV/indiceUltravioleta.xml';
var fontColor = 'black';
var fontSize = '25';
// region 1
var region1x = -185;
var region1y = -390;
// region 2
var region2x = 153;
var region2y = -155;
// region 3
var region3x = -10;
var region3y = -263;
// region 4
var region4x = -10;
var region4y = -328;
// region 5
var region5x = -60;
var region5y = -445;
// region 6
var region6x = 85;
var region6y = -378;
// region 7
var region7x = 157;
var region7y = -285;


if(navigator.appName.indexOf("Microsoft")>-1){
	var region1x = -185; //guanacaste
	var region2x = 152; //pacifico sur
	var region3x = -5; //pacifico central
	var region4x = -10; //valle central
	var region5x = -60; //zona norte
	var region6x = 80; //caribe norte
	var region7x = 157; //caribe sur
}



/**
 * Create a new Document object. If no arguments are specified,
 * the document will be empty. If a root tag is specified, the document
 * will contain that single root tag. If the root tag has a namespace
 * prefix, the second argument must specify the URL that identifies the
 * namespace.
 */
function newXMLDocument(rootTagName, namespaceURL) {
  if (!rootTagName) rootTagName = "";
  if (!namespaceURL) namespaceURL = "";
  if (document.implementation && document.implementation.createDocument) {
    // This is the W3C standard way to do it
    return document.implementation.createDocument(namespaceURL, rootTagName, null);
  }
  else { // This is the IE way to do it
    // Create an empty document as an ActiveX object
    // If there is no root element, this is all we have to do
    var doc = new ActiveXObject("MSXML2.DOMDocument");
    // If there is a root tag, initialize the document
    if (rootTagName) {
      // Look for a namespace prefix
      var prefix = "";
      var tagname = rootTagName;
      var p = rootTagName.indexOf(':');
      if (p != -1) {
        prefix = rootTagName.substring(0, p);
        tagname = rootTagName.substring(p+1);
      }
      // If we have a namespace, we must have a namespace prefix
      // If we don't have a namespace, we discard any prefix
      if (namespaceURL) {
        if (!prefix) prefix = "a0"; // What Firefox uses
      }
      else prefix = "";
      // Create the root element (with optional namespace) as a
      // string of text
      var text = "<" + (prefix?(prefix+":"):"") +  tagname +
          (namespaceURL
           ?(" xmlns:" + prefix + '="' + namespaceURL +'"')
           :"") +
          "/>";
      // And parse that text into the empty document
      doc.loadXML(text);
    }
    return doc;
  }
};

/**
 * Synchronously load the XML document at the specified URL and
 * return it as a Document object
 */
function loadXML(url) {
    // Create a new document with the previously defined function
    var xmldoc = newXMLDocument();
    xmldoc.async = false;  // We want to load synchronously
    xmldoc.load(url);      // Load and parse
    return xmldoc;         // Return the document
};

/**
 * Asynchronously load and parse an XML document from the specified URL.
 * When the document is ready, pass it to the specified callback function.
 * This function returns immediately with no return value.
 */
function loadXMLAsync(url, callback) {
    var xmldoc = newXMLDocument();
    // If we created the XML document using createDocument, use
    // onload to determine when it is loaded
    if (document.implementation && document.implementation.createDocument) {
        xmldoc.onload = function() { callback(xmldoc); };
    }
    // Otherwise, use onreadystatechange as with XMLHttpRequest
    else {
        xmldoc.onreadystatechange = function() {
            if (xmldoc.readyState == 4) callback(xmldoc);
        };
    }
    // Now go start the download and parsing
    xmldoc.load(url);
};

function GetMapa()
{
    var images = document.getElementsByTagName('img');
    for (var i=0; i<images.length; i++)
    {
        var image = images[i];
        if (image.alt == "INDICEUV-MAPA")
        {
            return image;
        }
    }
    return null;
}

function ProcessUV(xmlDoc)
{
    // get image element
    //var image = document.getElementById('mapaIndiceUV');
    //var image = jQuery('.mapaIndiceUV')[0];
    var image = GetMapa();
    if (image == null)
        return;
    // get image element parent node
    imageParent = image.parentNode;
    // create a new div
    contentDiv = document.createElement('div');
    imageParent.appendChild(contentDiv);
    // move image to the new div
    imageParent.removeChild(image);
    contentDiv.appendChild(image);
    // create span elements 'inside' the image
    
    var regiones = xmlDoc.getElementsByTagName("region");
    if (regiones == null)
        return;
        
    // fecha
    var region = regiones[0];
    var fechaValue = region.getElementsByTagName('nombre')[0].childNodes[0].data;
    var fecha = jQuery('.fecha')[0];
    if (fecha != null)
        fecha.innerHTML = fechaValue;
        
    for (i=1; i<regiones.length; i++)
    {
        var region = regiones[i];
        var id = region.getElementsByTagName('id')[0].childNodes[0].data;
        var indiceUV = region.getElementsByTagName('indiceUV')[0].childNodes[0].data;
        var factorCorreccion = region.getElementsByTagName('factorcorreccion')[0].childNodes[0].data;
        var value = Math.round(indiceUV * factorCorreccion);
        value = isNaN(value) ? " " : value;
        
        switch (id)
        {
            case "1":
                var left = region1x;
                var top = region1y;
                break
            case "2":
                var left = region2x;
                var top = region2y;
                break
            case "3":
                var left = region3x;
                var top = region3y;
                break
            case "4":
                var left = region4x;
                var top = region4y;
                break
            case "5":
                var left = region5x;
                var top = region5y;
                break
            case "6":
                var left = region6x;
                var top = region6y;
                break
            case "7":
                var left = region7x;
                var top = region7y;
                break
        }
        
        span = document.createElement('div');
        span.setAttribute('id', "region-"+id);
        //
        span.style.position = 'relative';
        span.style.color = fontColor;
        span.style.fontSize = fontSize + 'px';
        span.style.top = top + 'px';
        span.style.left = left + 'px';
        span.style.lineHeight = '0px';
        span.style.fontWeight = 'bold';
        //
        span.appendChild(document.createTextNode( value ));
        
        contentDiv.appendChild(span);
    }
}

var doc = loadXMLAsync(xmlFilename, ProcessUV); // Load xml file