var Ulanguzi = {
  OVERLAY_ID: 'ulanguzi_effects_mask',
  Effects: {},
  Utilities: {
    getPageSize: function() {
    	var xScroll, yScroll;

    	if (window.innerHeight && window.scrollMaxY) {	
    		xScroll = document.body.scrollWidth;
    		yScroll = window.innerHeight + window.scrollMaxY;
    	} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
    		xScroll = document.body.scrollWidth;
    		yScroll = document.body.scrollHeight;
    	} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
    		xScroll = document.body.offsetWidth;
    		yScroll = document.body.offsetHeight;
    	}

    	var windowWidth, windowHeight;
    	if (self.innerHeight) {	// all except Explorer
    		windowWidth = self.innerWidth;
    		windowHeight = self.innerHeight;
    	} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
    		windowWidth = document.documentElement.clientWidth;
    		windowHeight = document.documentElement.clientHeight;
    	} else if (document.body) { // other Explorers
    		windowWidth = document.body.clientWidth;
    		windowHeight = document.body.clientHeight;
    	}	

    	// for small pages with total height less then height of the viewport
    	if(yScroll < windowHeight){
    		pageHeight = windowHeight;
    	} else { 
    		pageHeight = yScroll;
    	}

    	// for small pages with total width less then width of the viewport
    	if(xScroll < windowWidth){	
    		pageWidth = windowWidth;
    	} else {
    		pageWidth = xScroll;
    	}


    	arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
    	return arrayPageSize;
    }
  } 
};

Ulanguzi.Effects.ModalAppear = function(element) {
  element = $(element);
  var options = Object.extend({
    from: (element.getStyle('display') == 'none' ? 0.0 : element.getOpacity() || 0.0),
    to:   1.0,
    // force Safari to render floated elements properly
    afterFinishInternal: function(effect) {
      effect.element.forceRerendering();
    },
    beforeSetup: function(effect) {
      // create the overlay mask
      var pageSize = Ulanguzi.Utilities.getPageSize();
      var body = $$('body')[0];
      if( $(Ulanguzi.OVERLAY_ID) ) body.removeChild($(Ulanguzi.OVERLAY_ID));
      var mask = document.createElement('div');
      mask.setAttribute('id', Ulanguzi.OVERLAY_ID);
      mask.style.display    = 'none';
      mask.style.position   = 'absolute';
      mask.style.width      = '100%';
      mask.style.background = '#000';
      mask.style.height     = pageSize[1] + 'px';
      mask.style.zIndex     = 999;
      mask.style.top        = 0;
      mask.style.left       = 0;
      body.appendChild(mask);
      
      var overlayDuration = 0.5;
      if( options.duration ) overlayDuration = options.duration / 2;
      effect.element.style.position = 'absolute';
      effect.element.style.zIndex = 1000;
      effect.element.setOpacity(effect.options.from).show();
      new Effect.Appear($(Ulanguzi.OVERLAY_ID), { from: 0.0, to: 0.8, duration: overlayDuration });
    }
  }, arguments[1] || {});

  return new Effect.Opacity(element, options);
}

Ulanguzi.Effects.ModalFade = function(element) {
  element = $(element);
  var oldOpacity = element.getInlineOpacity();
  var options = Object.extend({
    from: element.getOpacity() || 1.0,
    to:   0.0,
    beforeSetup: function(effect) {
      new Effect.Fade(Ulanguzi.OVERLAY_ID, arguments[1] || {})
    },
    afterFinishInternal: function(effect) { 
      if(effect.options.to!=0) return;
      effect.element.hide().setStyle({opacity: oldOpacity}); 
    }
  }, arguments[1] || {});
  return new Effect.Opacity(element,options);
}