/*

Admap - Vue.js app

Summary:
Loads Senate/House/Gov maps and scores

Dependencies:
Vue js 2.5.13
Axios 0.18.0

Browser Requirements:
IE9+

*/

Vue.component('rc-container', {
  template: ' \
    <div class="admap_widget"> \
      \
      <ul class="map_list"> \
        \
        <transition name="fade" mode="out-in"> \
        <li v-show="current_page == \'senate\'" :class="{senate_page:true, active : current_page == \'senate\'}"> \
          <div class="title"> \
            <a href="/epolls/2018/senate/2018_elections_senate_map.html">Election 2018 - RCP Senate Map</a> \
          </div> \
          <div class="election_scorecard"> \
            <div class="title_section"> \
              <div class="numbers"> \
                <div class="dems number"> \
                  <a href="/epolls/2018/senate/2018_elections_senate_map.html" v-html="senate_top_level_data[\'dem_num\']"></a> \
                </div> \
                <div class="dems label"> \
                  <a href="/epolls/2018/senate/2018_elections_senate_map.html">Democrats *</a> \
                </div> \
                <div class="toss_ups"> \
                  <div class="label"> \
                    <a href="/epolls/2018/senate/2018_elections_senate_map.html">Toss Ups</a> \
                  </div> \
                  <div class="number"> \
                    <a href="/epolls/2018/senate/2018_elections_senate_map.html" v-html="senate_top_level_data[\'tossups\']"></a> \
                  </div> \
                </div> \
                <div class="gop label"> \
                  <a href="/epolls/2018/senate/2018_elections_senate_map.html">Republicans</a> \
                </div> \
                <div class="gop number"> \
                  <a href="/epolls/2018/senate/2018_elections_senate_map.html" v-html="senate_top_level_data[\'gop_num\']"></a> \
                </div> \
              </div> \
            </div> \
            <div class="map"> \
              <a href="/epolls/2018/senate/2018_elections_senate_map.html"><img src="/images/downloads/35_thb.png" alt="Senate Map 2018" /></a> \
            </div> \
          </div> \
        </li> \
        </transition> \
        \
        <transition name="fade" mode="out-in"> \
        <li v-show="current_page == \'house\'" :class="{house_page:true, active : current_page == \'house\'}"> \
          <div class="title"> \
            <a href="/epolls/2018/house/2018_elections_house_map.html">Election 2018 - RCP House Map</a> \
          </div> \
          <div class="election_scorecard"> \
            <div class="title_section"> \
              <div class="numbers"> \
                <div class="dems number"> \
                  <a href="/epolls/2018/house/2018_elections_house_map.html" v-html="house_top_level_data[\'dem_num\']"></a> \
                </div> \
                <div class="dems label"> \
                  <a href="/epolls/2018/house/2018_elections_house_map.html">Democrats</a> \
                </div> \
                <div class="toss_ups"> \
                  <div class="label"> \
                    <a href="/epolls/2018/house/2018_elections_house_map.html">Toss Ups</a> \
                  </div> \
                  <div class="number"> \
                    <a href="/epolls/2018/house/2018_elections_house_map.html" v-html="house_top_level_data[\'tossups\']"></a> \
                  </div> \
                </div> \
                <div class="gop label"> \
                  <a href="/epolls/2018/house/2018_elections_house_map.html">Republicans</a> \
                </div> \
                <div class="gop number"> \
                  <a href="/epolls/2018/house/2018_elections_house_map.html" v-html="house_top_level_data[\'gop_num\']"></a> \
                </div> \
              </div> \
            </div> \
            <div class="map"> \
              <a href="/epolls/2018/house/2018_elections_house_map.html"><img src="/images/downloads/37_thb.png" alt="House Map 2018" /></a> \
            </div> \
          </div> \
        </li> \
        </transition> \
        \
        <transition name="fade" mode="out-in"> \
        <li v-show="current_page == \'governor\'" :class="{governor_page:true, active : current_page == \'governor\'}"> \
          <div class="title"> \
            <a href="/epolls/2018/governor/2018_elections_governor_map.html">Election 2018 - RCP Governors Map</a> \
          </div> \
          <div class="election_scorecard"> \
            <div class="title_section"> \
              <div class="numbers"> \
                <div class="dems number"> \
                  <a href="/epolls/2018/governor/2018_elections_governor_map.html" v-html="governor_top_level_data[\'dem_num\']"></a> \
                </div> \
                <div class="dems label"> \
                  <a href="/epolls/2018/governor/2018_elections_governor_map.html">Democrats</a> \
                </div> \
                <div class="toss_ups"> \
                  <div class="label"> \
                    <a href="/epolls/2018/governor/2018_elections_governor_map.html">Toss Ups</a> \
                  </div> \
                  <div class="number"> \
                    <a href="/epolls/2018/governor/2018_elections_governor_map.html" v-html="governor_top_level_data[\'tossups\']"></a> \
                  </div> \
                </div> \
                <div class="gop label"> \
                  <a href="/epolls/2018/governor/2018_elections_governor_map.html">Republicans</a> \
                </div> \
                <div class="gop number"> \
                  <a href="/epolls/2018/governor/2018_elections_governor_map.html" v-html="governor_top_level_data[\'gop_num\']"></a> \
                </div> \
              </div> \
            </div> \
            <div class="map"> \
              <a href="/epolls/2018/governor/2018_elections_governor_map.html"><img src="/images/downloads/36_thb.png" alt="Governor Map 2018" /></a> \
            </div> \
          </div> \
        </li> \
        </transition> \
        \
        <transition name="fade" mode="out-in"> \
        <li v-show="current_page == \'senate_final\'" :class="{senate_final_page:true, active : current_page == \'senate_final\'}"> \
          <div class="title"> \
            <a href="/elections/live_results/2018/senate/">Election 2018 - Senate Final Map</a> \
          </div> \
          <div class="election_scorecard"> \
            <div class="title_section"> \
              <div class="numbers"> \
                <div class="dems number"> \
                  <a href="/elections/live_results/2018/senate/" v-html="won_seats.senate.dem + \'*\' + net_display(net_seats.senate.dem)"></a> \
                </div> \
                <div class="dems label"> \
                  <a href="/elections/live_results/2018/senate/">Democrats *</a> \
                </div> \
                <div class="gop label"> \
                  <a href="/elections/live_results/2018/senate/">Republicans</a> \
                </div> \
                <div class="gop number"> \
                  <a href="/elections/live_results/2018/senate/" v-html="won_seats.senate.gop + \'\' + net_display(net_seats.senate.gop)"></a> \
                </div> \
              </div> \
            </div> \
            <div class="map"> \
              <a href="/elections/live_results/2018/senate/"><img src="/elections/live_results/2018/live_map_senate_thumb.png" alt="Senate Final Map 2018" /></a> \
            </div> \
          </div> \
        </li> \
        </transition> \
        \
        <transition name="fade" mode="out-in"> \
        <li v-show="current_page == \'governor_final\'" :class="{governor_final_page:true, active : current_page == \'governor_final\'}"> \
          <div class="title"> \
            <a href="/elections/live_results/2018/governor/">Election 2018 - Governors Final Map</a> \
          </div> \
          <div class="election_scorecard"> \
            <div class="title_section"> \
              <div class="numbers"> \
                <div class="dems number"> \
                  <a href="/elections/live_results/2018/governor/" v-html="won_seats.governor.dem + \'\' + net_display(net_seats.governor.dem)"></a> \
                </div> \
                <div class="dems label"> \
                  <a href="/elections/live_results/2018/governor/">Democrats</a> \
                </div> \
                <div class="gop label"> \
                  <a href="/elections/live_results/2018/governor/">Republicans</a> \
                </div> \
                <div class="gop number"> \
                  <a href="/elections/live_results/2018/governor/" v-html="won_seats.governor.gop + \'\' + net_display(net_seats.governor.gop)"></a> \
                </div> \
              </div> \
            </div> \
            <div class="map"> \
              <a href="/elections/live_results/2018/governor/"><img src="/elections/live_results/2018/live_map_governor_thumb.png" alt="Governor Final Map 2018" /></a> \
            </div> \
          </div> \
        </li> \
        </transition> \
        \
        <transition name="fade" mode="out-in"> \
        <li v-show="current_page == \'house_final\'" :class="{house_final_page:true, active : current_page == \'house_final\'}"> \
          <div class="title"> \
            <a href="/elections/live_results/2018/house/">Election 2018 - House Final Map</a> \
          </div> \
          <div class="election_scorecard"> \
            <div class="title_section"> \
              <div class="numbers"> \
                <div class="dems number"> \
                  <a href="/elections/live_results/2018/house/" v-html="won_seats.house.dem + \'\' + net_display(net_seats.house.dem)"></a> \
                </div> \
                <div class="dems label"> \
                  <a href="/elections/live_results/2018/house/">Democrats</a> \
                </div> \
                <div class="gop label"> \
                  <a href="/elections/live_results/2018/house/">Republicans</a> \
                </div> \
                <div class="gop number"> \
                  <a href="/elections/live_results/2018/house/" v-html="won_seats.house.gop + \'\' + net_display(net_seats.house.gop)"></a> \
                </div> \
              </div> \
            </div> \
            <div class="map"> \
              <a href="/elections/live_results/2018/house/"><img src="/elections/live_results/2018/live_map_house_thumb.png" alt="House Final Map 2018" /></a> \
            </div> \
          </div> \
        </li> \
        </transition> \
      \
      </ul> \
      \
      <ul class="map_nav"> \
        <li @click="set_current_page(\'senate\')" :class="{senate:true, active : current_page == \'senate\'}">RCP Senate Map</li> \
        <li @click="set_current_page(\'governor\')" :class="{governor:true, active : current_page == \'governor\'}">RCP Governors Map</li> \
        <li @click="set_current_page(\'house\')" :class="{house:true, active : current_page == \'house\'}">RCP House Map</li> \
        <li @click="set_current_page(\'senate_final\')" :class="{senate_final:true, active : current_page == \'senate_final\'}">Senate Final Map</li> \
        <li @click="set_current_page(\'governor_final\')" :class="{governor_final:true, active : current_page == \'governor_final\'}">Governors Final Map</li> \
        <li @click="set_current_page(\'house_final\')" :class="{house_final:true, active : current_page == \'house_final\'}">House Final Map</li> \
      </ul> \
      \
    </div> \
  ',
  data : function() {
    return {
      promises : [],
      senate_top_level_data : {
        'map_url' : '',
        'map_final_url' : '',
        'dem_num' : 0,
        'gop_num' : 0,
        'tossups' : 0,
        'change' : '',
        'spread_aff' : ''
      },
      governor_top_level_data : {
        'map_url' : '',
        'map_final_url' : '',
        'dem_num' : 0,
        'gop_num' : 0,
        'tossups' : 0,
        'change' : '',
        'spread_aff' : ''
      },
      house_top_level_data : {
        'map_url' : '',
        'dem_num' : 0,
        'gop_num' : 0,
        'tossups' : 0
      },
      won_seats: {
        "senate": {
          "gop": 0,
          "dem": 0,
          "other": 0
        },
        "governor": {
          "gop": 0,
          "dem": 0,
          "other": 0
        },
        "house": {
          "gop": 0,
          "dem": 0,
          "other": 0
        }
      },
      net_seats: {
        "senate": {
          "gop": 0,
          "dem": 0,
          "other": 0
        },
        "governor": {
          "gop": 0,
          "dem": 0,
          "other": 0
        },
        "house": {
          "gop": 0,
          "dem": 0,
          "other": 0
        }
      },
      cache_bust : Math.floor((new Date()).getTime() / 25000), // Changes every 25 seconds
      current_page : 'senate',
      page_names : [
        'senate',
        'senate_final',
        'governor',
        'governor_final',
        'house',
        'house_final'
      ],
      page_interval : []
    }
  },
  created : function() {
    this.load_content();
  },
  methods : {

    net_display : function(num) {

      if(num > 0) {
        return '(+'+num+')';
      } else if(num < 0) {
        return '('+num+')';
      } else {
        return '';
      }
    },

    isXML : function( elem ) {
      // documentElement is verified for cases where it doesn't yet exist
      // (such as loading iframes in IE - #4833) 
      var documentElement = (elem ? elem.ownerDocument || elem : 0).documentElement;

      return documentElement ? documentElement.nodeName !== "HTML" : false;
    },
    set_current_page : function(current_page) {

      this.current_page = current_page;
      clearInterval(this.page_interval);
    },
    load_content : function() {

      this.page_interval = setInterval(function() {

        var new_index = this.page_names.indexOf(this.current_page) + 1;
        if(new_index > this.page_names.length - 1) {
          new_index = 0;
        }

        this.current_page = this.page_names[new_index];

      }.bind(this), 20000);

      // Load homepage final data
      this.promises.push(axios({
        method: 'get',
        url: '/elections/live_results/2018/homepage.json?cache_bust='+this.cache_bust
      }));

      // Load senate snapshot
      this.promises.push(axios({
        method: 'get',
        url: '/epolls/2018/senate/35_seats.xml?cache_bust='+this.cache_bust,
        responseType: 'document'
      }));

      // Load house snapshot
      this.promises.push(axios({
        method: 'get',
        url: '/epolls/2018/house/37_seats.xml?cache_bust='+this.cache_bust,
        responseType: 'document'
      }));

      // Load governor snapshot
      this.promises.push(axios({
        method: 'get',
        url: '/epolls/2018/governor/36_seats.xml?cache_bust='+this.cache_bust,
        responseType: 'document'
      }));

      axios.all(this.promises)
      .catch(function(error) {
        console.log(error);
      })
      .then(function(results) {

        // Senate / House / Governor snapshots

        for(var i = 0; i < results.length; i++) {
          if(this.isXML(results[i].data) &&
            results[i].data.firstChild.getAttribute('name') == 'Battle for the Senate 2018') {

            this.senate_top_level_data['dem_num'] = results[i].data.querySelector('affiliation[name="Democrats"]').getAttribute('projected_seats');
            this.senate_top_level_data['gop_num'] = results[i].data.querySelector('affiliation[name="Republicans"]').getAttribute('projected_seats');
            this.senate_top_level_data['tossups'] = results[i].data.querySelector('election').getAttribute('toss_up');
            this.senate_top_level_data['map_url'] = results[i].data.querySelector('election').getAttribute('url');
          }
        }

        for(var i = 0; i < results.length; i++) {
          if(this.isXML(results[i].data) &&
            results[i].data.firstChild.getAttribute('name') == '2018 Governor Races') {

            this.governor_top_level_data['dem_num'] = results[i].data.querySelector('affiliation[name="Democrats"]').getAttribute('projected_seats');
            this.governor_top_level_data['gop_num'] = results[i].data.querySelector('affiliation[name="Republicans"]').getAttribute('projected_seats');
            this.governor_top_level_data['tossups'] = results[i].data.querySelector('election').getAttribute('toss_up');
            this.governor_top_level_data['map_url'] = results[i].data.querySelector('election').getAttribute('url');
          }
        }

        for(var i = 0; i < results.length; i++) {
          if(this.isXML(results[i].data) &&
            results[i].data.firstChild.getAttribute('name') == 'Battle for the House 2018') {

            this.house_top_level_data['dem_num'] = results[i].data.querySelector('affiliation[name="Democrats"]').getAttribute('projected_seats');
            this.house_top_level_data['gop_num'] = results[i].data.querySelector('affiliation[name="Republicans"]').getAttribute('projected_seats');
            this.house_top_level_data['tossups'] = results[i].data.querySelector('election').getAttribute('toss_up');
            this.house_top_level_data['map_url'] = results[i].data.querySelector('election').getAttribute('url');
          }
        }

        // Final Data
        for(var i = 0; i < results.length; i++) {
          if(typeof results[i].data.won_seats !== 'undefined') {

            console.log('hereA');

            this.won_seats = results[i].data.won_seats;
            this.net_seats = results[i].data.net_seats;
          }
        }
        
        
      }.bind(this));
    }
  }
});

// Start App
new Vue({
  el: '#admap-app'
});