var widgetElements = {}; // placeholder to hold all widgets and urls for furture reference
var documentInitialized = false;
var loaderAttached = false;

/**
 *  Handle when a widget 's content is fully loaded (you can add nice effects here, clean up
 */
function widgetLoaded(url, content, stylesheets) {
   for (i in stylesheets) {
	   insertStyleSheet(stylesheets[i]);
   }
   for(i in widgetElements) {
		if(widgetElements[i].indexOf(url) > -1) {
	    	document.getElementById(i).innerHTML = content.join('');
        attachWidgetEvents(document.getElementById(i));
    		delete widgetElements[i];
	  }
	}
  
}


function attachWidgetEvents(parentElement) {

 if (typeof(SortableTable) != "undefined") {
	  SortableTable.load();
  }
  var yu = YAHOO.util;
  yu.Event.on(
    yu.Dom.getElementsByClassName('events-button-button', 'a', parentElement), 'click', function(e){
      yu.Event.preventDefault(e);
      var el = this.parentNode.parentNode.nextSibling;
      do {
        if (!yu.Dom.hasClass(el, "hidden")) {
          yu.Dom.removeClass(this, "expanded");
          yu.Dom.addClass(el, "hidden");
        }
        else {
          yu.Dom.addClass(this, "expanded");
          yu.Dom.removeClass(el, "hidden");
        }
        el = el.nextSibling;
      } while (yu.Dom.hasClass(el, "event"));
    }
  );
  yu.Event.on(
    yu.Dom.getElementsByClassName('matches_group_selector', 'a', parentElement), 'click', function(e){
      yu.Event.preventDefault(e);
      var idx = this.getAttribute("data-index");
      var p = this.parentNode;
      var pp = p.parentNode;
      yu.Dom.removeClass(pp.getElementsByTagName("li"), "selected");
      yu.Dom.addClass(p, "selected");
      var rows = pp.parentNode.nextSibling.getElementsByTagName("tr");
      for (var i = 0; i < rows.length; i += 1) {
        if (yu.Dom.hasClass(rows[i], "match")) {
          if (idx != "0" && rows[i].getAttribute("data-index") != idx) {
            rows[i].style.display = "none"
          }
          else {
            rows[i].style.display = ""
          }
        }
        else if (yu.Dom.hasClass(rows[i], "event")) {
          yu.Dom.addClass(rows[i], "hidden");
        }
      }
    }
  );
  yu.Event.on(
    yu.Dom.getElementsByClassName('div_selector', 'a', parentElement), 'click', function(e){
      yu.Event.preventDefault(e);
      var idx = this.getAttribute("data-index");
      var p = this.parentNode;
      var pp = p.parentNode;
      yu.Dom.removeClass(pp.getElementsByTagName("li"), "selected");
      yu.Dom.addClass(p, "selected");
      var rows = pp.parentNode.nextSibling.getElementsByTagName("div");
      for (var i = 0; i < rows.length; i += 1) {
        var row_idx = rows[i].getAttribute("data-index");
        if (row_idx) {
          if (row_idx != idx && !yu.Dom.hasClass(rows[i], "hidden")) {
            yu.Dom.addClass(rows[i], "hidden")
          }
          else if (row_idx == idx && yu.Dom.hasClass(rows[i], "hidden")) {
            yu.Dom.removeClass(rows[i], "hidden");
          }
        }
      }
    }
  );
  var links = document.getElementsByTagName('a');
  if (links.length > 0) {
    for (var i=0; i<links.length; i+=1) {
      var link = links[i];
      if (link.href == 'javascript:void(0);') {
        if (yu.Dom.hasClass(link.parentNode, 'info-button')) {
          link.parentNode.removeChild(link);
        }
        else {
          link.removeAttribute('href');
        }
        link.className = link.className + ' void';
      }
    }
  }
  var league_tables_counters = [], compare_buttons = [];
  var tables = yu.Dom.getElementsByClassName('table', 'table', parentElement);
  for (var i=0; i<tables.length; i+=1) {
  (function(){
    var table = tables[i];
    league_tables_counters[table.id] = 0;
    local_compare_buttons = yu.Dom.getElementsByClassName('compare-button', 'input', table);
    if (local_compare_buttons.length > 0) {
      compare_buttons[table.id] = local_compare_buttons[0];
      compare_buttons[table.id].disabled = true;
      var tds = yu.Dom.getElementsByClassName('compare', 'td', table);
      for (var j=0; j<tds.length; j+=1) {
      (function(){
        var td = tds[j];
        yu.Event.on(
          yu.Dom.getFirstChild(td), 'click', function(e){
            if (this.checked) {
              if (league_tables_counters[table.id] >= 2) {
                yu.Event.preventDefault(e);
              }
              else {
                yu.Dom.addClass(td.parentNode, "highlight");
                league_tables_counters[table.id] += 1;
              }
            }
            else {
              yu.Dom.removeClass(td.parentNode, "highlight");
              league_tables_counters[table.id] -= 1;
            }
            if (league_tables_counters[table.id] == 2) {
              compare_buttons[table.id].removeAttribute("disabled");
            }
            else {
              compare_buttons[table.id].disabled = true;
            }
          }
        )
      })();
      }
    }
  })();
  }
}


/**
 * Insert a stylesheet only if it doesn't exist yet.
 */
insertStyleSheet = function(url) {
  var existingStyles = document.getElementsByTagName('link'); // grab all link elements from document

  for (i in existingStyles) { // walk them and see if it exists.
	  if (typeof(existingStyles[i].href) != "undefined" && existingStyles[i].href.indexOf(url) > -1) return;
  }
  
  var newStyle = document.createElement('link');
  newStyle.href= url;
  newStyle.rel = 'stylesheet'
  document.body.appendChild(newStyle);
}


/**
 * Creates script elements for the widgets after document is loaded.
 */
function loadWidgets() {
	for(i in widgetElements) {
		var scriptEl = document.createElement('script');
		scriptEl.src = widgetElements[i];
		scriptEl.type = 'text/javascript';
		document.body.appendChild(scriptEl);
   }
}

 /**
  * Load a widget
  */
function loadWidget(url) {
  var exists = false;  // assume current widget doesnt exist yet.
  var widgetCount =0;
  for (i in widgetElements) { // current widget is already loading, exit this.
   widgetCount++;
   if(widgetElements[i] == url) return;
  }

  // widget doesnt exist yet, inject a placeholder div in place and return
  var divId = 'widget_'+new Date().getTime()+'-'+widgetCount; // generate Unique placeholder div (add some fancy loader image here and inject it)
  widgetElements[divId] = url;
  //this is the only occurance of document.write.
  document.write('<div id="'+divId+'"><img src="' + 'http://cbc.globalsportsmedia.com/media/img/loading_white.gif' + '" alt="Please wait, loading widget for '+url + '" /></'+'div>');

  if(!documentInitialized && !loaderAttached) { // check only once if we attached events.
	  loaderAttached = true;
	  attachLoader();

  }
  return divId;
}

function loadWidgetInterval(url, timeout) {
  var divId = loadWidget(url);
  setTimeout(function() {
    reloadWidgetInterval(url, timeout, divId)
  }, timeout * 1000);
}

function reloadWidgetInterval(url, timeout, divId) {
  widgetElements[divId] = url;
  loadWidgets();
  setTimeout(function() {
    reloadWidgetInterval(url, timeout, divId)
  }, timeout * 1000);
}

 /**
  *  Create a nice DOM hook.
  */
function attachLoader() {
	// CBC's lone customization
	YAHOO.util.Event.onDOMReady(loadWidgets);return;
}