// <![CDATA[

/*
--------------------------------------------------------
glayer.js - (gray out + layer) = glayer
Version 2.0.0 (Update 2007/03/25)

- onozaty (http://www.enjoyxstudy.com)

Released under the Creative Commons License(Attribution 2.1 Japan):
 http://creativecommons.org/licenses/by/2.1/jp/

For details, see the web site:
 http://www.enjoyxstudy.com/javascript/glayer/

--------------------------------------------------------
*/

var Glayer = {
  show: function(element) {
    element = this._getElement(element);
    this.resetSize(element);
    element.style.display = '';

    return element;
  },
  hide: function(element) {
    element = this._getElement(element);
    this.resetSize(element);

    element.style.display = 'none';

//    return element;
  },

  fadeIn: function(element, duration, callback) {
    element = this._getElement(element);
    this.resetSize(element);

    new Glayer.FadeIn(element, {duration: duration, to: this.getOpacity(element), callback: callback});

    return element;
  },
  fadeOut: function(element, duration, callback) {
    element = this._getElement(element);
    this.resetSize(element);

    new Glayer.FadeOut(element, {duration: duration, from: this.getOpacity(element), callback: callback});

    return element;
  },

  resetSize: function(element) {
    var position = this._getStyle(element, 'position');

    if (position != 'fixed') {
      var size = this.getPageSize();

      element.style.width  = size[0] + 'px';
      element.style.height = size[1] + 'px';
    }
  },

  _getElement: function(element) {

    if (typeof element == 'string') {
      var id = element;
      element = document.getElementById(element);

      if (!element) {
        element = document.createElement('div');
        element.id = id;
        element.style.display = 'none';
        document.body.appendChild(element);
      }
    }
    return element;
  },

  // Window / Page Size
  getWindowSize: function() {
    var width;
    var height;

    if (document.compatMode == 'CSS1Compat' && !window.opera) {
      // Strict Mode && Non Opera
      width  = document.documentElement.clientWidth;
      height = document.documentElement.clientHeight;
    } else {
      // other
      width  = document.body.clientWidth;
      height = document.body.clientHeight;
    }

    return [width, height];
  },
  getPageSize: function() {

    var windowSize = this.getWindowSize();

    var width  = windowSize[0];
    var height = windowSize[1];

    if (document.compatMode == 'CSS1Compat') {
      if (document.documentElement.scrollWidth > width) {
        width  = document.documentElement.scrollWidth;
      }
      if (document.documentElement.scrollHeight > height) {
        height = document.documentElement.scrollHeight;
      }
    } else {
      if (document.body.scrollWidth > width) {
        width  = document.body.scrollWidth;
      }
      if (document.body.scrollHeight > height) {
        height = document.body.scrollHeight;
      }
    }

    return [width, height];
  },

  // Styles
  getOpacity: function(element) {
    var value = this._getStyle(element, 'opacity');
    if (value) return parseFloat(value);

    if (value = (element.style.filter || '').match(/alpha\(opacity=(.*)\)/)) {
      if (value[1]) return parseFloat(value[1]) / 100;
    }

    return 1.0;
  },
  _getStyle: function(element, style) {
    var value = element.style[style];
    if (value) return value;

    if (document.defaultView && document.defaultView.getComputedStyle) {
      var css = document.defaultView.getComputedStyle(element, null);
      if (css) return css.getPropertyValue(style);
    } else if (element.currentStyle) {
      return element.currentStyle[style];
    }

    return null;
  },

  // debug
  getDebugInfo: function() {

    var debugInfo = new Array();

    debugInfo.push("document.compatMode:" + document.compatMode);
    debugInfo.push("window.innerWidth:" + window.innerWidth);
    debugInfo.push("window.innerHeight:" + window.innerHeight);
    debugInfo.push("window.scrollMaxX:" + window.scrollMaxX);
    debugInfo.push("window.scrollMaxY:" + window.scrollMaxY);
    debugInfo.push("document.body.scrollWidth:" + document.body.scrollWidth);
    debugInfo.push("document.body.scrollHeight:" + document.body.scrollHeight);
    debugInfo.push("document.body.offsetWidth:" + document.body.offsetWidth);
    debugInfo.push("document.body.offsetHeight:" + document.body.offsetHeight);
    debugInfo.push("document.body.clientWidth:" + document.body.clientWidth);
    debugInfo.push("document.body.clientHeight:" + document.body.clientHeight);
    debugInfo.push("document.documentElement:" + document.documentElement);
    if (document.documentElement) {
      debugInfo.push("document.documentElement.scrollWidth:" + document.documentElement.scrollWidth);
      debugInfo.push("document.documentElement.scrollHeight:" + document.documentElement.scrollHeight);
      debugInfo.push("document.documentElement.offsetWidth:" + document.documentElement.offsetWidth);
      debugInfo.push("document.documentElement.offsetHeight:" + document.documentElement.offsetHeight);
      debugInfo.push("document.documentElement.clientWidth:" + document.documentElement.clientWidth);
      debugInfo.push("document.documentElement.clientHeight:" + document.documentElement.clientHeight);
    }

    return debugInfo;
  }
};


// Fade In/Out
Glayer.Fade = function(element, options) {
  this.setup(element, options);
  this.start();
};

Glayer.Fade.prototype = {
  intervalTime: 20,
  duration: 500,

  setup: function(element, options) {
    this.element = element;
    this.style = this.element.style;

    options = options || {};

    if (options.duration != undefined) this.duration = options.duration;
    if (options.from != undefined) this.from = options.from;
    if (options.to != undefined) this.to = options.to;
    if (options.callback != undefined) this.callback = options.callback;

    this.range = this.to - this.from;
    this.limit = Math.ceil(this.duration / this.intervalTime);
    this.executed = 0;

    if ((/MSIE/.test(navigator.userAgent) && !window.opera) && (!this.element.currentStyle.hasLayout)) {
      this.style['zoom'] = 1;
    }
  },
  start: function() {
    var self = this;
    this.intervalId = setInterval(function(){ self.update(); }, this.intervalTime);
  },
  end: function() {
    clearInterval(this.intervalId);
    if (this.callback) this.callback();
  },
  update: function() {
    this.executed++;

    if(this.executed == 1) this.style.display = '';

    var opacity;
    if (this.executed == this.limit) {
      this.setOpacity(this.to);
      this.end();
    } else {
      this.setOpacity(this.from + (this.range / this.limit * this.executed));
    }
  },
  setOpacity: function(opacity) {
    this.style.filter = 'alpha(opacity=' + (opacity * 100) + ')';
    this.style.opacity = opacity;
  }
};

Glayer.Fade.copyPrototype = function(dest) {
  for (var prop in Glayer.Fade.prototype) {
    dest.prototype[prop] = Glayer.Fade.prototype[prop];
  }
};

Glayer.FadeIn = function() {
  Glayer.Fade.apply(this, arguments);
};
Glayer.Fade.copyPrototype(Glayer.FadeIn);
Glayer.FadeIn.prototype.from = 0.0;
Glayer.FadeIn.prototype.to = 1.0;

Glayer.FadeOut = function() {
  Glayer.Fade.apply(this, arguments);
};
Glayer.Fade.copyPrototype(Glayer.FadeOut);
Glayer.FadeOut.prototype.from = 1.0;
Glayer.FadeOut.prototype.to = 0.0;
Glayer.FadeOut.prototype.end = function() {
  this.style.display = 'none';
  this.setOpacity(this.from);
  Glayer.Fade.prototype.end.apply(this, arguments);
};

// ]]>