var LightBox = Class.create();
LightBox.prototype = {

  initialize: function() {
    this.lightbox = '';
    this.contentArea = '';
    this.overlay = '';
    this.loading = '';
    this.createBox();
  },
  
  createBox : function() {
    var objBody = $$('body')[0];
    
    var overlay = new Element('div', {id:'overlay'});
    this.overlay = overlay;
    objBody.appendChild(overlay);    

    var closeButton = new Element('a', {'id' : 'close',  href : '#' });
    // objBody.appendChild(omar);
    var loading = new Element('img', {'src' : '/images/loading.gif', 'id':'loading'});    
		this.loading = loading;
    
    var wrapper = new Element('div', { 'id': 'lightbox'});
    var box = new Element('div', { 'id': 'box'});
    var boxContent = new Element('div', { 'id': 'boxContent'});
    this.contentArea = boxContent;
    box.appendChild(boxContent);
    boxContent.appendChild(loading);
    
    // var content = new Element('p').update("Some text. Hello universe");
    // box.appendChild(content);

    wrapper.appendChild(box);
    box.appendChild(closeButton);
    objBody.appendChild(wrapper);
    this.lightbox = $(box);
    this.lightbox.hide();
    
    // listen to close
    closeButton.observe('click', (
      function(event) {
        this.end();
      }).bind(this));
    
    $('overlay').hide().observe('click', (function() { this.end(); }).bind(this));  
      
      
  },
  
  end: function() {
      this.lightbox.hide();

      new Effect.Fade(this.overlay, { duration: 0.3 });
      $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'visible' });
      // this.contentArea.hide();      
  },
  
  
  show: function() {    
      // this.createBox();
      // this.fetchContent(target.href);
      this.contentArea.update(this.loading);
      $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' });

      // stretch overlay to fill page and fade in
      var arrayPageSize = this.getPageSize();
			
			//// overlay
      $('overlay').setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' });
      new Effect.Appear(this.overlay, { duration: 0, from: 0.0, to: 0.6 });
			////

      // calculate top and left offset for the lightbox 
      var arrayPageScroll = document.viewport.getScrollOffsets();
      var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 14);
      // var lightboxTop = arrayPageScroll[1];
      var lightboxLeft = arrayPageScroll[0];
      this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();
      
      // this.changeImage(imageNum);
  },  
    getPageSize: function() {

	     var xScroll, yScroll;

			if (window.innerHeight && window.scrollMaxY) {	
				xScroll = window.innerWidth + window.scrollMaxX;
				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
				if(document.documentElement.clientWidth){
					windowWidth = document.documentElement.clientWidth; 
				} else {
					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 = xScroll;		
			} else {
				pageWidth = windowWidth;
			}

			return [pageWidth,pageHeight];
		}
  
}



// var Lightbox = Class.create();
// 
// Lightbox.prototype = {
//  initialize: function() { 
//     this.setEventListener();
//  },
// 
//  createBox : function() {
//     var objBody = $$('body')[0];
//    var closeButton = new Element('a', {'id' : 'close'});
//    var loading = new Element('img', {'src' : '/images/loading.gif', 'id':'loading'});    
//    var wrapper = new Element('div', { 'id': 'lightbox'});
//    var box = new Element('div', { 'id': 'box'});
//    var boxContent = new Element('div', { 'id': 'boxContent'});
//    box.appendChild(boxContent);
//    boxContent.appendChild(loading);
//    
//    // var content = new Element('p').update("Some text. Hello universe");
//    // box.appendChild(content);
//    wrapper.appendChild(box);
//    box.appendChild(closeButton);
//     objBody.appendChild(wrapper);
//    this.lightbox = $(box);
//    this.lightbox.hide();
//    
//    // listen to close
//    closeButton.observe('click', (
//      function(event){        
//        Lightbox.close();
//      }).bind(this))
//    
//  },
// 
//   setEventListener: function() {   
//       document.observe('click', (function(event){
//           var target = event.findElement('a.popup');
//           if (target) {
//               event.stop();
//               this.start(target);
//           }
//       }).bind(this));
//   },
// 
//   start: function(target) {    
//       this.createBox();
//       this.fetchContent(target.href);
//       $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' });
// 
//       // stretch overlay to fill page and fade in
//       var arraypagesize = this.getPageSize();
//       
//       //// overlay
//       // $('overlay').setstyle({ width: arraypagesize[0] + 'px', height: arraypagesize[1] + 'px' });
//       // new effect.appear(this.overlay, { duration: this.overlayduration, from: 0.0, to: lightboxoptions.overlayopacity });
//       ////
// 
//       // calculate top and left offset for the lightbox 
//       var arrayPageScroll = document.viewport.getScrollOffsets();
//       var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
//       var lightboxLeft = arrayPageScroll[0];
//       this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();
//       
//       // this.changeImage(imageNum);
//   },
// 
//   fetchContent : function(url) {
//     new Ajax.Updater('boxContent', url, {
//       method: 'get',
//       onComplete: function() {
//         this.formCheck();
//         }.bind(this)
//     });
// 
//   },
//  
//  formCheck: function() {
//    if($$('#lightbox form').size() > 0){
//      $$('#lightbox form')[0].observe('submit', 
//        function(event){
//          event.stop();         
//          this.postForm(event.element());
//        }.bind(this))
//    }
//  },
//  
//  postForm: function(form) {
//    new Ajax.Request(form.action, 
//      { asynchronous:true, 
//        evalScripts:true, 
//        parameters:Form.serialize(form),
//        onLoading:function() {form.disable()},
//        onComplete:function() {form.enable();}
//      });
//  },
//  
//     getPageSize: function() {
// 
//       var xScroll, yScroll;
// 
//      if (window.innerHeight && window.scrollMaxY) {  
//        xScroll = window.innerWidth + window.scrollMaxX;
//        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
//        if(document.documentElement.clientWidth){
//          windowWidth = document.documentElement.clientWidth; 
//        } else {
//          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 = xScroll;    
//      } else {
//        pageWidth = windowWidth;
//      }
// 
//      return [pageWidth,pageHeight];
//    }
// 
// }
// 
// Lightbox.close = function() {
//  new Effect.Fade('lightbox', {
//    duration: 0.2,
//    afterFinish: function() {$('lightbox').remove();}
//    });
// }
// Lightbox.revealWarning = function() {
//  $$('p.warning')[0].show();  
// }
// 
var TellFriend = Class.create();

TellFriend.prototype = {
  initialize: function() {
    this.current_link = null;
    this.box = new LightBox();
    this.listen(this);
  },
  
  listen: function(self) {
    $$('ul.options')[0].observe('click', (
      function(event){
        var target = event.findElement('a.popup');
        if (target) {
          self.current_link = target;
          self.run(self);
          event.stop();
        }
      }  
    ))
  },
  
  run: function(self) {
    self.box.show();
    var url = self.current_link.href;
    new Ajax.Updater(self.box.contentArea, url, {
      method: 'get'
    });
  }
} //END EmailItem


var ProductRemote = Class.create();
ProductRemote.prototype = {
  initialize: function() {    
    this.box = new LightBox();
    this.setEventListener();
  },
  setEventListener: function() {   
    document.observe('click', (function(event){
        var target = event.findElement('a.remote');
        if (target) {
            this.run(target);
            event.stop();
        }
    }).bind(this));
  },
  
  run: function(link) {
    this.box.show();
    var url = link.href;
    new Ajax.Updater(this.box.contentArea, url, {
      method: 'get',
      onComplete: function() {
        }.bind(this)
    });    
  }  
}

document.observe('dom:loaded', 
  function () { 
  }
);