/*
Script: ImageZoom.js
  ImageZoom - My Object Oriented Zoom Style JavaScript

License:
	MIT-style license.

ImageZoom Copyright:
	copyright (c) 2007 Desmart, <http://desmart.com> by Bartosz Turkot <birkin@desmart.com>
	
*/

var ImageZoom = new Class({
  
  mZoomTag: '',
  mZoomTagHelper: '',
  
  mActiveElement: '',
  
  mSmallImageTag: '',
  mLargeImageTag: '',
  
  mLargeImage: '',
  mIgnoreMouseOver: false,
  
  mSizes: {Large: {}, Small: {}, Zoom: {}},
  mModifiers: {},
  
  initialize: function(){
    
    this.CreateZoomTag();
    
    $ES('a.ImageZoom').each(this.RegisterEvent.bind(this));
    
  },
  
  CreateZoomTag: function(){
    
    if('' == this.mZoomTag){
      
      this.mZoomTag = new Element('div');
      this.mZoomTag.injectInside($E('body'));
      this.mZoomTag.setProperty('class', 'ImageZoom');
      
    }
    
    if('' == this.mZoomTagHelper){
      
      this.mZoomTagHelper = new Element('div');
      this.mZoomTagHelper.injectInside($E('body'));
      this.mZoomTagHelper.setProperty('class', 'ImageTagHelper');
      
    }
    
  },
  
  RegisterEvent: function(pEl){
    
    pEl.addEvent('mouseover', function(){

      if(true == this.mIgnoreMouseOver){
        this.mIgnoreMouseOver = false;
        return false;
      }
      
      this.SetActiveElement(pEl);
      this.RegisterImagesWithTag();
      this.DisableLink();
      this.SetSizes();
      this.SetModifiers();
      this.InjectImage();
      
      document.addEvent('mousemove', this.MoveZoom.bindWithEvent(this));
      
    }.bind(this, pEl));
    
    pEl.addEvent('mouseout', function(pE){
      
      if(true == this.OverZoomContainer(pE)){
        this.mIgnoreMouseOver = true;
        return false;
      }
      
      this.EnableLink();
      this.SetElementInactive();
      
      document.removeEvents('mousemove', this.MoveZoom.bindWithEvent(this));
      
    }.bindWithEvent(this));
    
  },
  
  OverZoomContainer: function(pE){

    var OnZoomTagY = pE.page.y > this.mZoomTag.getPosition().y;
    var OnZoomTagX = pE.page.x > this.mZoomTag.getPosition().x;
    
    var OutsideSmallY = pE.page.y > this.mSmallImageTag.getPosition().y + this.mSmallImageTag.getSize().size.y;
    var OutsideSmallX = pE.page.x > this.mSmallImageTag.getPosition().x + this.mSmallImageTag.getSize().size.x;
    
    return (OnZoomTagY || OnZoomTagX) && !(OutsideSmallY || OutsideSmallX);
    
  },
  
  RegisterImagesWithTag: function(){
    
    if('' != this.mLargeImageTag){
      this.mLargeImageTag.remove();
    }
    
    this.mLargeImage = this.mActiveElement.getProperty('href');
    
    this.mLargeImageTag = new Element('img');
    this.mLargeImageTag.injectInside(this.mZoomTagHelper);
    this.mLargeImageTag.setProperty('src', this.mLargeImage);
    
    this.mSmallImageTag = $E('img', this.mActiveElement);
    
  },
  
  SetSizes: function(){
    
    this.mLargeImageTag.setStyle('display', 'block');
    this.mLargeImageTag.getParent().setStyle('display', 'block');
    
    this.mSizes.Large.width = this.mLargeImageTag.getSize().size.x;
    this.mSizes.Large.height = this.mLargeImageTag.getSize().size.y;
    
    this.mLargeImageTag.setStyle('display', 'none');
    this.mLargeImageTag.getParent().setStyle('display', 'none');
    
    this.mSizes.Small.width = this.mSmallImageTag.getSize().size.x;
    this.mSizes.Small.height = this.mSmallImageTag.getSize().size.y;
    
    this.mSizes.Small.posX = this.mSmallImageTag.getPosition().x;
    this.mSizes.Small.posY = this.mSmallImageTag.getPosition().y;
    
    this.mSizes.Zoom.width = this.mZoomTag.getStyle('width');
    this.mSizes.Zoom.height = this.mZoomTag.getStyle('height');
    
  },
  
  SetModifiers: function(){
    
    this.mModifiers.x = this.mSizes.Large.width / this.mSizes.Small.width;
    this.mModifiers.y = this.mSizes.Large.height / this.mSizes.Small.height;
    
  },
  
  InjectImage: function(){
    
    this.mZoomTag.setStyle('background-image', "url('"+this.mLargeImage+"')");

  },
  
  DisableLink: function(){
    
    this.mActiveElement.removeProperty('href');
    
  },

  EnableLink: function(){
    
    this.mActiveElement.setProperty('href', this.mLargeImage);
    
  },
  
  SetActiveElement: function(pEl){
    
    this.mActiveElement = pEl;
    this.ShowZoomElement();
    
  },
  
  SetElementInactive: function(){
     
    this.mActiveElement = '';
    this.HideZoomElement();
     
  },
  
  ShowZoomElement: function(){
    
    this.mZoomTag.setStyle('display', 'block');
    
  },
  
  HideZoomElement: function(){
    
    this.mZoomTag.setStyle('display', 'none');
    
  },

  MoveZoom: function(pE){

    var mouseY = pE.page.y;
    var mouseX = pE.page.x;
    
    this.mZoomTag.setStyles({
      
      'top': mouseY.toInt() + 20,
      'left': mouseX.toInt() + 20
      
    });
    
    var SmallImageAreaX = mouseX - this.mSizes.Small.posX;
    var SmallImageAreaY = mouseY - this.mSizes.Small.posY;

    var NewBgPosX = (this.mModifiers.x * SmallImageAreaX) - (this.mSizes.Zoom.width.toInt() / 2);
    var NewBgPosY = (this.mModifiers.y * SmallImageAreaY) - (this.mSizes.Zoom.height.toInt() / 2);
    
    this.mZoomTag.setStyle('background-position', +NewBgPosX*(-1)+'px '+NewBgPosY*(-1)+'px');
    
  }
  
});