AliceWonderland/moodmap.html

## moodmap.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>NBC Local Media Labs - Now</title>

  <!-- NBC Streeter key    ABQIAAAAoSzeMDMiOMkt-jxr8_rKERQUIMrGlWh_71tuok4jKj85JkbBzhT3ur0BfzrRKoZKL9l5tfdWM1hdoA -->
  <!-- NBC LocalMediaLabs key   ABQIAAAAoSzeMDMiOMkt-jxr8_rKERTqy0Wh1w9wKL2tZqSWsQEiKNCtcxQGg5Z42XKWomTbiL99SSrFgCYvUQ -->
  <!-- ALICE KEY AIzaSyDQNFbRuzm2tHU8uZl8QxKRo-SFLU--WUM -->

  <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=AIzaSyDQNFbRuzm2tHU8uZl8QxKRo-SFLU--WUM" type="text/javascript"></script>	<!-- ABQIAAAAoSzeMDMiOMkt-jxr8_rKERSZAalYbP1T1G4Hrvh7j77_xvCGpBSCW61rx6Ft3_29sIrXMZ539L4OnQ -->
  <!-- Old Beta JS http://maps-api-tt.appspot.com/apilite/nbc/apiv3.js -->
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script src="jquery.js" language="javascript" type="text/javascript"></script>

  <script type="text/javascript">
  var aryMaps = new Array("NY", "LA", "MIA", "CHI", "DFW", "WA", "SF", "PHILA", "CT", "SD");
  var aryLatt = new Array("40.7014", "34.0900", "25.6415", "41.7713", "32.5468", "38.8716", "37.5794", "40.0780", "41.7713", "32.7041");
  var aryLngg = new Array("-74.0039", "-118.2100", "-79.8925", "-87.4511", "-96.6796", "-77.0251", "-122.4316", "-75.1245", "-72.8833", "-117.1362");

  var aryBaseColors = new Array('#dc380f', '#9f0712', '#368dd4', '#6246b1', '#6fae1e', '#e0ac25');
  var aryDots = new Array ('moodmap_dot0.gif', 'moodmap_dot1.gif', 'moodmap_dot2.gif', 'moodmap_dot3.gif', 'moodmap_dot4.gif', 'moodmap_dot5.gif');

  var aryBubbleX = new Array(296, 86, 256, 129, 18, 261, 65, 274, 305, 115);
  var aryBubbleY = new Array(15, 24, 188, 21, 120, 53, 0, 31, 0, 91);

  var aryDotX = new Array(579, 21, 549, 423, 314, 554, 9, 557, 586, 53);
  var aryDotY = new Array(140, 221, 374, 145, 269, 170, 178, 149, 125, 248);

  var aryLat = new Array();
  var aryLng = new Array();
  var aryCity = new Array();
  var aryCityId = new Array();
  var aryMood = new Array();
  var aryMoodText = new Array();
  var aryMoodColorId = new Array();
  var aryMoodColor = new Array();
  var aryVoteCount = new Array();
  var aryUrl = new Array();

  function initialize(){
    doTheXML();
  }

  //SET MAP COLORS AND STYLE
  var eraseMapStyle = [
    {featureType: 'all', stylers: [{visibility: 'off'}]},
    {featureType: 'landscape', stylers: [{visibility: 'simplified'}, {hue: '#333333' }, { saturation:-90}, {lightness: -78 }]},
    {featureType: 'water', stylers: [{ visibility: 'simplified' }, { saturation: -100 },  { lightness: -71 }]}
  ];

  var mapStyle;
  function getMapStyle(elColor){
    if(elColor=="#dc380f"){
      mapStyle =[
        {featureType: 'road', stylers: [{visibility: 'off'}]},
        {featureType: 'transit', stylers: [{visibility: 'off'}]},
        {featureType: 'poi', stylers: [{visibility: 'off'}]},
        {featureType: 'administrative.neighborhood',  stylers: [{visibility: 'off'}]},
        {featureType: 'administrative.locality', stylers: [{visibility: 'on'}]},
        {featureType: 'landscape',  stylers: [{visibility: 'simplified'}, {hue: '#DC380F' }, { saturation:80}, {lightness: -50 }]},
        {featureType: 'water', stylers: [{ visibility: 'simplified' }, { saturation: -100 }, { lightness: -71 }]}
      ];
    }else if(elColor=="#9f0712"){
      mapStyle =[
        {featureType: 'road', stylers: [{visibility: 'off'}]}, {featureType: 'transit', stylers: [{visibility: 'off'}]},
        {featureType: 'poi', stylers: [{visibility: 'off'}]},
        {featureType: 'administrative.neighborhood',  stylers: [{visibility: 'off'}]},
        {featureType: 'administrative.province', stylers: [{visibility: 'on'}]},
        {featureType: 'landscape', stylers: [{visibility: 'simplified'},  {hue: '#9F0712' }, { saturation:81}, {lightness: -64 }]},
        {featureType: 'water',  stylers: [{ visibility: 'simplified' }, { saturation: -100 }, { lightness: -71 }]}
      ];
    }else if(elColor=="#368dd4"){
      mapStyle =[
        {featureType: 'road', stylers: [{visibility: 'off'}]},
        {featureType: 'transit', stylers: [{visibility: 'off'}]},
        {featureType: 'poi',  stylers: [{visibility: 'off'}]},
        {featureType: 'administrative.neighborhood', stylers: [{visibility: 'off'}]},
        {featureType: 'administrative.locality', stylers: [{visibility: 'on'}]},
        {featureType: 'landscape',  stylers: [{visibility: 'simplified'}, {hue: '#368DD4' }, { saturation:55}, {lightness: -44 }]},
        {featureType: 'water', stylers: [{ visibility: 'simplified' }, { saturation: -100 }, { lightness: -71 }]}
      ];
    }else if(elColor=="#6246b1"){
      mapStyle =[
        {featureType: 'road', stylers: [{visibility: 'off'}]},
        {featureType: 'transit', stylers: [{visibility: 'off'}]},
        {featureType: 'poi',  stylers: [{visibility: 'off'}]},
        {featureType: 'administrative.neighborhood',  stylers: [{visibility: 'off'}]},
        {featureType: 'administrative.locality', stylers: [{visibility: 'on'}]},
        {featureType: 'landscape',  stylers: [{visibility: 'simplified'}, {hue: '#6246B1' }, { saturation:24}, {lightness: -48 }]},
        {featureType: 'water',  stylers: [{ visibility: 'simplified' }, { saturation: -100 }, { lightness: -71 }]}
      ];
    }else if(elColor=="#6fae1e"){
      mapStyle =[
        {featureType: 'road', stylers: [{visibility: 'off'}]}, {featureType: 'transit', stylers: [{visibility: 'off'}]},
        {featureType: 'poi',  stylers: [{visibility: 'off'}]},
        {featureType: 'administrative.neighborhood',  stylers: [{visibility: 'off'}]},
        {featureType: 'administrative.locality', stylers: [{visibility: 'on'}]},
        {featureType: 'landscape', stylers: [{visibility: 'simplified'}, {hue: '#6FAE1E' }, { saturation:60}, {lightness: -57 }]},
        {featureType: 'water', stylers: [{ visibility: 'simplified' }, { saturation: -100 }, { lightness: -71 }]}
      ];
    }else if(elColor=="#e0ac25"){
      mapStyle =[
        {featureType: 'road', stylers: [{visibility: 'off'}]},
        {featureType: 'transit', stylers: [{visibility: 'off'}]},
        {featureType: 'poi', stylers: [{visibility: 'off'}]},
        {featureType: 'administrative.neighborhood',  stylers: [{visibility: 'off'}]},
        {featureType: 'administrative.locality', stylers: [{visibility: 'on'}]},
        {featureType: 'landscape',stylers: [{visibility: 'simplified'}, {hue: '#E0AC25' }, { saturation:69}, {lightness: -46 }]},
        {featureType: 'water',  stylers: [{ visibility: 'simplified' }, { saturation: -100 }, { lightness: -71 }]}
      ];
    }else{
      //do nothing
    }
    return mapStyle;
  }
  //END SET MAP COLORS AND STYLE

  var currTrend = 0;
  var trendInterval = 0;
  function doTheXML(){
    var request = GXmlHttp.create();
    request.open('GET', 'nbc_moodmap_xml.xml', true);
    request.onreadystatechange = function(){
      if(request.readyState == 4 && request.status == 200){
        var xmlDoc = request.responseXML;
        var xmlrows = xmlDoc.documentElement.getElementsByTagName("row");
        var htmlForFeedz = "";
        currTrend = xmlrows.length;
        currTrend--;

        for (var i = 0; i < xmlrows.length; i++) {
          var xmlrow = xmlrows[i];
          var xmlcellLongitude = xmlrow.getElementsByTagName("longitude")[0];
          var xmlcellLatitude = xmlrow.getElementsByTagName("latitude")[0];
          var celltextLongitude = xmlcellLongitude.firstChild.data;
          var celltextLatitude = xmlcellLatitude.firstChild.data;
          //var point = new GLatLng(parseFloat(xmlcellLatitude.firstChild.data), parseFloat(xmlcellLongitude.firstChild.data));
          var xmlcellCity = xmlrow.getElementsByTagName("city")[0];
          var celltextCity = xmlcellCity.firstChild.data;

          var xmlcellCityId = xmlrow.getElementsByTagName("cityid")[0];
          var celltextCityId = xmlcellCityId.firstChild.data;

          var xmlcellMood = xmlrow.getElementsByTagName("mood")[0];
          var celltextMood = xmlcellMood.firstChild.data;

          var xmlcellMoodText = xmlrow.getElementsByTagName("moodtext")[0];
          var celltextMoodText = xmlcellMoodText.firstChild.data;

          var xmlcellMoodColorId = xmlrow.getElementsByTagName("moodcolorid")[0];
          var celltextMoodColorId = xmlcellMoodColorId.firstChild.data;

          var xmlcellMoodColor = xmlrow.getElementsByTagName("moodcolor")[0];
          var celltextMoodColor = xmlcellMoodColor.firstChild.data;

          var xmlcellVoteCount = xmlrow.getElementsByTagName("votecount")[0];
          var celltextVoteCount = xmlcellVoteCount.firstChild.data;

          var xmlcellUrl = xmlrow.getElementsByTagName("url")[0];
          var celltextUrl = xmlcellUrl.firstChild.data;

          aryLat[i]=celltextLatitude;
          aryLng[i]=celltextLongitude;
          aryCity[i]=celltextCity;
          aryCityId[i]=celltextCityId;
          aryMood[i]=celltextMood;
          aryMoodText[i]=celltextMoodText;
          aryMoodColorId[i]=celltextMoodColorId;
          aryMoodColor[i]=celltextMoodColor;
          aryVoteCount[i]=celltextVoteCount;
          aryUrl[i]=celltextUrl;

          htmlForFeedz += '<li id="ulTrend' + i + '">'
          + '<a href="' + aryUrl[i] + '?__source=labs" target="_blank">' + aryCity[i]
          + ' is <span style="text-transform:uppercase;color:' + aryMoodColor[i] + ';">' + aryMood[i] + '</span> '
          + aryMoodText[i]
          + ' <span style="color:' + aryMoodColor[i] + ';">' + aryVoteCount[i] + ' votes &raquo;</span>'
          + '</a>'
          + '</li>';
        }
        document.getElementById('ulTrend').innerHTML = htmlForFeedz;

        var tmpTrend=currTrend-4;
        for(t=currTrend;t>=tmpTrend;t--){
          document.getElementById("ulTrend"+currTrend).style.fontSize=setTrendFont(aryVoteCount[currTrend]);
          document.getElementById("ulTrend"+currTrend).style.display="block";
          document.getElementById("ulTrend"+currTrend).style.opacity=0.99;

          currTrend--;

          if(t<=tmpTrend){
            trendInterval = setInterval("streamTrend()", 4000);
          }
        }
      }
    }
    request.send(null);
  }

  function setTrendFont(param){
    var tmpFactor;
    var tmpSize;
    var newSize;
    var group1BaseFontSize=12;
    var group2BaseFontSize=32;
    var group3BaseFontSize=52;

    if(param<=100){
      tmpFactor=(Math.floor(aryVoteCount[currTrend]/10)-1)*2;
      tmpSize=group1BaseFontSize + tmpFactor;
    }
    else if(param<=1000){
      tmpFactor=(Math.floor(aryVoteCount[currTrend]/100)-1)*2;
      tmpSize=group2BaseFontSize + tmpFactor;
    }
    else if(param<=10000){
      tmpFactor=(Math.floor(aryVoteCount[currTrend]/1000)-1)*2;
      tmpSize=group3BaseFontSize + tmpFactor;
    }
    else{//voteCount > 100,000
      tmpSize=70;
    }
    newSize=tmpSize+"px";
    return newSize
  }

  function streamTrend(){
    document.getElementById('loadanim').style.display="none";

    //set font styles for each new trend
    document.getElementById("ulTrend"+currTrend).style.fontSize=setTrendFont(aryVoteCount[currTrend]);

    //open trend
    $("#ulTrend"+currTrend).slideDown(650);
    $("#ulTrend"+currTrend).animate({
      opacity: 0.99
      }, 650, function() {
    });

    elMapId= aryCityId[currTrend];
    elColorId= aryMoodColor[currTrend];

    swapMaps(currTrend);
  }

  function swapMaps(itemId){
    $("#bubble1").animate({
      opacity: 0.0
      }, 200, function() {
        $("#dot1").animate({
        opacity: 0.0
        }, 230, function() {
          //do dot
          currCityId=aryCityId[currTrend];
          document.getElementById('dot1').innerHTML="<img src='images/moodmap_dot"+aryMoodColorId[currTrend]+".gif?cachebuster=alice' alt='moodmap dot' />";
          document.getElementById('dot1').style.top=aryDotY[currCityId]+"px";
          document.getElementById('dot1').style.left=aryDotX[currCityId]+"px";
          $("#dot1").animate({
          opacity: 0.99
          }, 330, function() {
            //do the maps
            elMapId= aryCityId[itemId];
            elColor= aryMoodColor[itemId];
            elLat= aryLat[itemId];
            elLng= aryLng[itemId];

            elMap= "mapNY";
            elMap2= "mapNY2";

            var STYLED = 'style';
            var opts = {
              mapTypeControlOptions: {mapTypeIds: [google.maps.MapTypeId.ROADMAP, STYLED]},
              navigationControl: false,
              scaleControl: false,
              center: new google.maps.LatLng(elLat, elLng),
              disableDefaultUI: true,
              disableDoubleClickZoom: true,
              scrollwheel: false,
              draggable: true,
              useStaticMap: false,
              zoom: 6,
              mapTypeId: STYLED
            };

            window["map"+elMapId] = new google.maps.Map(document.getElementById(elMap), opts);
            var styledMapType = new google.maps.StyledMapType(getMapStyle(elColor), {name: elMap});

            /*var styledMapType = new google.maps.StyledMapType([{
              featureType: 'all',
              stylers: [{hue: elColor},{saturation: 100}]
            }], {name: elMap});*/

            window["map"+elMapId].mapTypes.set(STYLED, styledMapType);

            var myLatlng = new google.maps.LatLng(elLat, elLng);
            var marker = new google.maps.Marker({
              position: myLatlng,
              map: window["map"+elMapId],
              title: aryCity[itemId]
            });
            google.maps.event.addListener(marker, 'click', function() {
              window.open(aryUrl[currTrend]);
            });

            /*window["map"+elMapId+"2"] = new google.maps.Map(document.getElementById(elMap2), opts);
            var styledMapType = new google.maps.StyledMapType([{
              featureType: 'all',
              stylers: [{hue: '#333333'},{lightness: -80}]
            }], {name: elMap2});
            window["map"+elMapId+"2"].mapTypes.set(STYLED, styledMapType);

            var myLatlng = new google.maps.LatLng(elLat, elLng);
            var marker = new google.maps.Marker({
              position: myLatlng,
              map: window["map"+elMapId+"2"],
              title: aryCity[itemId]
            });
            google.maps.event.addListener(marker, 'click', function() {
              window.open(aryUrl[currTrend]);
            });*/

            //add in txt
            document.getElementById('bubble1Hdr').innerHTML='<center>'+ aryCity[currTrend] +' is <span style="color:' + aryMoodColor[currTrend] + '">'+ aryMood[currTrend] + '</span>!</center>';
            document.getElementById('bubble1Ftr').innerHTML='<center><a href="' + aryUrl[currTrend] + '?__source=labs" target="_blank">' + aryCity[currTrend] +' is <span style="color:' + aryMoodColor[currTrend] + '">'+ aryMood[currTrend] + '</span> '+ aryMoodText[currTrend] + '</a></center>';

            //position bubble and open it
            //var offset = $("#wrapr").offset();
            //currTop=offset.top;
            //currLeft=offset.left;

            bub1=document.getElementById('bubble1');
            bub1.style.top=aryBubbleY[currCityId] + "px";
            bub1.style.left=aryBubbleX[currCityId] + "px";

            $("#bubble1").animate({opacity: 0.99}, 550, function() {
              //document.getElementById(elMap).style.opacity=0;
              //fadeInDiv(document.getElementById(elMap));
              //fadeOutDiv(document.getElementById(elMap2));
            });

            currTrend--;

            //Stop interval, do some cleanup, and start over
            if(currTrend < 0){
              //clear maps
              GUnload();

              //clear arrays
              aryLat.splice(0,aryLat.length);
              aryLng.splice(0,aryLng.length);
              aryCity.splice(0,aryCity.length);
              aryCityId.splice(0,aryCityId.length);
              aryMood.splice(0,aryMood.length);
              aryMoodText.splice(0,aryMoodText.length);
              aryMoodColorId.splice(0,aryMoodColorId.length);
              aryMoodColor.splice(0,aryMoodColor.length);
              aryVoteCount.splice(0,aryVoteCount.length);
              aryUrl.splice(0,aryUrl.length);

              //clear interval
              clearInterval(trendInterval);

              //start over
              doTheXML();
            }
        });
      });
    });
  }

  // Smoothly fade out a div, such as the start options or popup window
  function fadeOutDiv(div){
    var timer = 0;
    var speed = 40;
    var closure = function(opacity){
      return function(){
        if (!opacity){
          //div.style.display = "none";
          div.style.zIndex="1";
        }
        div.style.opacity = (opacity / 100);
        div.style.filter = "alpha(opacity=" + opacity + ")";
      }
    }
    for(var o = 90; o >= 0; o -= 10){
      setTimeout(closure(o), ((timer++)*speed));
    }
  }

  // Smoothly fade in a div
  function fadeInDiv(div){
    var timer = 0;
    var speed = 40;
    //div.style.display = "block";
    div.style.zIndex="1000";
    var closure = function(opacity){
      return function(){
        div.style.opacity = (opacity / 100);
        div.style.filter = "alpha(opacity=" + opacity + ")";
      }
    }
    for(var o = 10; o <= 100; o += 10){
      setTimeout(closure(o), ((timer++)*speed));
    }
  }

  /*var currTop=0;
  var currLeft=0;
  function chkPosition(){
    var offset = $("#wrapr").offset();
    currTop=offset.top;
    currLeft=offset.left;
  }
  window.onresize = chkPosition;*/
  </script>
  <style type="text/css">
  body{
    margin: 0px;
    padding: 0px;
    background-color: #222222;
    font-family: arial, helvetica, sans-serif;
    font-size: 10px;
    color: #ffffff;
  }
  #wrapr{
    width: 940px;
    height: 550px;
    display:block;
    overflow:hidden;
  }
  .centerit{
    margin-left: auto;
    margin-right: auto;
  }
  #gheader{
    width:940px;
    height: 56px;
    margin-top:10px;
    margin-bottom:6px;
    border-bottom:1px solid #acacac;
    font-size: 10px;
    color: #989898;
    display:block;
  }
  #gsubheader{
    position:relative;
    width:940px;
    height:17px;
    margin-top:8px;
    margin-bottom:6px;
    font-size: 10px;
    color: #bebebe;
    display:block;
    overflow:hidden;
  }
  #gsubheader div{
  display:block;
  float:left;
  }
  #gsubheader a:hover{
  text-decoration: underline;
  }
  #gsleft{

  }
  #gsright{
  margin-left: 775px;
  }
  #pplcount{
    position:relative;
    top:-28px;
    left:819px;
  }
  #mapContainer{
    width: 657px;
    height: 595px;
    position: relative;
    display: block;
    float:left;
    background-image:url('images/moodmap_mapcutout2.gif');
    background-repeat: no-repeat;
    background-position: 0px 0px;
    z-index:100;
  }
  .blockout{
    width:228px;
    height:141px;
    display:block;
    border:0px solid aqua;
    margin:0px;
    padding:0px;
  }
  #mapNY, #mapLA, #mapMIA, #mapDFW, #mapCHI, #mapWA, #mapSF, #mapPHILA, #mapCT, #mapSD{
    width:228px;height:141px;opacity:0.99;display:block;background-color:#222222;
  }
  #mapNY2, #mapLA2, #mapMIA2, #mapDFW2, #mapCHI2, #mapWA2, #mapSF2, #mapPHILA2, #mapCT2, #mapSD2{
    width:228px;height:141px;opacity:0.99;display:block;background-color:#222222;
    top:-141px;
  }
  a:link, a:visited, a:active{
    color: #bebebe;
    text-decoration: none;
  }
  a:hover{
    color: #ffffff;
    text-decoration: none;
  }
  #feedz{
    font: normal 12px/14px Arial;
    color: #ffffff;
    width: 275px;
    height: 430px;
    float: left;
    position: relative;
    top: 0px;
    overflow:hidden;
    margin-left: 6px;
  }
  #feedz ul{
    padding: 0px;
    margin: 0px;
  }
  #feedz li{
    width: 275px;
    padding: 7px 0px 7px 0px;
    margin: 0px;
    margin-bottom: 6px;
    font-weight: normal;
    list-style-type: none;
    line-height: 100%;
    display: none;
    opacity: 0;
  }

  /*FOR FIXED FOOTER*/
  /*body{
    margin:0;
    padding:0 0 70px 0;
  }
  @media screen{
    body>div#footer{
    position: fixed;
    }
  }
  * html body{
    overflow:hidden;
  }
  * html div#wrapr{
    height:100%;
    overflow:auto;
  }*/
  div#footer{
    position:relative;
    top:0;
    left:0;
    width:100%;
    height:70px;
    z-index: 500;
    text-align: center;
    font-size: 10px;
    color: #444444;
    text-transform: uppercase;
  }
  #footertxt{
    margin-top: 15px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    width: 900px;
    white-space: nowrap;
  }
  #footertxt img{
    vertical-align: middle;
  }
  #footertxt p{
    font-size: 11px;
    font-weight: bold;
    color: #999999;
  }
  #footertxt a{
    font-size: 11px;
    font-weight: bold;
    color: #444444;
    margin-top: 10px;
    margin-left: 10px;
  }

  /* FOR BUBBLES */
  #bubble1,#bubble2{
    position:absolute;
    top:-1000px;
    left:-1000px;
    width:230px;
    padding:9px;
    z-index:100;
    display:block;
    overflow:hidden;
    opacity:0;
    background-color:#333333;

    -moz-border-radius-topleft: 6px;
    -webkit-border-top-left-radius: 6px;
    -moz-border-radius-bottomleft: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-topright: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-bottomright: 6px;
    -webkit-border-bottom-right-radius: 6px;
  }
  .bubbleHdr{
    position:relative;
    top:0px;
    left:0px;
    width:228px;
    height:29px;
    z-index:1;
    display:block;
    font-size:20px;
  }
  .bubbleMap{
    position:relative;
    top:0px;
    left:0px;
    width:228px;
    height:141px;
    z-index:1;
    display:block;
    overflow:hidden;
  }
  .bubbleFtr{
    position:relative;
    top:0px;
    left:0px;
    width:228px;
    z-index:1;
    margin-top:6px;
    display:block;
    font-size: 14px;
  }

  /* FOR DOTS*/
  #dot1{
  position:relative;
  top:-1000px;
  left:-1000px;
  width:22px;
  height:22px;
  padding:0px;
  margin:0px;
  opacity:0.99;
  display:block;
  z-index:10;
  }

  /* ABOUT */
  .black_overlay{
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index:1001;
  -moz-opacity: 0.6;
  opacity:.60;
  filter: alpha(opacity=60);
  }

  .white_content {
  display: none;
  position: absolute;
  top: 10%;
  left: 23%;
  width: 50%;
  height: 70%;
  padding: 16px;
  border: 8px solid #222222;
  background-color: #eeeeee;
  z-index:2002;
  overflow: auto;
  font-size: 14px;
  color: #444444;
  }

  /* LOADING ANIM */
  #loadanim{
  position:relative;
  top:160px;
  left:280px;
  margin:0px;
  padding:0px;
  width:32px;
  height:32px;
  display:block;
  z-index:2000;
  opacity:0.47;
  background-image:url('images/LIM_ContentProcAni_Final-Gallery-BG.gif');
  }
  </style>
</head>
<body onload="initialize()" onunload="GUnload()">
  <!-- Main Container -->
  <div id="wrapr" class="centerit">
      <div id="gheader">
        <img src="images/moodmap_header.gif" alt="NBC Local Media Labs" />
        <!-- <img style="margin-left:230px;" src="http://${cms.mediaDomain}/designimages/moodmap_fbooklike.gif" />
        <div id="pplcount">9,527 people like this.</div> -->
      </div>

      <div id="gsubheader">
        <div id="gsleft"><a href="#"><u>NOW</u></a> | <a href = "javascript:void(0)" onclick = "document.getElementById('timemachine').style.display='block';document.getElementById('fade').style.display='block';">TIME MACHINE</a></div>
        <div id="gsright"><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block';">ABOUT</a></div>
      </div>

      <div id="mapContainer">
        <div id="dot1"></div>
        <div id="bubble1">
          <div id="bubble1Hdr" class="bubbleHdr"></div>
          <div class="bubbleMap">
              <div id="mapNY"></div>
              <div id="mapNY2"></div>
          </div>
          <div id="bubble1Ftr" class="bubbleFtr"></div>
        </div>
      </div>

      <div id="feedz">
        <ul id="ulTrend"></ul>
        <div id="loadanim"><img src="images/LIM_ContentProcAni_Final-Gallery-BG.gif" alt="loading" /></div>
    </div>
  </div>

  <!-- Footer -->
  <div id="footer">
    <div id="footertxt">
      <p><!-- <img src="http://${cms.mediaDomain}/designimages/moodmap_visitus.gif" /> -->
        OUR CITIES:
        <a href="http://www.nbcbayarea.com/">Bay Area</a>
        <a href="http://www.nbcchicago.com/">Chicago</a>
        <a href="http://www.nbcconnecticut.com/">Connecticut</a>
        <a href="http://www.nbcdfw.com/">dallas f.w.</a>
        <a href="http://www.nbclosangeles.com/">los angeles</a>
        <a href="http://www.nbcmiami.com/">miami</a>
        <a href="http://www.nbcnewyork.com/">new york</a>
        <a href="http://www.nbcphiladelphia.com/">Philadelphia</a>
        <a href="http://www.nbcsandiego.com/">San Diego</a>
        <a href="http://www.nbcwashington.com/">washington  d.c.</a>
      </p>
      <p>&copy; 2010 - NBC universal / Local media</p>
    </div>
  </div>

  <!-- About Overlays -->
  <div id="fade" class="black_overlay"></div>
  <div id="light" class="white_content">
    <div><img src="images/moodmap_lightbox_logo.gif?cachebuster=alice2" alt="NBC Local Media Labs" />
      <div style="position:relative;top:-50px;left:98%;z-index=10;width:20px;"><a href="javascript:void(0)"  style="color:#444444;font-weight:bold;" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"><img src="images/moodmap_closebtn.gif?cachebuster=alice2" border="0" alt="Close" /></a></div>
    </div>
    <br /><b>"The Mood of our Cities Now"</b> surfaces the most emotional stories of the day from each of our 10 cities. Although presented from a national context, it's a great way to see stories from across the nation and how they have been received by their individual communities. The feed pulls in the most 'mooded' stories from each of our sites, with the number of votes determining the size of the story headline. The map displays the location of the story, and the color correlates to how the majority of users felt about that story.
    <br /><br /><b>"The Mood of our Cities Time Machine"</b> lets users travel back in time to see the overall mood of the nation on a given day. We do this by aggregating all of our mood votes, from every city, to determine an overarching mood that the nation collectively felt. It is then represented on our map of the USA, along with the most mood intense stories from that particular day. By hovering over the dates, you can quickly scan across the mood of multiple days to identify overall trends where the U.S. was furious, thrilled and so on. It is a clear way to get a sense of what the nation was feeling on a given day, and what key stories caused us to feel that way.
    <br /><br /><b>About NBC Local Media</b><br />
    The NBC Local Media team owns and operates lifestyle sites in 10 of the nation’s largest markets, covering subjects ranging from pop culture and fashion to politics and breaking news. Last year, we released a product called “The Mood” with the goal of capturing the emotion of the city by letting users vote on how individual stories made them feel using six distinct moods. Through this, users immediately know the overall emotion associated with a given story, and it also allows us to surface the most reactive, emotional and divisive stories from the city as a whole. With “The Mood of our Cities”, this is the first time we’ve taken our mood data and aggregated it to present a view of the moods across the nation.
  </div>

  <div id="timemachine" class="white_content" style="height:45%;">
    <div><img src="images/moodmap_lightbox_logo.gif?cachebuster=alice2" alt="NBC Local Media Labs" />
      <div style="position:relative;top:-50px;left:98%;z-index=10;width:20px;"><a href="javascript:void(0)"  style="color:#444444;font-weight:bold;" onclick="document.getElementById('timemachine').style.display='none';document.getElementById('fade').style.display='none'"><img src="images/moodmap_closebtn.gif?cachebuster=alice2" border="0" alt="Close" /></a></div>
    </div>
    <br /><b>"The Mood of our Cities Time Machine"</b> lets users travel back in time to see the overall mood of the nation on a given day. We do this by aggregating all of our mood votes, from every city, to determine an overarching mood that the nation collectively felt. It is then represented on our map of the USA, along with the most mood intense stories from that particular day. By hovering over the dates, you can quickly scan across the mood of multiple days to identify overall trends where the U.S. was furious, thrilled and so on. It is a clear way to get a sense of what the nation was feeling on a given day, and what key stories caused us to feel that way.
    <br /><br />Coming Soon!
  </div>

</body>
</html>