/// <summary>
/// registers dynamic div additions for ui effects
/// </summary>
$(function()
{
  // if ie, add curves to each instance with the curve class
  if ($.globalSettings.isIE)
  {
    $('.curve').append('<div class="corner tl"></div><div class="corner tr"></div><div class="corner bl"></div><div class="corner br"></div>');
  }
});

/// portal image class
var portalRotator =
{
  imageId: null,
  infoId: null,
  all: new Array(),

  init: function(imageId, infoId)
  {
    this.imageId = imageId;
    this.infoId = infoId;

    $('#' + this.infoId).hide();
    $('#' + this.imageId).hide();
  },

  add: function(portalImage)
  {
    this.all.push(portalImage);
  },

  // renders random image
  renderRandom: function()
  {
    $this = this;
    $(document).ready(function()
    {
      var random = getRandom($this.all);
      $this.renderImage(random, function()
      {
        $this.renderInfo(random);
      });
    });
  },

  // renders image by index
  renderImage: function(index, callback)
  {
    $('#' + this.imageId).attr('src', '' + this.all[index].src);
    $('#' + this.imageId).attr('alt', '' + this.all[index].alt);
    $('#' + this.imageId).attr('title', '' + this.all[index].alt);
    $('#' + this.imageId).fadeIn(500, callback);
  },

  // renders info for image with given index
  renderInfo: function(index, callback)
  {
    var info = $('#' + this.infoId);
    var h2 = info.find('h2');
    var p = info.find('p');
    var a = info.find('a');
    var portalImage = this.all[index];

    info.fadeOut(200, function()
    {
      h2.html(portalImage.title);
      p.html(portalImage.description);
      a.attr('href', portalImage.url);

      info.fadeIn(200, callback != null ? callback : null);
    });
  }
}

function portalImage(src, alt, title, description, url)
{
  this.src = src;
  this.alt = alt;
  this.title = title;
  this.description = description;
  this.url = url;
}

/// Returns a random index from an array
function getRandom(a)
{
  if (a && a.length)
  {
    var count = a.length;
    var randomIndex = Math.floor(Math.random() * count);
    return randomIndex;
  }
  else
  {
    return -1
  }
}

/// <summary>
/// static class for handling nav panel rollover effects
/// </summary>
var panel =
{
  // stores all the panels
  all: new Array(),

  // gets/sets the panel to fade on revealing panel
  fadePanelSelector: null,

  // 
  timeout: null,

  /// <summary>
  /// inits panel rollovers
  /// </summary>
  /// <param name="selector">jquery selector of items to apply feature to</param>
  init: function(selector)
  {
    var $this = this;

    $(document).ready(function()
    {
      $(selector).each(function()
      {
        var $caller = $(this);

        if ($caller.length > 0)
        {
          var panelId = $caller.attr('rel');
          var panel = $('#' + panelId);
          var fadeEach = $($this.fadePanelSelector);

          // set default visibility
          $this.visible(panel, false);

          // panel show binding
          panel.bind('show', function()
          {
            // hide all
            $this.hideAllVisible();

            // set visibility
            $this.visible(panel, true);

            // add on class for on state for the button
            $caller.addClass('on');

            // add on class for on state for the parent
            $caller.parent().addClass('on');

            // dim content
            if (fadeEach.length > 0)
			{
				var pageOverlay = $('.pageOverlay');
				if (pageOverlay.length == 0) {
					fadeEach.append('<div class="pageOverlay"></div>')
					$('.pageOverlay').css('opacity', .7);
				}
			}

            // show panel
            panel.show();
          });

          // panel hide bindings
          panel.bind('hide', function()
          {
            $this.visible(panel, false);

            // remove on class
            $caller.removeClass('on');

            // remove parent on class
            $caller.parent().removeClass('on');

            // reset opacity
            if (fadeEach.length > 0)
			{
				$('.pageOverlay').remove();
			}

            // hide panel
            panel.hide();
          });

          // caller trigger
          $caller.mouseover(function()
          {
            clearTimeout($this.timeout);
            panel.trigger('show');
          });

          $caller.mouseout(function()
          {
            $this.timeout = setTimeout("$('#" + panelId + "').trigger('hide');", 500);
          });

          // panel mouseover trigger
          panel.mouseover(function()
          {
            clearTimeout($this.timeout);
            $(this).trigger('show');
          });

          // panel mouseout trigger
          panel.mouseout(function()
          {
            $(this).trigger('hide');
          });

          // add the panel to the all array
          $this.all.push(panel);
        }
      });
    });
  },

  /// <summary>
  /// gets or sets the visibilty data of a panel
  /// </summary>
  /// <param name="panel"></param>
  /// <param name="isVisible"></param>
  visible: function(panel, isVisible)
  {
    if (isVisible != null)
      jQuery.data(panel, 'visible', isVisible);

    return jQuery.data(panel, 'visible') != null ? jQuery.data(panel, 'visible') : false;
  },

  /// <summary>
  /// hides all visible panels
  /// </summary>
  hideAllVisible: function()
  {
    for (var p in this.all)
    {
      if (this.visible(this.all[p]))
        this.all[p].trigger('hide');
    }
  }
}


/// <summary>
/// static class for handling nav panel rollover effects
/// </summary>
var tabPanel =
{
  // stores all the panels
  all: new Array(),

  // gets/sets the default panel
  defaultPanel: null,

  /// <summary>
  /// inits panel rollovers
  /// </summary>
  /// <param name="selector">jquery selector of items to apply feature to</param>
  init: function(selector)
  {
    var $this = this;

    $(document).ready(function()
    {
      $(selector).each(function()
      {
        var $caller = $(this);

        if ($caller.length > 0)
        {
          var panelId = $caller.attr('rel');
          var panel = $('#' + panelId);

          // set default visibility
          $this.visible(panel, false);

          // panel show binding
          panel.bind('show', function()
          {
            $this.visible(panel, true);

            // add on class for on state for the button
            $caller.addClass('on');

            // add on class for on state for the parent
            $caller.parent().addClass('on');

            // show panel
            panel.show();
          });

          // panel hide bindings
          panel.bind('hide', function()
          {
            $this.visible(panel, false);

            // remove on class
            $caller.removeClass('on');

            // remove parent on class
            $caller.parent().removeClass('on');

            // hide panel
            panel.hide();
          });

          // caller trigger
          $caller.click(function()
          {
            $this.hideAllVisible();
            panel.trigger('show');
            return false;
          });

          // add the panel to the all array
          $this.all.push(panel);
        }
      });

      // default panel
      if ($this.defaultPanel != null)
        $($this.defaultPanel).trigger('show');
    });
  },

  /// <summary>
  /// gets or sets the visibilty data of a panel
  /// </summary>
  /// <param name="panel"></param>
  /// <param name="isVisible"></param>
  visible: function(panel, isVisible)
  {
    if (isVisible != null)
      jQuery.data(panel, 'visible', isVisible);

    return jQuery.data(panel, 'visible') != null ? jQuery.data(panel, 'visible') : false;
  },

  /// <summary>
  /// hides all visible panels
  /// </summary>
  hideAllVisible: function()
  {
    for (var p in this.all)
    {
      if (this.visible(this.all[p]))
        this.all[p].trigger('hide');
    }
  }
}

/// <summary>
/// copies the entrie innerHtml from one element to another
/// </summary>
/// <param name="source"></param>
/// <param name="destination"></param>
function copyInnerHtml(source, destination)
{
  var html = $('#' + source).html();
  $('#' + destination).html(html);
}

/// <summary>
/// changes the stylesheet of using the title attribute
/// </summary>
/// <param name="styleName"></param>
/// <param name="href"></param>
function changeStylesheet(styleName, href)
{
  $('link[@rel*=style][title]').each(function(i)
	{
	  if (this.getAttribute('title') == styleName)
	  {
	    this.setAttribute('href', href)
	  }
	});
}

/// <summary>
/// determines from the querystring which stylesheet to load
/// </summary>
function initStylesheet()
{
  var url = parent.document.URL;
  var urlArray = url.split('?');
  var queryString = urlArray.length > 1 ? urlArray[1] : null;

  if (queryString != null)
  {
    var queryString = urlArray[1];
    var paramArray = queryString.split('&');

    for (i in paramArray)
    {
      var keyValue = paramArray[i].split('=');
      var key = keyValue.length > 0 ? keyValue[0] : null;
      var value = keyValue.length > 1 ? keyValue[1] : null;

      if (key == 'site')
      {
        changeStylesheet('siteSkin', 'css/' + value + '.css'); 
      }
    }
  } 
}