cdemos = {};

cdemos.CONSTANTS = {};
cdemos.CONSTANTS.SPREADSHEET_KEY = 'rWAH4FqMmsUxJ-_Ux650Dsg';
cdemos.CONSTANTS.C_MAPS = 'od4';
cdemos.CONSTANTS.C_EARTH = 'od6';
cdemos.CONSTANTS.C_YTAPI = 'od7';
cdemos.CONSTANTS.C_YT = 'od5';
cdemos.CONSTANTS.C_GADS = 'oda';
cdemos.CONSTANTS.C_IGOOG = 'odb';
cdemos.CONSTANTS.C_OS = 'od8';
cdemos.CONSTANTS.C_WINNERS = 'ocz';

cdemos.PARAMS = {};
cdemos.PARAMS.CATEGORIES = {};
cdemos.PARAMS.CATEGORIES[cdemos.CONSTANTS.C_MAPS] = {title: 'Google Maps', verticals:[], domFilterList:null, shortname:'maps'};
cdemos.PARAMS.CATEGORIES[cdemos.CONSTANTS.C_EARTH] = {title: 'Google Earth', verticals:[], domFilterList:null, shortname:'earth'};
cdemos.PARAMS.CATEGORIES[cdemos.CONSTANTS.C_YTAPI] = {title: 'YouTube API', verticals:[], domFilterList:null, shortname:'ytapi'};
cdemos.PARAMS.CATEGORIES[cdemos.CONSTANTS.C_YT] = {title: 'YouTube', verticals:[], domFilterList:null, shortname:'youtube'};
cdemos.PARAMS.CATEGORIES[cdemos.CONSTANTS.C_GADS] = {title: 'Gadget Ads', verticals:[], domFilterList:null, shortname:'gadgetads'};
cdemos.PARAMS.CATEGORIES[cdemos.CONSTANTS.C_IGOOG] = {title: 'iGoogle', verticals:[], domFilterList:null, shortname:'igoogle'};
cdemos.PARAMS.CATEGORIES[cdemos.CONSTANTS.C_OS] = {title: 'OpenSocial', verticals:[], domFilterList:null, shortname:'opensocial'};
cdemos.PARAMS.CATEGORIES[cdemos.CONSTANTS.C_WINNERS] = {title: 'Award Winners', verticals:[], domFilterList:null, shortname:'winners'};
cdemos.PARAMS.DEFAULT_CATEGORY = cdemos.CONSTANTS.C_MAPS;
cdemos.PARAMS.CATEGORIES_DISPLAY_ORDER = [cdemos.CONSTANTS.C_MAPS, 
  cdemos.CONSTANTS.C_EARTH, cdemos.CONSTANTS.C_YT, cdemos.CONSTANTS.C_YTAPI, 
  cdemos.CONSTANTS.C_GADS, cdemos.CONSTANTS.C_IGOOG, cdemos.CONSTANTS.C_OS,
  cdemos.CONSTANTS.C_WINNERS];
cdemos.PARAMS.SHORT_NAMES_TO_CATEGORIES = {
	'maps'      : cdemos.CONSTANTS.C_MAPS,
	'earth'     : cdemos.CONSTANTS.C_EARTH,
	'ytapi'     : cdemos.CONSTANTS.C_YTAPI,
	'youtube'   : cdemos.CONSTANTS.C_YT,
	'yt'        : cdemos.CONSTANTS.C_YT,
	'gadgetads' : cdemos.CONSTANTS.C_GADS,
	'igoogle'   : cdemos.CONSTANTS.C_IGOOG,
	'opensocial': cdemos.CONSTANTS.C_OS,
	'winners'   : cdemos.CONSTANTS.C_WINNERS
};

cdemos.creativeEntries = {};

//Object to handle Google Analytics event tracking
cdemos.eventTracker = {};
cdemos.eventTracker.CATEGORY_CAT_LABEL = 'Category';
cdemos.eventTracker.CATEGORY_VIEW_LABEL = 'Link';

//GA event tracking - Track category (eg maps, earth, youtube) click
cdemos.eventTracker.trackCategory = function (catId) {
  var catTitle = cdemos.PARAMS.CATEGORIES[catId].title;
  try {
    pageTracker._trackEvent(cdemos.eventTracker.CATEGORY_CAT_LABEL, 'Select', catTitle);
  } catch(err) {}
};

//GA event tracking - Track demo click
cdemos.eventTracker.trackDemo = function (title) {
  try {
    pageTracker._trackEvent(cdemos.eventTracker.CATEGORY_VIEW_LABEL, 'Click', title);
  } catch(err) {}
  return true;
};

//GA event tracking - Track filter selection
cdemos.eventTracker.trackFilter = function(filter) {
  try {
    pageTracker._trackEvent('Filters', 'Filter', filter);
  } catch(err) {}
  return true;
};

cdemos.init = function () {
  cdemos.drawMenu();
  $('.menuClick').click(handleMenuClick);
  cdemos.showCategory(cdemos.PARAMS.DEFAULT_CATEGORY);
}

//Draw category (eg maps, youtube) links
cdemos.drawMenu = function() {
  $('#menu').append('<ul>');
  
  var n_items = cdemos.PARAMS.CATEGORIES_DISPLAY_ORDER.length;
  for (var i = 0; i < n_items; i++) {
    var catId = cdemos.PARAMS.CATEGORIES_DISPLAY_ORDER[i];
    var title = cdemos.PARAMS.CATEGORIES[catId].title;
    
    var menuItem = ['<li><a href="#" class="menuClick" id="', catId, 
      '">', title, '</a></li>'].join('');
    var container = ['<div id="container-', catId, 
      '" style="display:none" class="categoryContainer">',
      '</div>'].join('');
    
    $('#menu').append(menuItem);
    $('#containers').append(container);
  }
  
  $('#menu').append('</ul>');
};

cdemos.drawFilterList = function (catId) {
  var filterList = cdemos.getFilterList(catId);
  
  $('#filters').empty();
  $('#filters').append(filterList);
};

cdemos.getFilterList = function (catId) {
  if (cdemos.PARAMS.CATEGORIES[catId].domFilterList != null) {
    return cdemos.PARAMS.CATEGORIES[catId].domFilterList;
  }
  
  var catVerticals = cdemos.PARAMS.CATEGORIES[catId].verticals;
  
  var selectNode = document.createElement('select');
  selectNode.setAttribute('id', 'selectFilterList');
  selectNode.onchange = function () {
    cdemos.filterEntries(this.value);
    cdemos.eventTracker.trackFilter(this.value);
  };
  
  var allNode = document.createElement('option');
  allNode.value = 'all';
  allNode.appendChild(document.createTextNode('All'));
  selectNode.appendChild(allNode);
  
  var n_verticals = catVerticals.length;
  for (var i = 0; i < n_verticals; i++) {
    var vertical = catVerticals[i];
    var optionNode = document.createElement('option');
    optionNode.value = vertical;
    optionNode.appendChild(document.createTextNode(vertical));
    selectNode.appendChild(optionNode);
  }
  
  cdemos.PARAMS.CATEGORIES[catId].domFilterList = selectNode;
  return selectNode;
}

cdemos.filterEntries = function (vertical) {
  if (vertical == 'all') {
    $('.entry').show();
  } else {
    $('.entry').hide();
    $('.' + vertical).show();
  }
};

cdemos.hideContainers = function () {
  $('.categoryContainer').hide();
};

cdemos.showCategory = function (worksheetId) {
  var containerId = 'container-' + worksheetId;
  cdemos.hideContainers();
  $('#' + containerId).show();
  if (cdemos.creativeEntries[worksheetId]) {
    cdemos.drawFilterList(worksheetId);
  } else {
    $('#' + containerId).html('<img src="http://vinnysapidemos.googlecode.com' +
      '/svn/trunk/images/loading-bigroller-blue.gif" alt="Loading..." />');
    spreadsheet.loadWorksheet(cdemos.CONSTANTS.SPREADSHEET_KEY, worksheetId);
  }  
};


/**
 * Class to represent creative entries (ie demos)
 */ 
function CreativeEntry(id) {
  this.id = id;
  this.displayOrder = 0;
  this.title = '';
  this.desc = '';
  this.url = '';
  this.tn = '';
  this.countries = [];
  this.verticals = [];
  this.product_features = [];
  this.domNode = null;
}

/*
//Debugging
CreativeEntry.prototype.diagPrint = function() {
  var str = [this.id, this.title, this.desc, this.url, this.tn,
             this.countries, this.verticals, 
             this.product_features].join(',');
             
  return str;
};
*/

//Generate the DOM object for a creative entry (demo)
CreativeEntry.prototype.getDOM = function() {
  if (this.domNode != null) {
    return this.domNode;
  }

  var title = this.title;
  
  //Container for the entry
  var containerNode = document.createElement('div');
  containerNode.setAttribute('id', 'entry-' + this.id);
  containerNode.setAttribute('class', 'entry ' + this.verticals.join(' '));
  
  //Left panel - primarily for thumbnail and link
  var leftNode = document.createElement('div');
  leftNode.setAttribute('class', 'entryLeft');
  
  //Right panel - descriptive elements
  var rightNode = document.createElement('div');
  rightNode.setAttribute('class', 'entryRight');
  
  //Create image node
  var imgNode = document.createElement('img');
  imgNode.setAttribute('src', this.tn);
  imgNode.setAttribute('alt', this.title);
  imgNode.setAttribute('class', 'entryTn');
  
  //Create link node - will be reused in multiple areas
  var linkNode = document.createElement('a');
  linkNode.setAttribute('href', this.url);
  linkNode.setAttribute('target', '_blank');
  
  //Create link nodes
  var textLinkNode = linkNode.cloneNode(true);
  textLinkNode.appendChild(document.createTextNode('[Link]'));

  var titleLinkNode = linkNode.cloneNode(true);
  titleLinkNode.appendChild(document.createTextNode(this.title));
  titleLinkNode.onclick = function () { 
    return cdemos.eventTracker.trackDemo(title); 
  };
  
  var imgLinkNode = linkNode.cloneNode(true);
  imgLinkNode.appendChild(imgNode);
  imgLinkNode.onclick = function () { 
    return cdemos.eventTracker.trackDemo(title); 
  };
  
  //Create text nodes
  var descText = document.createTextNode(this.desc);
  
  var titleNode = document.createElement('h3');
  titleNode.appendChild(titleLinkNode);
  
  var countriesNode = document.createTextNode('Reach: ' + this.countries.join(', '));
  var verticalsNode = document.createTextNode('Verticals: ' + this.verticals.join(', '));
  
  //Start building out nodes
  leftNode.appendChild(imgLinkNode);
  
  rightNode.appendChild(titleNode);
  rightNode.appendChild(descText);
  rightNode.appendChild(document.createElement('br'));
  rightNode.appendChild(document.createElement('br'));
  rightNode.appendChild(countriesNode);
  rightNode.appendChild(document.createElement('br'));
  rightNode.appendChild(verticalsNode);
  rightNode.appendChild(document.createElement('br'));
  
  containerNode.appendChild(leftNode);
  containerNode.appendChild(rightNode);
  
  this.domNode = containerNode;
  return this.domNode;
};


//Object to hold utility functions
util = {};

//Remove duplicates from an array and return a sorted array
util.arrayUnique = function (a) {
  var len = a.length;
  var new_a = [];
  var processed = {};
  for (var i = 0; i < len; i++) {
    var e = a[i];
    if (processed[e]) {
      //Do nothing
    } else {
      new_a.push(e);
      processed[e] = 1;
    }
  }
  
  return new_a.sort();
}


//Object to hold spreadsheet-handling functions
spreadsheet = {};

spreadsheet.loadWorksheet = function (spreadsheetId, worksheetId) {
  var src = ['http://spreadsheets.google.com/feeds/list/', spreadsheetId, '/', 
             worksheetId, '/public/values?alt=json-in-script', 
             '&callback=loadSheet'].join('');
  var script = document.createElement('script');
  script.setAttribute('src', src);
  script.setAttribute('id', 'jsonScript');
  script.setAttribute('type', 'text/javascript');
  document.documentElement.firstChild.appendChild(script);
}

//TODO: handle drawing capabilities in separate functions
function loadSheet(json) {
  //console.log(json);
  var sheetId = json.feed.id.$t;
  var tabId = sheetId.split('/')[6];
  cdemos.creativeEntries[tabId] = [];
  //console.log(tabId);
  
  var catVerticals = [];
  
  var entries = json.feed.entry;
  var n_entries = entries.length;
  
  var containerId = 'container-' + tabId;
  var container = $('#' + containerId);
  container.empty();
  
  for (var i = 0; i < n_entries; i++) {
    var entry = entries[i];
    
    if (entry.gsx$displayorderdnddonotdisplay.$t && entry.gsx$displayorderdnddonotdisplay.$t == 'DND') {
      continue;
    }
    
    var id = jQuery.trim(entry.gsx$demoid.$t);
    var title = jQuery.trim(entry.gsx$title.$t);
    var desc = jQuery.trim(entry.gsx$description.$t);
    var url = jQuery.trim(entry.gsx$url.$t);
    var tn = jQuery.trim(entry.gsx$thumbnailurl.$t);
    var countries = jQuery.trim(entry.gsx$countriescoveredegsgmyth.$t).split(',');
    var verticals = jQuery.trim(entry.gsx$verticals.$t).split(',');
    var product_features = jQuery.trim(entry.gsx$productfeaturesegdrivingdirectionscustomtiles.$t).split(',');
    
    var n_verticals = verticals.length;
    for (var j = 0; j < n_verticals; j++) {
      verticals[j] = jQuery.trim(verticals[j]);
    }
    
    var cEntry = new CreativeEntry(id);
    cEntry.title = title;
    cEntry.desc = desc;
    cEntry.url = url;
    cEntry.tn = tn;
    cEntry.countries = countries;
    cEntry.verticals = verticals;
    cEntry.product_features = product_features;
      
    cdemos.creativeEntries[tabId].push(cEntry);
    
    catVerticals = catVerticals.concat(verticals);
    
    var dom = cEntry.getDOM();
    container.append(dom);
  }
  
  //console.log('verticals ', catVerticals);
  cdemos.PARAMS.CATEGORIES[tabId].verticals = util.arrayUnique(catVerticals);
  cdemos.drawFilterList(tabId);
}

function readURLFragments() {
	/*
	 * Read URL
	 * Extract fragments
	 * If fragments exist, call jumpToCategoryVertical
	 */
}

function jumpToCategoryVertical(category, vertical) {
  var sheetId = null;
  if (cdemos.PARAMS.SHORT_NAMES_TO_CATEGORIES[category]) {
	  sheetId = cdemos.PARAMS.SHORT_NAMES_TO_CATEGORIES[category];
  }
  handleMenuClick(sheetId);
  filterEntries(vertical);
}
  
function handleMenuClick(sheetId) {
  if (sheetId != null) {
    var sheet = this.id;
  } else {
	  var sheet = sheetId;
  }
  cdemos.showCategory(sheet);
}
 
$(document).ready(cdemos.init);