var FancyZoom = new Class({
  Implements: Options,
  options: {
    //The directory option is global to all future instances of FancyZoom on the same page
    directory : 'images',
    scaleImg: false,
    width: null,
    height: null,
    useOverlay:false,
    container: document.body
  },
  initialize: function(element, options) {
    this.setOptions(options)
    if(!$('zoom'))
      this.setup()
    this.element = $(element)
    if (this.element) {
      this.element.store('content_div', $(this.element.get('href').match(/#(.+)$/)[1]).setStyles({display:'block', position:'absolute', visibility:'hidden'}));
      this.element.store('scaleImg', this.options.scaleImg)
      this.element.store('zoom_width', this.options.width);
      this.element.store('zoom_height', this.options.height);
      this.element.addEvent('click', FancyZoom.show);
     
    }
    
	
	/*
if(this.options.useOverlay){
		FancyZoom.overlay = true;
	}
*/

  },
  setup: function() {
    var ext = Browser.Engine.trident ? 'gif' : 'png'
    var html = '<table id="zoom_table" style="border-collapse:collapse;width:640px;height:50%;"> \
                 <tbody> \
                   <tr> \
                     <td class="ml" style="width:0px; overflow:hidden;" /> \
                     <td class="mm" style="background:#fff; vertical-align:top;'+this.options.customStyles+'"> \
                       <div id="zoom_content"> \
                       </div> \
                     </td> \
                     <td class="mr" style="width:0px; overflow:hidden;" /> \
                   </tr> \
                 </tbody> \
               </table> \
               <a href="#" title="Close" id="zoom_close" style="position:absolute; top:14px; right:24px;"> \
                 <img src="' + this.options.directory + '/closebox.'+ext+'" alt="Close" style="border:none; margin:0; padding:0;" /> \
               </a>';
    $(document.body).grab(new Element('div', {id:"zoom", style:"display:none", html: html}));
    //Setup the FX as class methods
    FancyZoom.showFx = new Fx.Morph($('zoom'), {
      duration: 500,
      onStart: function(element) {
        if (element.retrieve('scaleImg')) {
          $('zoom_content').set('html', element.retrieve('content_div').get('html'));
          $$('#zoom_content img').setStyle('width', '100%');
        } else {
          $('zoom_content').set('html','');
        }
        // middle row height must be set for IE otherwise it tries to be "logical" with the height
        if (Browser.trident) {
          $A([$$('td.ml'), $$('td.mm'), $$('td.mr')]).flatten().setStyle('height', (height-40));
        }
      },
      onComplete: function(element) {
      	
        FancyZoom.zoomed = true;
        if (!element.retrieve('scaleImg'))
          $('zoom_content').set('html', element.retrieve('content_div').get('html'));
        $('zoom_close').setStyle('display', '');
        FancyZoom.unfixBackgroundsForIE();
        refresh();
      }
    })
    FancyZoom.hideFx = new Fx.Morph($('zoom'), {
      duration: 500,
      onStart: function(element) {
        if (!element.retrieve('scaleImg'))
          $('zoom_content').set('html', '')
        $('zoom_close').setStyle('display', 'none');
      },
      onComplete: function(element) {
        FancyZoom.zoomed = false;
        element.setStyle('display', 'none');
        FancyZoom.unfixBackgroundsForIE();
        
		
        $('OverlayContainer').destroy();	
        
        

      }
    })
    //Attach the events only once
    $('zoom_close').addEvent('click', FancyZoom.hide);
    // hide zoom if click fired is not inside zoom
    $$('html')[0].addEvent('click', function(e) {
      if (!($(e.target).match('#zoom') || $(e.target).getParent('#zoom')))
        FancyZoom.hide(e);
    });
    // esc to close zoom box
    $(document).addEvent('keyup', function(e) {
      if (e.key == 'esc')
        FancyZoom.hide(e);
    });
  }
});




FancyZoom.zoomed = false;
FancyZoom.show = function(e) {
  e.stop();
  
  

  	
  	var bodyEl = $$('body');
  	
this.container = new Element('div').setProperty('id', 'OverlayContainer').setStyles({
			position: 'absolute',
			left: '0px',
			top: '0px',
			width: '100%',
			height:'900px',
			background:'#fff',
			opacity:0.5,
			zIndex: 1
	}).injectInside(bodyEl[0]);


  

  
  
  var element            = $(e.target).match('a') ? e.target : e.target.getParent('a');
  var content_div        = element.retrieve('content_div')
  var width              = (element.retrieve('zoom_width') || content_div.getWidth()) + 60;
  //var height             = (element.retrieve('zoom_height') || content_div.getHeight()) + 60;
  var size = $('zoom_table').getSize();
  var height = size.y + 230;
  var d                  = window.getSize();
  var yOffset            = window.getScrollTop();
  // ensure that newTop is at least 0 so it doesn't hide close button
  var newTop             = Math.max((d.y/2) - (height/2) + yOffset, 0);
  var newLeft            = (d.x/2) - (640/2);
  // store this FancyZooms info in the zoom container
  $('zoom').store('curTop', e.client.y);
  $('zoom').store('curLeft', e.client.x);
  $('zoom').store('content_div', content_div)
  $('zoom').store('scaleImg', element.retrieve('scaleImg'))
  $('zoom').setStyles({
    position  : 'absolute',
    display   : 'block',
    opacity   : 0,
    top       : e.client.y,
    left      : e.client.x,
    width     : 1,
    height    : 1,
    zIndex: 9000
  });
  FancyZoom.fixBackgroundsForIE();
  FancyZoom.showFx.start({
    opacity: 1,
    top: newTop,
    left: newLeft,
    width: 640,
    height: height})
}
FancyZoom.hide = function(e) {
  if(!FancyZoom.zoomed)
    return
  e.stop();
  FancyZoom.fixBackgroundsForIE();
  FancyZoom.hideFx.start({
    left: $('zoom').retrieve('curLeft'), 
    top: $('zoom').retrieve('curTop'),
    width: 1,
    height: 1,
    opacity: 0});
}
FancyZoom.switchBackgroundImagesTo = function(to) {
  $$('#zoom_table td').each(function(e) {
    var bg = e.getStyle('background-image').replace(/\.(png|gif|none)\)$/, '.'+to+')');
    e.setStyle('background-image', bg);
  });
  var close_img = zoom_close.getElement('img');
  var new_img = close_img.get('src').replace(/\.(png|gif|none)$/, '.' + to);
  close_img.set('src', new_img);
}
FancyZoom.fixBackgroundsForIE = function() {
  if (Browser.Engine.trident5) {
    FancyZoom.switchBackgroundImagesTo('gif'); 
  }
}
FancyZoom.unfixBackgroundsForIE = function() {
  if (Browser.Engine.trident5) {
    FancyZoom.switchBackgroundImagesTo('png'); 
  }
}