ImageUtil = function(imageId, containerId){
  ImageUtil.logger.debug("Instance initiation started");
  this.oImage = document.getElementById(imageId);
  this.oContainers = new Array();
  this.oContainerIndexes = new Object();
  
  this.oContainers[0] = document.getElementById(containerId);
  
  this.initializeCanvas = function() {
    ImageUtil.logger.debug("Initializing canvas");
    var oCanvas = document.createElement("canvas");
    try {
      oCanvas.getContext('2d');
      oCanvas.setAttribute("width", this.oImage.width);
      oCanvas.setAttribute("height", this.oImage.height);
      ImageUtil.logger.debug("Canvas object created");
      
      ImageUtil.logger.debug("Object will be saved to oContainerIndexes[" + this.oContainers.length +"]");
      this.oContainerIndexes["canvas"] = this.oContainers.length;

      ImageUtil.logger.debug("Object's parentid [" + this.oContainers.length-1 +"]");
      this.oContainers[this.oContainers.length-1].appendChild(oCanvas);

      this.oContainers[this.oContainers.length] = oCanvas;
    } catch(e) {
      ImageUtil.logger.debug("Canvas is not supported by the browser");
      //Canvas is not a special object, assuming IE 
    }
  }
  
  this.createDiv = function(purpose) {
    ImageUtil.logger.debug("Creating DIV");
    var oSpan = document.createElement("DIV");
    oSpan.id = purpose;
    oSpan.style.width = this.oImage.width +"px"; 
    oSpan.style.height = this.oImage.height +"px"; 
    ImageUtil.logger.debug("Object will be saved to oContainerIndexes[" + this.oContainers.length +"]");
    this.oContainerIndexes[purpose] = this.oContainers.length;
    
    ImageUtil.logger.debug("Appending to object with id: " + this.oContainers[0].id);
    
    //Append to the top Container
    this.oContainers[0].appendChild(oSpan);
    if (this.oContainers.length > 1) {
      //We have registered containers, de-register the top sub-container
      var subContainer = this.oContainers[this.oContainers.length - 1]
      this.oContainers[0].removeChild(subContainer);
      oSpan.appendChild(subContainer);

    } else {
      //No registered container available
      this.oImage.parentNode.appendChild(oSpan);
      this.oImage.parentNode.removeChild(this.oImage);
      oSpan.appendChild(this.oImage);
    }
    this.oContainers[this.oContainers.length] = oSpan;
    
  }
  
  this.loadTransparentImage = function () {
    if (typeof this.oContainerIndexes["loadPNG_"+ this.oImage.src] == "undefined") {
      this.createDiv("loadPNG_"+ this.oImage.src);
    }
    var sFilter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.oImage.src + "', sizingMethod='scale');";
    ImageUtil.logger.debug(sFilter);
    this.oContainers[this.oContainerIndexes["loadPNG_"+ this.oImage.src]].style.filter = sFilter;
    this.oImage.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=0);";
    
    //alert(this.oContainers[this.oContainerIndexes["loadPNG_"+ this.oImage.src]].style.filter);
    //this.oContainers[this.oContainerIndexes["loadPNG_"+ this.oImage.src]].style.backgroundColor="#FF0000";
  }
  
  this.rotate = function(degree) {
      // Works for Firefox 2, Safari 3, Opera 9.5b2; (No: Opera 9.27)
      if (typeof this.oContainerIndexes["canvas"] == "undefined") {
        this.initializeCanvas();
      }
      
      if (typeof this.oContainerIndexes["canvas"] != "undefined") {
        this.oImage.style.display = "none";
        var oCanvasContext = this.oContainers[this.oContainerIndexes["canvas"]].getContext('2d');
        oCanvasContext.save();
        oCanvasContext.translate(this.oImage.width / 2, this.oImage.height / 2);
        
        oCanvasContext.rotate(degree * Math.PI / 180);
        oCanvasContext.clearRect(-this.oImage.width / 2, -this.oImage.height / 2 , this.oImage.width, this.oImage.height);
        oCanvasContext.drawImage(this.oImage, -this.oImage.width / 2, -this.oImage.height / 2 , this.oImage.width, this.oImage.height);
        oCanvasContext.restore();
      } else {
        if (typeof this.oContainerIndexes["rotate"] == "undefined") {
          ImageUtil.logger.debug("Could not find rotate layer (span), creating one.");
          this.createDiv("rotate");
        }
        
        ImageUtil.logger.debug("Preparing for matrix transformation");
        var rad = ((degree * Math.PI) / 180).toFixed(3);
        var sin = Math.sin(rad);
        var cos = Math.cos(rad);
        var x0 = this.oImage.width / 2;
        var y0 = this.oImage.height / 2;
        var sFilter = "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='clip to original'" + ", M11=" + cos + ", M12=" + (-sin) + ", M21=" + sin + ", M22=" + cos + ", DX=" + (x0 + sin * y0 - cos * x0) + ", DY=" + (y0 - cos * y0 - sin * x0) + ")";
        ImageUtil.logger.debug("Filter: " + sFilter);
        
        this.oContainers[this.oContainerIndexes["rotate"]].style.filter = sFilter;
    }
  
  }
}
ImageUtil.logger = Logger.getLogger("ImageUtil");