var DragHandler = {
                // private property.
                _oElem : null,
                viewerWidth: 0,
                // public method. Attach drag handler to an element.
                attach : function(oElem, viewerWidth, viewerHeight) {
                    oElem.onmousedown = DragHandler._dragBegin;
                    oElem.style.cursor   =  "move";
                    oElem.style.position =  "absolute";
                    // callbacks
                    oElem.dragBegin = new Function();
                    oElem.drag = new Function();
                    oElem.dragEnd = new Function();
                    
                    DragHandler.viewerWidth  = viewerWidth;
                    DragHandler.viewerHeight = viewerHeight;
                    return oElem;
                },

                // public method. Attach drag handler to an element.
                deattach : function(oElem) {
                    oElem.onmousedown = null;
                    oElem.style.cursor =  "default";
                    oElem.style.top  = "0px";
                    oElem.style.left = "0px";
                    oElem.style.width  = "100%";
                    oElem.style.height = "100%";



                    return oElem;
                },


                // private method. Begin drag process.
                _dragBegin : function(e) {
                    var oElem = DragHandler._oElem = this;

                    if (isNaN(parseInt(oElem.style.left))) {oElem.style.left = '0px';}
                    if (isNaN(parseInt(oElem.style.top))) {oElem.style.top = '0px';}

                    var x = parseInt(oElem.style.left);
                    var y = parseInt(oElem.style.top);

                    e = e ? e : window.event;
                    oElem.mouseX = e.clientX;
                    oElem.mouseY = e.clientY;

                    oElem.dragBegin(oElem, x, y);

                    document.onmousemove = DragHandler._drag;
                    document.onmouseup = DragHandler._dragEnd;
                    return false;
                },


                // private method. Drag (move) element.
                _drag : function(e) {
                    var oElem = DragHandler._oElem;

                    var x = parseInt(oElem.style.left);
                    var y = parseInt(oElem.style.top);

                    e = e ? e : window.event;
                    var moveX =  x + (e.clientX - oElem.mouseX);
                    moveX =  (moveX > 0) ? 0 : moveX;
                    
                    if (moveX < 0 ) {
                        var limitX = DragHandler.viewerWidth - oElem.width;
                        moveX = (moveX > limitX  ) ? moveX :  limitX ;
                    }
                    oElem.style.left = moveX + 'px';
                    

                    var moveY = y + (e.clientY - oElem.mouseY);
                    moveY =  (moveY > 0) ? 0 : moveY;
                    if (moveY < 0 ) {
                        var limitY = DragHandler.viewerHeight - oElem.height;
                        moveY = (moveY > limitY  ) ? moveY :  limitY - 5 ;
                    }

                    oElem.style.top = moveY  + 'px';
                    
                    oElem.mouseX = e.clientX;
                    oElem.mouseY = e.clientY;

                    oElem.drag(oElem, x, y);

                    return false;
                },


                // private method. Stop drag process.
                _dragEnd : function() {
                    var oElem = DragHandler._oElem;

                    var x = parseInt(oElem.style.left);
                    var y = parseInt(oElem.style.top);

                    oElem.dragEnd(oElem, x, y);

                    document.onmousemove = null;
                    document.onmouseup = null;
                    DragHandler._oElem = null;
                }

            }
            
function NajarIMGViewer (imgpath) {

    this.divOverlay       = null;
    this.divViewer        = null;
    this.divPicture       = null;

    this.imgPicture         = null;
    this.imgPictureFileName = "";
    this.imgPictureUrl      = "";

    // **** Zoom Feature
    this.maxzoom = 0;
    this.zoomactual = 0;
    this.zoomImages = new Array();
    
    // **** Sizes
    this.viewerWidth     = 500;
    this.viewerHeight    = 400;
    this.minViewerWidth  = 600;

    this.imgpath = imgpath;

    this.createObjects();
}


NajarIMGViewer.prototype.init = function () {
    var links = document.getElementsByTagName("a");
    var imgType = new RegExp("[jpg|gif|jpeg|png]$");

    for (var i = 0; i < links.length; i++) {
       
       var href = links[i].getAttribute("href");
       if (href) {
            href = href.toLowerCase();
            var zoom = links[i].getAttribute("zoomviewer");
            if (imgType.test(href) && (zoom))
                    this.convertLink(links[i]);
       }
    }
}

NajarIMGViewer.prototype.convertLink= function(link) {

    var zoomIconDiv = document.createElement("div");
    zoomIconDiv.className ="nviewer_zoomicon";

    var zoomIcon = document.createElement("img");
    zoomIcon.setAttribute("src", this.imgpath + "zoom_icon.png"); /** Todo: Pedo ! **/
    zoomIconDiv.appendChild(zoomIcon);

    link.className = "nviewer_image clearfix";
    
    var that = this;
    link.onclick = function () {
        // *** img preloading
        var url = link.getAttribute("href");
        var viewerImage = new Image();
        viewerImage.src = url;
      
        var txt = link.getAttribute("title");
        that.showImage(url,txt);
        return false;
    }
    link.appendChild(zoomIconDiv);

}


NajarIMGViewer.prototype.zoomPic= function(link) {

    // *** img preloading
    var url = link.getAttribute("href");
    var viewerImage = new Image();
    viewerImage.src = url;
      
    var txt = link.getAttribute("title");
    this.showImage(url,txt);
    
    return false;
    
}

NajarIMGViewer.prototype.createObjects = function (imgText) {

    // **************************
    // *** Black Overlay
    // **************************
     this.divOverlay = document.createElement("div");
     this.divOverlay.className = "nviewer_overlay";
     document.body.appendChild(this.divOverlay);
     
     var that = this;
     this.divOverlay.onclick = function() {
        that.hideImage();
     }

     window.onresize = function () {
        that.resizeOverlay();
        that.setViewerPosition();
     }

    // **************************
    // *** Principal div viewer
    // **************************
    this.divViewer = document.createElement("div");
    this.divViewer.className = "nviewer_viewer";
    document.body.appendChild(this.divViewer);

    // **************************
    // *** Image div
    // **************************
    this.divPicture = document.createElement("div");
    this.divPicture.className = "wrapper";
    this.divViewer.appendChild(this.divPicture);


    // *** Zoom In Icon
    this.ZoomInIcon = document.createElement("div");
    this.ZoomInIcon.className = "zoomin_icon";
    var imgIn = new Image();
    imgIn.src = this.imgpath + "zoom-in.png" ;

    var that = this;
    this.ZoomInIcon.onclick = function () {
        that.zoomInImage();
    };

    this.ZoomInIcon.appendChild(imgIn);
    this.divPicture.appendChild(this.ZoomInIcon);

    // *** Zoom Out
    this.ZoomOutIcon = document.createElement("div");
    this.ZoomOutIcon.className = "zoomout_icon";
    var imgOut = new Image();
    imgOut.src =  this.imgpath + "zoom-out.png" ;

    this.ZoomOutIcon.appendChild(imgOut);
    this.ZoomOutIcon.onclick = function () {
        that.zoomOutImage();
    };

    this.divPicture.appendChild(this.ZoomOutIcon);


    // **************************
    // *** Text of the image
    // **************************
    var captionInfo = document.createElement("div");
    captionInfo.className = "captioninfo";

    var textInfo = document.createElement("div");
    textInfo.className = "text";
    textInfo.setAttribute("id", "textinfo")

    textInfo.appendChild(document.createTextNode(imgText));
    captionInfo.appendChild(textInfo);

    var closeLink  = document.createElement("div");
    closeLink.className = "link";

    var linkAnchor = document.createElement("a");
    linkAnchor.appendChild(document.createTextNode("cerrar"));
    linkAnchor.onclick = function () {
         that.hideImage();
         return false;
     }

    closeLink.appendChild(linkAnchor);
    captionInfo.appendChild(closeLink);

    this.divViewer.appendChild(captionInfo);

    // **************************
    // *** Text of the image
    // **************************
    this.imgPicture = new Image();
    this.divPicture.appendChild(this.imgPicture);

}

NajarIMGViewer.prototype.loadImage = function(imgUrl,imgText) {

       // *** Image & Objects Inits
        var that = this;
        that.imgPicture.src = imgUrl;
         // *** The Text
        var text = document.getElementById("textinfo");
        text.innerHTML  = imgText +
            '<br/><p class="credit">Visor de imagenes por Fermin J. Najar</p>';

        that.resizeOverlay();
        that.setViewerSize();
        that.setViewerPosition();

        
        that.maxzoom = 0;
        that.zoomactual = 0;
        that.zoomImages = new Array();
        DragHandler.deattach(that.imgPicture);

        // ** Zoom
        that.zoomImages = new Array();
        that.maxzoom = 0;
        that.zoomactual = 0;
        that.fileNameExtract(imgUrl);
        that.zoomVerifyMaxLevel(1);

        that.fadeIn(that.divOverlay,.5,0, function() {
            that.divOverlay.style.display    = "block";
            that.divViewer.style.display     = "block";
        } );

    }

NajarIMGViewer.prototype.showImage = function (imgUrl,imgText) {

   

   var imgLoader = new Image();
   var that = this;
   imgLoader.src = imgUrl;
   if (imgLoader.complete)
       this.loadImage(imgUrl,imgText);

   imgLoader.onload = function() {
           that.loadImage(imgUrl,imgText);
    }

   /* this.divOverlay.style.visibility = "visible";
   this.divOverlay.style.display    = "block";
   this.divViewer.style.display     = "block";*/

   //*** For test DragHandler.attach(this.imgPicture);
}





NajarIMGViewer.prototype.hideImage = function () {
   var that = this;
   this.divOverlay.onclick = null;
   this.fadeOut(that.divOverlay, null, function(){
       that.divViewer.style.display     = "none";
       that.ZoomInIcon.style.visibility = "hidden";
       that.ZoomInIcon.style.display    = "none";
       that.ZoomOutIcon.style.visibility = "hidden";
       that.ZoomOutIcon.style.display    = "none";
   });
}


NajarIMGViewer.prototype.zoomInImage = function () {
    this.zoomactual++;

    if ( this.maxzoom == this.zoomactual ) {
        this.ZoomInIcon.style.visibility = "hidden";
        this.ZoomInIcon.style.display    = "none";
    }

    this.imgPicture.src = this.zoomImages[this.zoomactual-1].src;

    if (this.zoomactual == 1) {
        DragHandler.attach(this.imgPicture,this.viewerWidth,this.viewerHeight);

        this.imgPicture.style.width  = "";
        this.imgPicture.style.height = "";
        
        this.ZoomOutIcon.style.visibility = "visible";
        this.ZoomOutIcon.style.display    = "block";

    }

   this.imgPicture.style.top  = "0px";
   this.imgPicture.style.left = "0px";
}

NajarIMGViewer.prototype.zoomOutImage = function () {

    this.zoomactual--;

    this.ZoomInIcon.style.visibility = "visible";
    this.ZoomInIcon.style.display    = "block";

    this.imgPicture.style.top  = "0px";
    this.imgPicture.style.left = "0px";

    if (this.zoomactual == 0) {

        DragHandler.deattach(this.imgPicture);

        this.ZoomOutIcon.style.visibility = "hidden";
        this.ZoomOutIcon.style.display    = "none";

        this.imgPicture.src = this.imgPictureUrl + this.imgPictureFileName ;
    }
    else {

       this.imgPicture.src = this.zoomImages[this.zoomactual-1].src;

    }
}

NajarIMGViewer.prototype.zoomVerifyMaxLevel = function (nextZoom) {

    var tester = new Image();
    var that   = this;

    tester.onload =function() {
        that.zoomImages.push(tester);
        that.zoomVerifyMaxLevel(nextZoom + 1);
    }

    tester.onerror=function() {

        that.maxzoom = nextZoom -1;
        if (that.maxzoom > 0)
        {
            that.ZoomInIcon.style.visibility = "visible";
            that.ZoomInIcon.style.display    = "block";
        }
    }

    // tester.src = this.imgPictureUrl + "zoom" + nextZoom + "_" + this.imgPictureFileName ;
    
    tester.src = this.imgPictureUrl + 
    			 this.imgPictureOnlyFileName + 
    		     "_zoom" + nextZoom +  
    		     this.imgPictureExtension;
    
    
}




NajarIMGViewer.prototype.fileNameExtract = function (url) {

      var wholeurl = url;
      var urlSize = wholeurl.length;

      while((wholeurl.substring(urlSize,urlSize-1))!= "/")  {

          urlSize--;
          if (urlSize < 0 )
             break;
      }
      var clipstart = urlSize;
      var fileName = url;
      this.imgPictureUrl = "";
      this.imgPictureFileName = "";
      
      if (!(urlSize < 0) )
      {
         fileName           =  wholeurl.substring(wholeurl.length, clipstart );
         this.imgPictureUrl = wholeurl.substring( 0, clipstart );
      }

      this.imgPictureFileName = fileName;
      
      var extIndex 	= fileName.lastIndexOf(".");
      this.imgPictureOnlyFileName = fileName.substring(0,extIndex);
      this.imgPictureExtension    = fileName.substring(extIndex);
     
}


NajarIMGViewer.prototype.setViewerPosition = function() {
    var x = ( this.getClientWidth() / 2 ) -
             (this.viewerWidth / 2);

    var y = ( this.getClientHeight() / 2 ) -
             (this.viewerHeight / 2);

    this.divViewer.style.left = x + "px";
    this.divViewer.style.top = y + "px";
}

NajarIMGViewer.prototype.resizeOverlay = function () {
    var scrollSize = this.getScrollXY();
    this.divOverlay.style.height =  this.getClientHeight() + scrollSize.y + "px";
    this.divOverlay.style.width  =  this.getClientWidth()  + scrollSize.x + "px";

}

NajarIMGViewer.prototype.getScrollXY = function () {
  var scrOfX = 0, scrOfY = 0;
  if( typeof( window.pageYOffset ) == 'number' ) {
    //Netscape compliant
    scrOfY = window.pageYOffset;
    scrOfX = window.pageXOffset;
  } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
    //DOM compliant
    scrOfY = document.body.scrollTop;
    scrOfX = document.body.scrollLeft;
  } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
    //IE6 standards compliant mode
    scrOfY = document.documentElement.scrollTop;
    scrOfX = document.documentElement.scrollLeft;
  }
  return {x:scrOfX, y:scrOfY};
}

NajarIMGViewer.prototype.setViewerSize = function () {

    // *** Set the size of the viewer
    // *** ie
    if (this.imgPicture.getAttribute("width")) {
        this.viewerWidth   = parseInt(this.imgPicture.getAttribute("width"));
        this.viewerHeight  = parseInt(this.imgPicture.getAttribute("height"));
    } else {
    // firefox, chrome
        this.viewerWidth  = this.imgPicture.width;
        this.viewerHeight = this.imgPicture.height;
    }

    // *** The Text
    // var text = document.getElementById("textinfo");
    // text.innerHTML  = imgText +  '<br/><p class="credit">Visor de imagenes por Fermin J. Najar</p>';

    // *** If the viewer is bigger than the viewport,
    // *** resize the viewer
    var old = 0;
    if (parseInt(this.getClientHeight()) <= parseInt(this.viewerHeight) ) {
        old = this.viewerHeight;
        this.viewerHeight = this.getClientHeight() - 100;
        this.viewerWidth  = (this.viewerWidth * (this.getClientHeight() - 100)) / old;

    } else if ( this.minViewerWidth > parseInt(this.viewerHeight) ) {
        old = this.viewerWidth;
        this.viewerWidth = this.minViewerWidth;
        this.viewerHeight  = (this.viewerHeight * this.minViewerWidth) / old;
    }
    
    this.divViewer.style.width  = this.viewerWidth  + "px";
    this.divViewer.style.height = this.viewerHeight + "px";

}

NajarIMGViewer.prototype.getClientWidth = function () {
  return document.compatMode=='CSS1Compat' &&
      ! window.opera ? document.documentElement.clientWidth : document.body.clientWidth;
}

NajarIMGViewer.prototype.getClientHeight = function () {
  return document.compatMode== 'CSS1Compat' &&
      !window.opera ? document.documentElement.clientHeight : document.body.clientHeight;
}


NajarIMGViewer.prototype.fadeIn = function (obj, limit, opacity, callback) {
   var that = this;
   if (!opacity) {

        obj.style.filter  = "alpha(opacity=0)";
        obj.style.opacity = 0;
        obj.style.display = "block";
        obj.style.visibility = "visible";
        setTimeout( function() {
            that.fadeIn(obj, limit, .1, callback);
        }, 100);
        return;
   }

   obj.style.filter = "alpha(opacity=" + opacity * 100 + ")";
   obj.style.opacity = opacity;


   if (opacity < limit) {
       setTimeout( function() {
               that.fadeIn(obj, limit, opacity + .1, callback);
       }, 10);
   } else if (callback) {

        callback ();
   }
}

NajarIMGViewer.prototype.fadeOut = function (obj, opacity, callback) {
   var that = this;
   if (!opacity) {
        setTimeout( function() {
            that.fadeOut(obj, obj.style.opacity - .1, callback);
        }, 100);
        return;
   }

   obj.style.filter = "alpha(opacity=" + opacity * 100 + ")";
   obj.style.opacity = opacity;

   if (opacity > 0) {
       setTimeout( function() {
               that.fadeOut(obj, opacity - .1, callback);
       }, 10);
   } else {

       obj.style.visibility = "hidden";
       obj.style.display = "none";
       if (callback)
            callback ();
   }

}
var zoom;
window.onload = function () {
	 zoom = new NajarIMGViewer("http://localhost/joomla/plugins/content/zoom/");
}