/*
  JavaScript used by mashups containing the chart, metric selector and date range picker

  (C) Copyright 2009, Compete Inc.

  The following variables are used by this file and must be set before including this file:
    chart
    charted_base_metric
    charted_secondary_metric
    charted_period
    chart_path
    
    show_compare
    
    site_name
    category_name
    media_host
    snapshot_site
    main_site
    member_site
    user_ispro
    authenticated_user
    
    default_daily_period (optional)
    default_monthly_period (optional)
*/

var DEFAULT_DAILY_PERIOD = (typeof(default_daily_period) == 'undefined') ? '30d' : default_daily_period;
var DEFAULT_MONTHLY_PERIOD = (typeof(default_monthly_period) == 'undefined') ? '1y' : default_monthly_period;

function setup_chart() {
  var flashVersion = deconcept.SWFObjectUtil.getPlayerVersion();
  
  $j('div#chart').css('background-image', 'none');
  if(flashVersion['major'] < 8) {
    $j('div#chart').css('background-image', 'url(/site_media/images/chart/no-flash-image.gif)');
    $j('div#chart').css('background-position', 'center center');
    $j('div#chart').css('background-repeat', 'no-repeat');
    $j('div#chart').css('cursor', 'pointer');
    $j('div#chart').bind('click', function() {
      window.location.replace('http://get.adobe.com/flashplayer/');
    });
    
    // Clear the CHART reference so that we do nothing
    window.CHART = undefined;
  }
  
  if (window.CHART == undefined) { return false; }
  
  var chart = window.CHART;
  
  chart.addVariable('path', chart_path);
  chart.addParam('wmode', 'transparent');
}

function setup_date_ranges() {
  function btn_hover_in(event) {
    if ($j(this).hasClass('pro') && !$j(this).hasClass('range-inactive')) {
      $j('#range-nav-pro-upsell').removeClass('hidden');
      $j(this).addClass('range-selected-pro');
      $j(this).css('cursor', 'default');
    } else if (!$j(this).hasClass('range-selected') && !$j(this).hasClass('range-inactive')) {
      $j(this).addClass('range-selected');
      $j(this).css('cursor', 'pointer');
    } else {
      $j(this).addClass('range-hovered');
      $j(this).css('cursor', 'default');
    }
  }
  function btn_hover_out(event) {
    var _parent = $j(this);
    var _timeout_id = null;
    
    function _close() {
      if (_timeout_id == null) { return; }
      
      clearInterval(_timeout_id);
      
      _parent.removeClass('range-selected-pro');
      _parent.css('cursor', 'default');
      
      $j('#range-nav-pro-upsell').addClass('hidden');
      $j('.pro').unbind('mouseenter');
      $j('.pro').unbind('mouseleave');
      
      _parent.hover(btn_hover_in, btn_hover_out);
    }
    function _cancel_close(event) {
      // Reset the timeout
      if (_timeout_id == null) { return; }
      clearInterval(_timeout_id);
    }
    function _enable_close(event) {
      if (_timeout_id != null) { clearInterval(_timeout_id); _timeout_id = null; }
      _timeout_id = setInterval(_close, 500);
    }
    
    if ($j(this).hasClass('range-selected-pro')) {
      $j('.pro').bind('mouseenter', _cancel_close);
      $j('.pro').bind('mouseleave', _enable_close);
      
      if (_timeout_id != null) { clearInterval(_timeout_id); _timeout_id = null; }
      _timeout_id = setInterval(_close, 500);
    } else if (!$j(this).hasClass('range-hovered')) {
      $j(this).removeClass('range-selected');
      $j(this).css('cursor', 'default');
    } else {
      $j(this).removeClass('range-hovered');
    }
  }

  // hovering over range buttons
  $j('div#range-nav ul li').hover(btn_hover_in, btn_hover_out);

  $j('#range-nav7d').bind('click',  { range: '7d' },  select_range);
  $j('#range-nav30d').bind('click', { range: '30d' }, select_range);
  $j('#range-nav3m').bind('click',  { range: '3m' },  select_range);
  $j('#range-nav6m').bind('click',  { range: '6m' },  select_range);
  $j('#range-nav1y').bind('click',  { range: '1y' },  select_range);
  if (!$j('#range-nav2y').hasClass('pro')) {
    $j('#range-nav2y').bind('click',  { range: '2y' },  select_range);
  }
}

/**
 * Prompts the user with a save/open download for an image of the graph
 * This invokes a client-side method on the flash graph, which submits POST params
 * to the specified URL.
 */
function save_graph_image()
{
	var metric_string = charted_base_metric;
	var name = (typeof(site_name) == 'undefined') ? category_name : site_name;
	
    // Remove any invalid characters and ensure that only one - is used
    name = name.replace(/[^a-z0-9]/gi, '-').replace(/--/gi, '-').toLowerCase();
	
	if (charted_secondary_metric) { metric_string += "+" + charted_secondary_metric };
	
	var file_name_params = name + '/' + metric_string + '/' + charted_period + '/big/';
	
	var graph_flash_object = $j('#main-chart')[0];
	graph_flash_object.exportImage(main_site + '/m/graph_to_image/' + file_name_params);
}

function select_range(event) {
  if ($j('#range-nav' + event.data.range).hasClass('range-inactive') ||
      ($j('#range-nav' + event.data.range).hasClass('range-selected') &&
       $j('#range-nav' + event.data.range).hasClass('range-hovered'))) {
    // If the clicked object is inactive or selected then do nothing
    event.stopPropagation();
    return false;
  }
  
  $j('.range-selected').removeClass('range-selected').removeClass('range-hovered');
  $j('#range-nav' + event.data.range).addClass('range-selected').addClass('range-hovered');
  
  charted_period = $j.trim($j('.range-selected')[0].innerHTML);
  
  update_chart();
  
  event.stopPropagation();
}

function update_range_picker() {
  var _metric = get_selected_metric('select-metric1')
  var _metric_type = (_metric) ? _metric.type : 'monthly';
  var _sel_metric_type = '';
  
  if (charted_base_metric) { _sel_metric_type = get_metric_object(charted_base_metric).type; }
  
  // If the selected metric type is the same as the one previously selected then do nothing
  if (_metric_type == _sel_metric_type) {
    return;
  }
  
  if (_metric_type == 'daily') {
    // For daily enable 7D, 30D (default), 3M, 6M, 1Y
    $j('#range-nav7d').removeClass('range-inactive');
    $j('#range-nav30d').removeClass('range-inactive');
    $j('#range-nav3m').removeClass('range-selected');
    $j('#range-nav6m').removeClass('range-selected');
    $j('#range-nav1y').removeClass('range-selected');
    $j('#range-nav2y').removeClass('range-selected').addClass('range-inactive');
    
    // Set the daily default
    if (_sel_metric_type) { charted_period = DEFAULT_DAILY_PERIOD; }
  } else {
    // For monthly enable 3M, 6M, 1Y (default), 2Y
    $j('#range-nav7d').removeClass('range-selected').addClass('range-inactive');
    $j('#range-nav30d').removeClass('range-selected').addClass('range-inactive');
    $j('#range-nav3m').removeClass('range-selected');
    $j('#range-nav6m').removeClass('range-selected');
    $j('#range-nav1y').removeClass('range-selected');
    $j('#range-nav2y').removeClass('range-inactive');
    
    // Set the monthly default
    if (_sel_metric_type) { charted_period = DEFAULT_MONTHLY_PERIOD; }
  }
  
  // Select the starting range
  $j('#range-nav' + charted_period).addClass('range-selected');
}

function update_metric_actions() {
  var _metric = get_selected_metric('select-metric1');
  var _sel_metric_type = '';
  
  function find_metric_div(target_element) {
    while (target_element) {
      if ($j.inArray("metric", target_element.className.split(' ')) != -1) { break; }
      target_element = target_element.parentNode;
    }
    
    return target_element;
  }
  
  if ($j('.selected-base').length == 0) { return false; }
  
  var _sel_metric = get_metric_object($j('.selected-base')[0].id);
  var _sel_metric_type = null;
  if (_sel_metric) { var _sel_metric_type = _sel_metric.type; }
  
  // If the selected metric type is the same as the one previously selected then do nothing
  if ((!_metric) || (!_sel_metric_type) || (_metric.type == _sel_metric_type)) {
    return false;
  }
  
  $j('#monthly-metrics .metric-actions').each(function () {
    var _tmetric = get_metric_object(find_metric_div(this).id);
    if (_tmetric.is_pro && (user_ispro == 0)) { return; }
    if (_metric.type == 'monthly') {
      $j(this).empty();
      if (show_compare) {
        $j(this).append('<div class="chart-compare"/><div class="chart-delete"/>');
      }
    } else {
      $j(this).empty();
    }
  });
  
  $j('#daily-metrics .metric-actions').each(function () {
    var _tmetric = get_metric_object(find_metric_div(this).id);
    if (_tmetric.is_pro && (user_ispro == 0)) { return; }
    if (_metric.type == 'daily') { 
      $j(this).empty();
      if (show_compare) {
        $j(this).append('<div class="chart-compare"/><div class="chart-delete"/>');
      }
    } else {
      $j(this).empty();
    }
  });
  
  if (show_compare) {
    //attach to the chart-compare ones
    $j('div.metric-actions > .chart-compare').bind('click', chart_compare_handler);
  
    //attach to the chart-delete ones
    $j('div.metric-actions > .chart-delete').bind('click', chart_delete_handler);
  }
  
  return true;
}

function update_metrics(metric1, metric2) {
  /*
  */
  if (metric2 == undefined) { metric2 = ''; }
  if ((metric1 == charted_base_metric) && (metric2 == charted_secondary_metric)) { return false; }
  
  set_selected_metric(metric1, metric2);
  
  update_metric_actions();
  update_range_picker();
  
  //remove the selected styles
  try {
    $j('#' + charted_base_metric).removeClass('selected-base').removeClass('selected');
    $j('#' + charted_secondary_metric).removeClass('selected');
  }
  // TODO: What are we silencing here, and why?  Find out and add explanatory comment!
  catch(e){};

  //mark the new metric(s) as selected
  $j('#' + metric1).addClass('selected-base').addClass('selected');
  if (metric2 != '') { $j('#' + metric2).addClass('selected'); }
  
  //set the globals that we use to keep track of what's currently charted
  charted_base_metric = metric1;
  charted_secondary_metric = metric2;
  
  update_chart();
  
  return true;
}