/*
 * PNG by using VML
 * Author: Egor Hmelyoff (hmelyoff@gmail.com)
 */

  .g-png {
    position: relative;
    overflow: hidden;
    zoom: expression(
      runtimeStyle.zoom = "1", /* one-time called expression, at the same time declare hasLayout */

      /* Load png here, using cache */
      this.PNGload = function( node ){

        if( !document.PNGcache ){
          try{ document.execCommand("BackgroundImageCache", false, true); } /* IE fix with background images cache */
          catch( error ){}
        
          document.PNGcache = new Array();
        }
      
        /* Check if image in cache */
        for( var i=0; i<document.PNGcache.length; i++ ){
          if( document.PNGcache[i].url == node.PNGsrc ){
            if( document.PNGcache[i].loaded ) node.PNGset(node, document.PNGcache[i]) /* fix when image in cache */
            else document.PNGcache[i].nodes.push(node); /* or put node to cache for initialize all in the same time */
            return;
          }
        }
        /* Or push new image to cache */
        document.PNGcache.push({ url: node.PNGsrc, nodes: [node], loaded: false });
        
        /* Call preload function on DOM ready, cause we need to modified DOM */
        (function(){
          if(document.ieReady){ // need CSS IE Ready Expression
            node.PNGpreload(node);
            return;
          }
          setTimeout(arguments.callee, 0);
        })();

      },

      /* Preload image for calculate dimensions */
      this.PNGpreload = function( node ){
        if( node.PNGsrc ){
          var $this = this;
          
          /* Create image node and set big negative left and top (if image too big) */
          var image = document.createElement("img");
          image.runtimeStyle.cssText = "behavior:none;position:absolute;left:-10000px;top:-10000px;border:none;";

          document.body.appendChild( image );
          image.onload = function() {
            var nodes;

            /* Looking for nodes in cache */
            for( var i=0; i<document.PNGcache.length; i++ ){
              if( document.PNGcache[i].url == node.PNGsrc ){
                nodes = document.PNGcache[i].nodes;
                break;
              }
            }
            
            /* Set dimensions of image */
            document.PNGcache[i].width = image.offsetWidth;
            document.PNGcache[i].height = image.offsetHeight;

            /* Initialize nodes with the same image */
            if( nodes ){
              for( var k=0; k<nodes.length; k++ ){
                node.PNGset(nodes[k], document.PNGcache[i])
              }
            }
            
            document.PNGcache[i].loaded = true;
            image.parentNode.removeChild(image);
          };
          image.src = node.PNGsrc; /* IE fix with onload event (src must be declared under onload event) */
        }
      },

      /* Set dimensions for node */
      this.PNGset = function( node, cache ){
        node.PNGvml.style.width = cache.width + "px";
        node.PNGvml.style.height = cache.height + "px";
        node.PNGinsert(node);
      },

      /* Insert VML with PNG */
      this.PNGinsert = function( node ){
        node.insertBefore(node.PNGvml, node.firstChild);
        node.PNGupdate(node);
      },

      /*
        Declare basic events:
          — mouse over
          — mouse out
          — propery change for all parent nodes (reaction for class changes)
       */
      this.PNGbindevents = function(node){
        node.attachEvent('onmouseenter', function( event ){
          var node = event.srcElement;
          setTimeout(function() { node.PNGupdate(node); }, 1);
        });

        node.attachEvent('onmouseleave', function( event ){
          var node = event.srcElement;
          setTimeout(function() { node.PNGupdate(node); }, 1);
        });

        node.attachEvent('onpropertychange', this.PNGpropertychange);

        var parent = node;
        while( parent = parent.parentNode ){
          if( parent )
            parent.attachEvent('onpropertychange', function( event ){
            node.PNGpropertychange(event, node);
          })
        }
      },

      /* If node change class property -> update */
      this.PNGpropertychange = function( event, node ){
        if(event.propertyName == 'className'){
          var node = node ? node : event.srcElement;
          setTimeout(function() { node.PNGupdate(node); }, 1); 
        }
      },
    
      this.PNGupdate = function( node ){
        var $this = this;

        var image = node.getElementsByTagName("image")[0];

        if(image){
          image.style.position = "absolute";
          image.style.display = "block";
          image.style.zIndex = "-1";
          image.style.fontSize = "0";

          var imageX = node.currentStyle.backgroundPositionX;
          if(imageX != "right"){
            image.style.left = imageX != 'left' ? imageX : 0;
            image.style.right = "auto";
          } else {
            image.style.left = "auto";
            image.style.right = 0;
          }

          var imageY = node.currentStyle.backgroundPositionY;
          if(imageY != "bottom"){
            image.style.top = imageY != "top" ? imageY : 0;
            image.style.bottom = "auto";
          } else {
            image.style.top = "auto";
            image.style.bottom = 0;
          }
        }
      },
    
      this.PNGvml = document.createElement("v:image"),
      this.PNGsrc = currentStyle.backgroundImage.replace(/[^'"]*"?'?([^'"]*).*/, "$1"),
      this.PNGvml.src = this.PNGsrc,

      this.PNGload(this),
      this.PNGbindevents(this),

      runtimeStyle.backgroundImage = "none" /* remove background */
    );
  }

/* PNG by using VML (end) */