/*
  Speedbox by Johann Pardanaud (Nesquik69)
  Website : http://www.plune.fr
  
  This version is very uncomplete, consider it as a prototype version.
  
  Because I'm French, all the comments are in my language, sorry for English developers.
*/

var SpeedBox = function (params) {
  if(params == undefined) {
    params = {};
  }
  
  this.animState = 0;
  
  this.preloadLoadingImg = new Image();
  this.preloadLoadingImg.src = (params.loadingImgSrc != undefined) ? params.loadingImgSrc : 'loading.gif';
  
  this.preloadImg = new Image();
  
  this.init();
};

SpeedBox.prototype.init = function(){
  /* On met en place les évènements onclick sur les images concernées */
    var objReference = this;
    var linkTarget = document.body.getElementsByTagName('a');
    var linksNbr = linkTarget.length;
    for(var i=0 ; i < linksNbr ; i++) {
      if(linkTarget[i].rel == 'speedbox') {
        linkTarget[i].onclick = function(){return objReference.open(this);};
      }
    }
  /* Fin de la mise en place des évènements onclick */
  
  // La fonction updateValues() se déclenchera à chaque redimensionnement de la fenêtre
    window.onresize = function(){objReference.updateValues();};
};

SpeedBox.prototype.open = function(target){
  this.target = target;
  
  this.target.blur(); // Ceci ne gêne en rien la navigation au clavier !
  
  // Tout a été segmenté en étapes, dont voici les fonctions :
    this.loadBackgroundComponents();
    this.firstStepAnim();
    this.loadImage();
  
  return false; // On bloque la redirection du lien.
};

SpeedBox.prototype.close = function(){
  // Lignes de code temporaires :
    var background = document.getElementById('__sb_background');
    var imgBox = document.getElementById('__sb_imgBox');
    document.body.removeChild(background);
    imgBox.parentNode.removeChild(imgBox);
    this.animeState = 0;
};

SpeedBox.prototype.firstStepAnim = function(){
  var background = document.createElement('div');
    background.id = '__sb_background';
    background.style.position = 'absolute';
    background.style.top = '0px';
    background.style.left = '0px';
    background.style.width = '100%';
    background.style.height = this.pageHeight + 'px';
    background.style.margin = '0px';
    background.style.backgroundColor = '#000000';
    background.style.opacity = '0.5';
    background.style.filter = 'alpha(opacity=50)';
    background.style.zIndex = '100';
    background.onclick = this.close;
  background = document.body.insertBefore(background, document.body.firstChild);
  
  var imgBox = document.createElement('div');
    imgBox.id = '__sb_imgBox';
    imgBox.style.position = 'absolute';
    imgBox.style.top = this.realPosition(this.target.firstChild).offsetTop - 1 + 'px';
    imgBox.style.left = this.realPosition(this.target.firstChild).offsetLeft - 1 + 'px';
    imgBox.style.width = this.target.firstChild.offsetWidth + 'px';
    imgBox.style.height = this.target.firstChild.offsetHeight + 'px';
    imgBox.style.border = '1px solid #AAAAAA';
    imgBox.style.margin = '0px';
    imgBox.style.backgroundColor = '#000000';
    imgBox.style.backgroundImage = 'url("'+ this.preloadLoadingImg.src +'")';
    imgBox.style.backgroundRepeat = 'no-repeat';
    imgBox.style.backgroundPosition = 'center center';
    imgBox.style.opacity = '0.5';
    imgBox.style.filter = 'alpha(opacity=50)';
    imgBox.style.zIndex = '150';
  imgBox = document.body.appendChild(imgBox);
  
  if(window.ActiveXObject) { // Cette condition sert à résoudre quelques problèmes sous IE.
    var subtract = 0;
    if(this.parentsNbr > 1) { subtract = 10; }
    background.style.width = background.offsetWidth + 20 + 'px';
    imgBox.style.top = parseInt(imgBox.style.top) + 1 + 'px';
    imgBox.style.left = parseInt(imgBox.style.left) + 1 - subtract + 'px';
  }
  
  this.animState = 1;
};

SpeedBox.prototype.secondStepAnim = function(){
  this.loadImgComponents();
  
  var imgBox = document.getElementById('__sb_imgBox');
    imgBox.style.top = this.imgBoxTop + this.getScroll().top + 'px';
    imgBox.style.left = this.imgBoxLeft + this.getScroll().left + 'px';
    imgBox.style.width = this.imgBoxWidth + 'px';
    imgBox.style.height = this.imgBoxHeight + 'px';
    imgBox.style.backgroundImage = '';
    imgBox.style.opacity = '';
    imgBox.style.filter = '';
  
  var img = document.createElement('img');
    img.src = this.target.href;
    img.style.border = '2px solid #000000';
    img.style.padding = '0px';
    img.style.margin = '0px';
    img.width = this.imgBoxWidth - 4;
    img.height = this.imgBoxHeight - 4;
  imgBox.appendChild(img);
  
  this.animState = 2;
};

SpeedBox.prototype.loadImage = function(){
  var objReference = this;
  
  this.preloadImg.onload = function(){ objReference.secondStepAnim(); };
  this.preloadImg.src = this.target.href;
};

SpeedBox.prototype.updateValues = function() {
  if(this.animState >= 1) {
    var background = document.getElementById('__sb_background');
    background.style.display = 'none';
    
    this.loadBackgroundComponents();
    
    background.style.display = 'block';
    background.style.width = '100%';
    background.style.height = this.pageHeight + 'px';
      
    if(window.ActiveXObject) {
      background.style.width = background.offsetWidth + 20 + 'px';
    }
    
    if(this.animState == 1) {
      var imgBox = document.getElementById('__sb_imgBox');
        imgBox.style.top = this.realPosition(this.target.firstChild).offsetTop - 1 + 'px';
        imgBox.style.left = this.realPosition(this.target.firstChild).offsetLeft - 1 + 'px';
      
      if(window.ActiveXObject) { // Cette condition sert à résoudre quelques problèmes sous IE.
        var subtract = 0;
        if(this.parentsNbr > 1) { subtract = 10; }
        imgBox.style.top = parseInt(imgBox.style.top) + 1 + 'px';
        imgBox.style.left = parseInt(imgBox.style.left) + 1 - subtract + 'px';
      }
    }
  }
  
  if(this.animState == 2) {
    this.loadImgComponents();
    
    var subtract = 0;
    if(window.ActiveXObject) { subtract = 1; }
    
    var imgBox = document.getElementById('__sb_imgBox');
      imgBox.style.top = this.imgBoxTop - subtract + 'px';
      imgBox.style.left = this.imgBoxLeft - subtract + 'px';
      imgBox.style.width = this.imgBoxWidth + 'px';
      imgBox.style.height = this.imgBoxHeight + 'px';
      imgBox.firstChild.width = this.imgBoxWidth - 4;
      imgBox.firstChild.height = this.imgBoxHeight - 4;
  }
};

SpeedBox.prototype.loadBackgroundComponents = function(){
  if (window.innerHeight && window.scrollMaxY) {	
    this.pageHeight = window.innerHeight + window.scrollMaxY;
  } else if (document.body.scrollHeight > document.body.offsetHeight){
    this.pageHeight = document.body.scrollHeight;
  } else {
    this.pageHeight = document.body.offsetHeight;
  }
  
  if (window.innerHeight) {
    this.windowWidth = self.innerWidth;
    this.windowHeight = self.innerHeight;
  } else if (document.documentElement && document.documentElement.clientHeight) {
    this.windowWidth = document.documentElement.clientWidth;
    this.windowHeight = document.documentElement.clientHeight;
  } else {
    this.windowWidth = document.body.clientWidth;
    this.windowHeight = document.body.clientHeight;
  }
  
  this.pageHeight = (this.windowHeight > this.pageHeight) ? this.windowHeight : this.pageHeight;
};

SpeedBox.prototype.loadImgComponents = function(){
  var imgWidth = this.preloadImg.width + 4;
  var imgHeight = this.preloadImg.height + 4;
  var windowWidth = this.windowWidth - 32;
  var windowHeight = this.windowHeight - 32;
  
  if(imgWidth > windowWidth || imgHeight > windowHeight) {
    var widthCoef = imgWidth / windowWidth;
    var heightCoef = imgHeight / windowHeight;
    
    if(heightCoef > widthCoef) {
      this.imgBoxHeight = windowHeight;
      this.imgBoxWidth = Math.round(imgWidth / heightCoef);
    } else {
      this.imgBoxWidth = windowWidth;
      this.imgBoxHeight = Math.round(imgHeight / widthCoef);
    }
  } else {
    this.imgBoxWidth = imgWidth;
    this.imgBoxHeight = imgHeight;
  }
  
  var subtract = 1
  if(window.ActiveXObject){ subtract = 0; }
  this.imgBoxLeft = (this.windowWidth - this.imgBoxWidth) / 2 - subtract;
  this.imgBoxTop = (this.windowHeight - this.imgBoxHeight) / 2 - subtract;
};

SpeedBox.prototype.realPosition = function(target){
  var top = target.offsetTop;
  var left = target.offsetLeft;
  var scroll = this.getScroll();
  this.parentsNbr = 0;
  
  while(target = target.offsetParent) {
    top += target.offsetTop;
    left += target.offsetLeft;
    this.parentsNbr++;
  }
  
  return {
    offsetLeft: left,
    offsetTop: top
  };
};

SpeedBox.prototype.getScroll = function(){
  var xScroll, yScroll = 0;
  
  if(self.pageXOffset || self.pageYOffset) {
    xScroll = self.pageXOffset;
    yScroll = self.pageYOffset;
  } else if (document.documentElement || document.documentElement.scrollTop){
    xScroll = document.documentElement.scrollLeft;
    yScroll = document.documentElement.scrollTop;
  } else if (document.body) {
    xScroll = document.body.scrollLeft;
    yScroll = document.body.scrollTop;
  }
  
  return {left:xScroll, top:yScroll};
};