var TSPages = {
  init: function() {
    var element = this.findTag(document, 'div', 'viewer');
    var gridDisplayLink = this.findTag(element, 'a', 'grid-display');
    var listDisplayLink = this.findTag(element, 'a', 'list-display');
    if (gridDisplayLink) {
      gridDisplayLink.onclick = function(ev) {
        TSPages.removeClass(element, 'list');
        TSPages.addClass(element, 'grid');
        return false; // equivalent to ev.stop();
      };
    }
    if (listDisplayLink) {
      listDisplayLink.onclick = function(ev) {
        TSPages.removeClass(element, 'grid');
        TSPages.addClass(element, 'list');
        return false; // equivalent to ev.stop();
      };
    }
    
    // if there are checkboxes, we have to handle the checked class changes, and re-map the clicking 
    var checkboxes = TSPages.findTags(element, 'input', 'checkbox');
    for (var i = 0; i < checkboxes.length; ++i) {
      var previewDiv = TSPages.findParent(checkboxes[i], 'viewer-preview');
      
      checkboxes[i].onchange = function() { TSPages.checkboxChanged(this, TSPages.findParent(this, 'viewer-preview')); };
      TSPages.findTag(previewDiv, 'span', 'image-compliment').onclick = function(e) { e.preventDefault(); TSPages.toggleCheckbox(TSPages.findParent(this, 'viewer-preview')); };
      TSPages.findTag(previewDiv, 'img', 'img').onclick = function(e) { e.preventDefault(); TSPages.toggleCheckbox(TSPages.findParent(this, 'viewer-preview')); };
    }
  },
  toggleCheckbox: function(previewDiv) {
    var checkbox = TSPages.findTag(previewDiv, 'input', 'checkbox');
    checkbox.checked = !checkbox.checked; 
    TSPages.checkboxChanged(checkbox, previewDiv);
  },
  checkboxChanged: function(checkbox, previewDiv) {
    if (checkbox.checked) { TSPages.addClass(previewDiv, 'checked'); }
    else { TSPages.removeClass(previewDiv, 'checked');}
  },
  findParent: function(element, className) {
    if (element.parentNode == null) return null;
    if (TSPages.hasClass(element.parentNode, className)) return element.parentNode;
    else return TSPages.findParent(element.parentNode, className);
  },
  findTags: function(base, tagName, className) {
    var tags = base.getElementsByTagName(tagName);
    var results = [];
    for (var i = 0; i < tags.length; ++i) {
      var el = tags[i];
      if (this.hasClass(el, className)) { results.push(el); }
    }
    return results;
  },
  findTag: function(base, tagName, className) {
    var tags = base.getElementsByTagName(tagName);
    for (var i = 0; i < tags.length; ++i) {
      var el = tags[i];
      if (this.hasClass(el, className)) { return el; }
    }
  },
  hasClass: function(ele,cls) {
  	return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
  },

  addClass: function(ele,cls) {
  	if (!this.hasClass(ele,cls)) ele.className += " "+cls;
  },

  removeClass: function(ele,cls) {
  	if (this.hasClass(ele,cls)) {
      	var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
  		ele.className=ele.className.replace(reg,' ');
  	}
  }
  
}
TSPages.init();