//
//  jim.js
//  Copyright 2009 Reframe It, Inc. All rights reserved.
//

// -------------------------------------------------------------------------------
// Load the JIM into an iframe and surround parent doc with things
// -------------------------------------------------------------------------------

var RF;
if(RF == undefined) {
  RF =  {};
}

if(!RF._initialized) {
  RF.GetViewportHeight = function() {
    var height = 0;

    // every browser except IE quirks
    if(document.documentElement && 
      document.documentElement.clientHeight &&
      document.documentElement.clientHeight != 0)
      viewportHeight = document.documentElement.clientHeight;
    else // IE quirks mode
      viewportHeight = document.body.clientHeight;

    return viewportHeight;
  }

  if(!("bind" in Function)) {
    Function.prototype.bind = function(context) {
      var _method = this;
      return function() {
        return _method.apply(context, []);
      }
    }
  }

  RF.defined = function(obj) {
    return !((obj == undefined) || (obj == null));
  }

  RF._initialized = true;
}

RF.JIM = function(options) {
  if(!("reframeit" in window))
    window.reframeit = {};

  window.reframeit.jim = this;

  this.protocol = document.location.protocol;
  this.options = RF.defined(options) ? options : {};

  this.margin_url = ("margin_url" in this.options) ? this.options.margin_url : 'margin.html';
  this.margin_position = ("margin_position" in this.options) ? this.options.margin_position : 'right';
  this.margin_width = ("margin_width" in this.options) ? this.options.margin_width : '300px';
  this.margin_open = ("margin_open" in this.options) ? this.options.margin_open : true;
  this.margin_asset_host = ("margin_asset_host" in this.options) ? this.options.margin_asset_host : 'cdn.reframeit.com/margin/v2/';
  this.jim_asset_host = ("jim_asset_host" in this.options) ? this.options.jim_asset_host : 'cdn.reframeit.com/jim/v2/';

  var start_width = (this.margin_open) ? this.options.margin_width : '0';

  document.body.style.paddingRight = start_width; 

  this.container = document.createElement('div');
  this.container.style.width = start_width; 
  this.container.style.height = RF.GetViewportHeight() + "px";
  this.container.style.position = 'fixed'; 
  this.container.style.top = '0'; 
  this.container.style.right = '0';
  this.container.style.paddingLeft = '5px';
  this.container.style.zIndex = '100000';
  document.body.appendChild(this.container);

  this.marginFrame = document.createElement('iframe');
  this.marginFrame.style.width = this.margin_width; 
  this.marginFrame.style.height = RF.GetViewportHeight() + "px";
  this.marginFrame.style.border = 0; 
  this.marginFrame.setAttribute('src', this.options.margin_url);
  this.marginFrame.addEventListener('load', this.onMarginFrameLoad.bind(this), false);
  this.container.appendChild(this.marginFrame); 

  this.tab = document.createElement('a');
  this.tab.setAttribute('id', 'rfjim_tab');
  this.tab.style.backgroundImage = 'url(' + this.getJIMAssetHost() + 'images/right_tab.png)';
  this.tab.style.width = '30px';
  this.tab.style.height = '70px';
  this.tab.style.position = 'fixed';
  this.tab.style.top = '25%';
  this.tab.style.color = '#5885A2';
  this.tab.style.right = start_width;
  this.tab.addEventListener('click', this.onTabClick.bind(this), false);
  document.body.appendChild(this.tab);
  
  this.postCountSpan = document.createElement('span');
  this.postCountSpan.style.fontSize = '10px';
  this.postCountSpan.style.display = 'block';
  this.postCountSpan.style.marginTop = '22px';
  this.postCountSpan.appendChild(document.createTextNode(''));
  this.setPostCount(0);
  this.tab.appendChild(this.postCountSpan);

};

RF.JIM.prototype = {
  getMarginAssetHost: function() {
    return this.protocol + '//' + this.margin_asset_host;
  },
  
  getJIMAssetHost: function() {
    return this.protocol + '//' + this.jim_asset_host;
  },

  onMarginFrameLoad: function() {
    window.margin.onDOMLoaded(window.location.href, window);
  },

  onTabClick: function() {
    if(this.isMarginOpen())
      this.closeMargin();
    else 
      this.openMargin();
  },

  closeMargin: function() {
    this.tab.style.right = this.container.style.width = "0px";
  },

  openMargin: function() {
    this.tab.style.right = this.container.style.width = this.margin_width;
  },

  isMarginOpen: function() {
    return (this.container.style.width == this.margin_width);
  },

  hideTab: function() {
    this.tab.style.display = 'none';
  },

  showTab: function() {
    this.tab.style.display = 'block'; 
  },

  isTabVisible: function() {
    return (this.tab.style.display != 'none');
  },

  setPostCount: function(count) {
    this.postCountSpan.firstChild.nodeValue = count;

    //BTM - TODO - I tried some CSS tricks but programatically is more
    //consistent
    if(count < 10)
      this.postCountSpan.style.marginLeft = '13px';
    else if(count >= 10 && count < 100)
      this.postCountSpan.style.marginLeft = '11px';

  },

  _getMargin: function() {
    return window.margin;
  },

  /// Extension Wrappers
  GetSetting: function(key, value, useEncryption) { 
    if(!("localStorage" in window))
      return value;

    var result = window.localStorage.getItem(key);

    return (result == null) ? value : result;
  },

  PutSetting: function(key, value, useEncryption) {
    if("localStorage" in window)
      window.localStorage.setItem(key, value);
  },

  //BTM - TODO - HACK
  SetStatusFrameText: function(text) { this.setPostCount(text.match(/^(\d+)/)[0]); }

}