irc-stats.html

<link rel="import" href="//cdn.thecact.us/bower_components/polymer/polymer.html">
<link rel="import" href="//cdn.thecact.us/bower_components/core-ajax/core-ajax.html">
<link rel="import" href="//cdn.thecact.us/bower_components/core-icon-button/core-icon-button.html">
<link rel="import" href="//cdn.thecact.us/bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="//cdn.thecact.us/bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="//cdn.thecact.us/bower_components/core-icons/core-icons.html">
<link rel="import" href="//cdn.thecact.us/bower_components/core-tooltip/core-tooltip.html">
<link rel="import" href="//cdn.thecact.us/bower_components/core-pages/core-pages.html">
<link rel="import" href="//cdn.thecact.us/bower_components/core-animated-pages/core-animated-pages.html">
<link rel="import" href="//cdn.thecact.us/bower_components/core-animated-pages/transitions/cross-fade.html">
<link rel="import" href="//cdn.thecact.us/bower_components/core-overlay/core-overlay.html">
<link rel="import" href="//cdn.thecact.us/bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="//cdn.thecact.us/bower_components/paper-tabs/paper-tab.html">
<link rel="import" href="//cdn.thecact.us/bower_components/paper-shadow/paper-shadow.html">
<link rel="import" href="//cdn.thecact.us/bower_components/paper-ripple/paper-ripple.html">
<link rel="import" href="//cdn.thecact.us/bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="//cdn.thecact.us/bower_components/paper-button/paper-button.html">
<link rel="import" href="//cdn.thecact.us/bower_components/paper-toggle-button/paper-toggle-button.html">
<script src="//cdn.thecact.us/bower_components/moment/min/moment.min.js"></script>
<script src="//cdn.thecact.us/bower_components/moment-timezone/builds/moment-timezone.min.js"></script>

<polymer-element name="irc-stats" attributes="JSONURI IRCchannel">

  <template>
    <style>    
      :host {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        background-color: #aaaaaa;
      }
      core-toolbar {
        color: rgb(255, 255, 255);
        background-color: rgb(48, 153, 48);
      }
      #title {
        font-size: 22pt;
        font-weight: 900;
      }
      #paperTabs {
        color: rgb(255, 255, 255);
        font-size: 11pt;
        font-weight: 300;
        font-style: italic;
        background-color: rgb(105, 186, 105);
      }
      #paperTabs paper-tab.core-selected {
        font-style: normal;
        font-size: 14pt;
        color: rgb(255, 255, 134);
      }
      #paperTabs paper-tab core-icon {
        width: 16px;
        height: 16px;
      }
      #paperTabs paper-tab.core-selected core-icon {
        width: 24px;
        height: 24px;
      }
      paper-icon-button.bigIcon::shadow core-icon {
        width: 40px;
        height: 40px;
      }
      paper-icon-button.closeIcon {
        padding: 0px;
        color: rgb(150,150,150);
      }
      paper-icon-button.closeIcon:hover {
        color: rgb(0,0,0);
      }
      .card {
        margin: 20px;
        padding: 10px;
        background-color: #FFFFFF;
        max-width: 100%;
        word-wrap: break-word;
        word-break: break-word;
        height: 100%;
      }
      .fadeIn {
        -webkit-animation: cardFadeIn 1.5s;
        -moz-animation: cardFadeIn 1.5s;
        animation: cardFadeIn 1.5s;
        -webkit-animation-fill-mode:forwards;
        -moz-animation-fill-mode:forwards;
        animation-fill-mode:forwards;
      }
      @-webkit-keyframes cardFadeIn {
        from {opacity: 0;}
        to {opacity: 1.0;}
      }
      @-moz-keyframes cardFadeIn {
        from {opacity: 0;}
        to {opacity: 1.0;}
      }
      @keyframes cardFadeIn {
        from {opacity: 0;}
        to {opacity: 1.0;}
      }
      core-icon.online, core-icon.offline {
        height: 32px;
        width: 32px;
        margin: 0px 5px;
      }
      core-icon.online {
        fill: rgb(0,180,0);        
      }      
      core-icon.offline {
        fill: rgb(150,150,150);
      }
      core-icon.time {
        margin: 0px 5px;
      }
      .link a:link{
        padding: 0px;
        color: rgb(48,153,48);
        text-decoration: none;
      }
      .link a:visited {
        color: rgb(150,150,150);
      }
      .link a:hover {
        color: rgb(105,186,105);
      }
      .link a:active {
        color: rgb(255, 255, 134);
      }      
      .link img {
        max-width: 100%;
        min-height: 100%; /* IE11 fix for flexbox image vertical stretching bug */
        margin: 0px 0px 10px 0px;
      }
      .link {
        max-width: 250px;
        width: 100%;
      }
      .link a{
        width: 100%;
      }
      h1 {
        font-size: 20px;
      }
      paper-ripple {
        color: rgb(105,186,105);
      }
      core-toolbar {
        height: 100px;
      }
      .joined {
        color: rgb(0,180,0);
      }
      .quit, .parted, .killed, .kicked {
        color: rgb(180,0,0);
      }
      .nick {
        color: rgb(0,0,180);
      }
      .joinedbg {
        background-color: rgb(235,255,235);
      }
      .quitbg, .partedbg, .killedbg, .kickedbg {
        background-color: rgb(255,235,235);
      }
      .nickbg {
        background-color: rgb(235,235,255);
      }
      .hMargins {
        margin: 0px 5px;
      }
      .description {
        padding: 10px;
        background-color: rgb(245,245,245);
        width: 90%;
      }
      .title {
        text-align: center;
        margin-top: 0px;
      }
      #userName, #password {
        border: 0px solid;
        border-bottom: 1px solid rgb(105,186,105);
        outline: none;
        margin: 15px;
      }
      #userName:focus, #password:focus {
        border: 0px solid;
        border-bottom: 2px solid rgb(48,153,48);
        outline: none;
        margin: 15px;
      }
      .toggle {
        margin: 10px;
      }
      paper-toggle-button.toggleBtn::shadow #toggleBar[checked] {
        background-color: rgb(48,153,48);
      }
      paper-toggle-button.toggleBtn::shadow paper-radio-button::shadow #onRadio {
        background-color: rgb(255,255,134);
      }
      .label {
        padding: 0px 5px 0px 5px;
      }
    </style>
    <core-ajax id="ajaxUsers" url="{{JSONURI}}users/{{data.usersTail}}/0" handleas="json" auto on-core-response="{{handleAjaxUsers}}" method="GET" hidden></core-ajax>
    <core-ajax id="ajaxLinks" url="{{JSONURI}}links/" handleas="json" auto on-core-response="{{handleAjaxLinks}}" method="GET" hidden></core-ajax>
    <core-ajax id="ajaxActivity" url="{{JSONURI}}activity/" handleas="json" auto on-core-response="{{handleAjaxActivity}}" method="GET" hidden></core-ajax>
    <core-ajax id="ajaxTubes" url="{{JSONURI}}tubes/" handleas="json" auto on-core-response="{{handleAjaxTubes}}" method="GET" hidden></core-ajax>
    <core-ajax id="ajaxAuth" url="{{JSONURI}}auth/" handleas="json" contentType="application/json" on-core-response="{{handleAjaxAuth}}" method="POST" hidden></core-ajax>
    <core-ajax id="ajaxRem" url="" handleas="json" contentType="application/json" on-core-response="{{handleAjaxRem}}" method="DELETE" hidden></core-ajax>
    <core-overlay id="loginDialog" backdrop>
      <paper-shadow class="card" z="2">
        <template if="{{token == ''}}">
          <h1 class="title">Login</h1>
          <input is="core-input" id="userName" placeholder="user name" maxlength="30" autofocus value="{{auth.user}}"><br>
          <input is="core-input" id="password" type="password" placeholder="password" maxlength="30" value="{{auth.pass}}"><br>
          <div id="loginError" hidden>Invalid user name or password.</div>
          <div layout horizontal center-justified>
            <paper-button core-overlay-toggle>Cancel</paper-button>
            <div flex></div>
            <paper-button on-tap="{{loginAuth}}">Submit</paper-button>
          </div>
        </template>
        <template if="{{token != '' }}">
          <h1 class="title">Log Out</h1>
          <div layout horizontal center-justified>
            <paper-button core-overlay-toggle>Cancel</paper-button>
            <div flex></div>
            <paper-button on-tap="{{loginDeAuth}}">Log Out</paper-button>
          </div>
        </template>
      </paper-shadow>
    </core-overlay>
    <div layout vertical fit>
      <core-toolbar justify="center" class="medium-tall">
        <span id="title" flex>IRC Stats: {{IRCchannel}}</span>
        <paper-icon-button icon="refresh" class="bigIcon" on-tap="{{updateData}}"></paper-icon-button>
        <paper-icon-button icon="account-box" class="bigIcon" on-tap="{{toggleLoginDialog}}"></paper-icon-button>
        <div class="bottom fit">
          <paper-shadow>
            <paper-tabs id="paperTabs" selected="{{currTab}}">
              <paper-tab active><core-icon icon="account-circle"></core-icon>&nbspUsers&nbsp</paper-tab>
              <paper-tab><core-icon icon="bookmark-outline"></core-icon>&nbspLinks&nbsp</paper-tab>
              <paper-tab><core-icon icon="swap-horiz"></core-icon>&nbspActivity&nbsp</paper-tab>
              <paper-tab><core-icon icon="theaters"></core-icon>&nbspTubes&nbsp</paper-tab>
            </paper-tabs>
          </paper-shadow>
        </div>
      </core-toolbar>
      <div class="toggle" layout horizontal center-justified>
        <div class="label">Auto-update (60s)</div>
        <paper-toggle-button class="toggleBtn" checked="{{autoUpdate}}" on-core-change="{{toggleAutoUpdate}}"></paper-toggle-button>
        <div class="label">Auto-load on scroll</div>
        <paper-toggle-button class="toggleBtn" checked="{{autoLoad}}" on-core-change="{{toggleAutoLoad}}"></paper-toggle-button>
      </div>
      <div flex layout vertical>
        <core-animated-pages flex selected="{{$.paperTabs.selected}}" transitions="cross-fade">
          <section flex layout vertical>
            <core-header-panel mode="seamed" cross-fade flex id="usersPanel" on-scroll="{{ scrollHandler }}">
              <div flex layout horizontal wrap center-justified>
                <template repeat="{{user in data.users  | isOnline('online') | limitTo(data.usersLoaded)}}">
                  <paper-shadow class="card fadeIn">
                    <template if="{{token != ''}}">
                      <div relative flex layout horizontal center end-justified>
                        <paper-icon-button data-id="{{user._id}}" data-parentpanel="usersPanel" class="closeIcon" icon="close" role="button" tabindex="0" on-tap="{{removeItem}}"></paper-icon-button>
                      </div>
                    </template>
                    <div flex layout horizontal center center-justified>
                      <core-tooltip position="top" label="{{user.online ? 'online' : 'offline'}}">
                        <core-icon icon="account-circle" class="{{user.online ? 'online' : 'offline'}}"></core-icon>
                      </core-tooltip>
                    	<h1>{{user.user}}</h1>
                    </div>
                    <div flex layout horizontal justified>
                      <div class="hMargins"><b>Posts:</b> {{user.posts}}</div>
                      <div class="hMargins"><b>Links:</b> {{user.links}}</div>
                    </div><br>
                    <div flex layout horizontal center-justified><b> Last Login:</b><em> {{user.lastLogin | momentTZ}}</em></div>
                  </paper-shadow>
                </template>
              </div> 
              <div layout vertical center>
                <paper-button on-tap="{{ loadMore }}">Load More</paper-button>
              </div>              
            </core-header-panel>
          </section>
          <section flex layout vertical>
            <core-header-panel mode="seamed" cross-fade flex id="linksPanel" on-scroll="{{ scrollHandler }}">
              <div flex layout horizontal wrap center-justified>
                <template repeat="{{link in data.links | limitTo(data.linksLoaded)}}">
                  <paper-shadow class="card fadeIn">
                    <template if="{{token != ''}}">
                      <div relative flex layout horizontal center end-justified>
                        <paper-icon-button data-id="{{link._id}}" data-parentpanel="linksPanel" class="closeIcon" icon="close" role="button" tabindex="0" on-tap="{{removeItem}}"></paper-icon-button>
                      </div>
                    </template>
                    <template if="{{!isImage(link.url)}}">
                      <div relative flex layout vertical center center-justified class="link">
                        <a relative href="{{link.url}}" target="_blank">
                          <template if="{{link.og.title}}">
                            <h1 class="title">{{link.og.title}}</h1>
                          </template>
                          <template if="{{!link.og.title}}">
                            <h1 class="title">{{link.url}}</h1>
                          </template>
                          <paper-ripple fit></paper-ripple>  
                        </a>                          
                        <template if="{{link.og.image}}">
                          <img src="{{link.og.image}}" onError="this.onerror=null;this.src='//placehold.it/200/69ba69/69ff69/&text=Oops!%20:(';">
                        </template>
                        <template if="{{link.og.description}}">
                          <div class="description">{{link.og.description}}</div>
                        </template>
                      </div>
                    </template>
                    <template if="{{isImage(link.url)}}">
                      <div relative flex layout vertical center center-justified class="link">
                        <a relative href="{{link.url}}" target="_blank">
                         <h1 class="title">{{link.url}}</h1>
                         <paper-ripple fit></paper-ripple>
                        </a>
                        <img src="{{link.url}}" onError="this.onerror=null;this.src='//placehold.it/200/69ba69/69ff69/&text=Oops!%20:(';">
                      </div>
                    </template>
                    <div flex layout horizontal center-justified center>
                      <div><b>Linked by:</b> {{link.user}} </div>
                      <core-tooltip position="left" label="{{link.time | momentTZ}}">
                        <core-icon icon="schedule" class="time"></core-icon>
                      </core-tooltip>
                    </div>
                  </paper-shadow>
                </template>
              </div>   
              <div layout vertical center>
                <paper-button on-tap="{{ loadMore }}">Load More</paper-button>
              </div>
            </core-header-panel>
          </section>
          <section flex layout vertical>
            <core-header-panel mode="seamed" cross-fade flex id="activityPanel" on-scroll="{{ scrollHandler }}">
              <div flex>
                <template repeat="{{act in data.activity | limitTo(data.activityLoaded)}}">
                  <paper-shadow class="card fadeIn {{act.event}}bg">
                    <div flex layout horizontal center>
                      <template if="{{((act.event == 'nick') || (act.event == 'quit') || (act.event == 'kicked') || (act.event == 'killed') || (act.event == 'parted'))}}">
                        <core-icon class="{{act.event}}" icon="arrow-back"></core-icon>
                      </template>
                      <div flex></div>
                      <template if="{{act.event == 'nick'}}">
                        <div><b>{{act.oldnick}}</b> <b class="{{act.event}}">changed nick</b> to <b>{{act.newnick}}</b> <em>({{act.time | momentTZ}})</em></div>
                      </template>
                      <template if="{{act.event == 'joined'}}">
                        <div><b>{{act.user}}</b> <b class="{{act.event}}">{{act.event}}</b> <em>({{act.time | momentTZ}})</em>.</div>
                      </template>
                      <template if="{{((act.event == 'quit') || (act.event == 'parted'))}}">
                        <div><b>{{act.user}}</b> <b class="{{act.event}}">{{act.event}}</b> ({{act.reason == null ? 'no reason' : act.reason}}) <em>({{act.time | momentTZ}})</em></div>
                      </template>
                      <template if="{{((act.event == 'kicked') || (act.event == 'killed'))}}">
                        <div><b>{{act.user}}</b> was <b class="{{act.event}}">{{act.event}}</b> ({{act.reason == null ? 'no reason' : act.reason}}) by <b>{{act.event == 'kicked' ? act.by : 'server'}}</b> <em>({{act.time | momentTZ}})</em></div>
                      </template>
                      <div flex></div>
                      <template if="{{((act.event == 'nick') || (act.event == 'joined'))}}">
                        <core-icon class="{{act.event}}" icon="arrow-forward"></core-icon>
                      </template>
                      <template if="{{token != ''}}">
                        <paper-icon-button data-id="{{act._id}}" data-parentpanel="activityPanel" class="closeIcon" icon="close" role="button" tabindex="0" on-tap="{{removeItem}}"></paper-icon-button>
                      </template>
                    </div>
                  </paper-shadow>
                </template>
              </div>
              <div layout vertical center>
                <paper-button on-tap="{{ loadMore }}">Load More</paper-button>
              </div>              
            </core-header-panel>
          </section>
          </section>
          <section flex layout vertical>
            <core-header-panel mode="seamed" cross-fade flex id="tubesPanel" on-scroll="{{ scrollHandler }}">
              <div flex layout horizontal wrap center-justified>
                <template repeat="{{link in data.tubes | limitTo(data.tubesLoaded)}}">
                  <paper-shadow class="card fadeIn">
                    <template if="{{token != ''}}">
                      <div relative flex layout horizontal center end-justified>
                        <paper-icon-button data-id="{{link._id}}" data-parentpanel="tubesPanel" class="closeIcon" icon="close" role="button" tabindex="0" on-tap="{{removeItem}}"></paper-icon-button>
                      </div>
                    </template>
                    <div flex layout horizontal center-justified>
                      <iframe width="420" height="315" src="//www.youtube.com/embed/{{link.id}}" frameborder="0" allowfullscreen></iframe>
                    </div>
                    <div flex layout horizontal center-justified>
                      <div><b>Linked by:</b> {{link.user}}</div>
                    </div><br>
                    <div flex layout horizontal center-justified><em>{{link.time | momentTZ}}</em></div>
                  </paper-shadow>
                </template>
              </div>
              <div layout vertical center>
                <paper-button on-tap="{{ loadMore }}">Load More</paper-button>
              </div>
            </core-header-panel>
          </section>
        </core-animated-pages>
      </div>
    </div>
  </template>

  <script>

    Polymer('irc-stats', {
      created: function() {
        //data that's been validated, bound to element
        this.data = { users : [], links : [], activity : [], tubes : [], 
                            usersHead : "none", usersTail : "none", linksHead : "none", linksTail : "none",
                            activityHead : "none", activityTail : "none", tubesHead : "none", tubesTail : "none",
                            usersLoaded : 0, linksLoaded : 0, activityLoaded : 0, tubesLoaded : 0};

        //data received, pre-validation
        this.dataPre = { users : [], links : [], activity : [], tubes : [] };
        
        //session token
        this.token = "";
        
        //current tab
        this.currTab = "";
        this.currTabName = "";

        //user authentication data (pass is cleared after submission so it's not persistent in browser-side JS)
        this.auth = {user: '', pass: ''};

        //toggle value for auto-loading of more content while scrolling, and auto-updating of new content
        this.autoLoad = false;
        this.autoUpdate = false;

        //load moment timezone data
        moment.tz.add('America/Chicago|CST CDT EST CWT CPT|60 50 50 50 50|01010101010101010101010101010101010102010101010103401010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010|-261s0 1nX0 11B0 1nX0 1wp0 TX0 WN0 1qL0 1cN0 WL0 1qN0 11z0 1o10 11z0 1o10 11z0 1o10 11z0 1o10 11z0 1qN0 11z0 1o10 11z0 1o10 11z0 1o10 11z0 1o10 11z0 1qN0 WL0 1qN0 11z0 1o10 11z0 11B0 1Hz0 14p0 11z0 1o10 11z0 1qN0 WL0 1qN0 11z0 1o10 11z0 RB0 8x30 iw0 1o10 11z0 1o10 11z0 1o10 11z0 1o10 11z0 1qN0 WL0 1qN0 11z0 1o10 11z0 1o10 11z0 1o10 11z0 1o10 1fz0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1fz0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1fz0 1a10 1fz0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1fz0 1cN0 1cL0 1cN0 1cL0 s10 1Vz0 LB0 1BX0 1cN0 1fz0 1a10 1fz0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1fz0 1a10 1fz0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 14p0 1lb0 14p0 1nX0 11B0 1nX0 11B0 1nX0 14p0 1lb0 14p0 1lb0 14p0 1nX0 11B0 1nX0 11B0 1nX0 14p0 1lb0 14p0 1lb0 14p0 1lb0 14p0 1nX0 11B0 1nX0 11B0 1nX0 14p0 1lb0 14p0 1lb0 14p0 1nX0 11B0 1nX0 11B0 1nX0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0');
      },
      
      ready: function() {
        //change tab to force observe on currTab to fire on initial load
        this.currTab = 0;
      },
      
      observe: {
        'dataPre.users': 'validateUsers',
        'dataPre.links': 'validateLinks',
        'dataPre.activity': 'validateActivity',
        'dataPre.tubes': 'validateTubes',
        'currTab': 'initCards',
      },

      JSONURI: 'missingURI',

      IRCchannel: '#ircchannel',

      //validate new data, and update bound data if changed
      validate: function(oldData, newData, arrayName) {
        if(newData !== null) {
          if(JSON.stringify(newData) !== JSON.stringify(oldData)) {
            this.data[arrayName] = this.dataPre[arrayName].slice(0);
            if(this.data[arrayName + "Head"] == "none") {
              this.data[arrayName + "Head"] = this.dataPre[arrayName][0]._id;
            }            
            this.data[arrayName + "Tail"] = this.dataPre[arrayName][this.dataPre[arrayName].length -1]._id;
          }
          console.log(this.data[arrayName + "Head"] + " to " + this.data[arrayName + "Tail"] );
        }
        else {console.log("data was null");}
      },
      
      validateUsers: function(oldData, newData) {
        this.validate(oldData, newData, 'users');
      },

      validateLinks: function(oldData, newData) {
        this.validate(oldData, newData, 'links');
      },

      validateActivity: function(oldData, newData) {
        this.validate(oldData, newData, 'activity');
      },

      validateTubes: function(oldData, newData) {
        this.validate(oldData, newData, 'tubes');
      },
      
      handleAjaxUsers: function(response) {
        this.dataPre.users = response.detail.response;
      },

      handleAjaxLinks: function(response) {
        this.dataPre.links = response.detail.response;
      },
      
      handleAjaxActivity: function(response) {
        this.dataPre.activity = response.detail.response;
      },

      handleAjaxTubes: function(response) {
        this.dataPre.tubes = response.detail.response;
      },
      
      handleAjaxAuth: function(response) {
        this.token = response.detail.response.token;
      },
      
      handleAjaxRem: function(response) {
        var res = response.detail.response;
        
        if(res.deleted) {
          var findId = function(array, id) {
            for(var i = 0; i < array.length; i++) {
              if(array[i]._id == id)
                return i;
            }
            return(false);
          }
          
          var found = findId(this.dataPre[res.collection], res.id);
          
          if(found) {         
            this.dataPre[res.collection].splice(found, 1);
          }
        }
      },

      updateData: function() {
        this.$.ajaxUsers.go();
        this.$.ajaxLinks.go();
        this.$.ajaxActivity.go();
        this.$.ajaxTubes.go();
      },

      toggleAutoUpdate: function() {
        if(this.autoUpdate) {
          this.enableAutoUpdate();
        }
        else {
          this.disableAutoUpdate();
        }
      },
      
      enableAutoUpdate: function() {
        this.job('autoUpdate', function() {
          this.updateData();
          this.enableAutoUpdate();
        }, 60000);
      },
      
      disableAutoUpdate: function() {
        this.job('autoUpdate', function() {
        }, 0);
      },
      
      toggleAutoLoad: function() {
        if(this.autoLoad) {
          this.loadMore();
        }
      },

      toggleLoginDialog: function() {
        this.$.loginDialog.toggle();
      },

      loginAuth: function() {
        console.log(this.auth.user);
        console.log(this.auth.pass);
        if(this.auth.user && this.auth.pass) {
          var params = JSON.stringify({"user" : this.auth.user, "pass" : this.auth.pass});
          this.$.ajaxAuth.body = params;
          this.$.ajaxAuth.go();
          this.toggleLoginDialog();
          this.auth.pass = "";
          this.$.loginError.hidden = true;
        }
        else {
          this.$.loginError.hidden = false;
        }
      },

      loginDeAuth: function() {
        this.toggleLoginDialog();
        this.token = "";
      },
      
      removeItem: function(e) {
        var id = e.path[0].dataset.id;
        var parentpanel = e.path[0].dataset.parentpanel;
        this.$.ajaxRem.url = this.JSONURI + "rem/" + parentpanel.split("Panel")[0] + "/" + id + "/" + this.token + "/";
        this.$.ajaxRem.go();
      },
      
      initCards: function() {
        var count = 0;
        switch (this.currTab) {
          case 0:
            this.currTabName = "users";
            count = 10;
            break;
          case 1:
            this.currTabName = "links";
            count = 6;
            break;
          case 2:
            this.currTabName = "activity";
            count = 15;
            break;
          case 3:
            this.currTabName = "tubes";
            count = 4;
            break;
          default:
            break;
        };
        if(this.data[this.currTabName + "Loaded"] === 0) {
          this.data[this.currTabName + "Loaded"] += count;
        }
      },
      
      loadMore: function() {
        this.scrollUpdate(this.currTabName);
      },
      
      scrollUpdate: function(target) {
        this.data[target + "Loaded"] += 5;
        if(this.data[target + "Loaded"] > this.data[target].length) {
          this.data[target + "Loaded"] = this.data[target].length;
        }
      },
      
      scrollHandler: function(e) {
        if(this.autoLoad) {
          var scroller = e.detail.target;
          if(scroller.scrollTop > 0) {
            if(scroller.scrollHeight - scroller.scrollTop <= scroller.clientHeight) {
              this.scrollUpdate(e.target.id.split("Panel")[0]);
            }
          }
        }
      }
    });

    PolymerExpressions.prototype.momentTZ = function (ISODateStr) {
      try {
        var isoValid = new Date(ISODateStr).toISOString();
        return moment(isoValid).tz("America/Chicago").format("ddd, M/D/YY, h:mm:ssa z");
      } catch (e) {
        return "unknown";
      }
    };
    
    PolymerExpressions.prototype.isImage = function (url) {
      try {
        if(url.match(/^.*\.(jpg|jpeg|png|gif|bmp|tiff|webp|svg).*$/)) { return true; }
        else {return false;}
      } catch(e) {
        return false;
      }
    };
    
    PolymerExpressions.prototype.isOnline = function (array, onlineProperty) {
      if (!Array.isArray(array)) {
        return array;
      }
      if(typeof onlineProperty !== 'string') {
        return array;
      }      
       
      var ind = 0;
      var iter = 0;
            
      while(iter < array.length) {
        if(typeof array[ind][onlineProperty] === 'boolean') {
          if(!array[ind][onlineProperty]) {
            var temp = array[ind];
            array.splice(ind, 1);
            array.push(temp);
          }
          else {
            ind++;
          }          
          iter++;
        }
        else {
          iter++;
        }        
      }
      return array;
    };
    
    PolymerExpressions.prototype.limitTo = function (input, limit) {
      if (!Array.isArray(input) && typeof input !== 'string') return input;

      limit = parseInt(limit, 10);

      if (typeof input === 'string') {
        //NaN check on limit
        if (limit) {
          return limit >= 0 ? input.slice(0, limit) : input.slice(limit, input.length);
        } else {
          return "";
        }
      }

      var out = [],
          i, n;

      // if abs(limit) exceeds maximum length, trim it
      if (limit > input.length)
        limit = input.length;
      else if (limit < -input.length)
        limit = -input.length;

      if (limit > 0) {
        i = 0;
        n = limit;
      } else {
        i = input.length + limit;
        n = input.length;
      }

      for (; i<n; i++) {
        out.push(input[i]);
      }

      return out;
    };

  </script>

</polymer-element>