var Tansition = Class.create(meltmedia.CustomEvent,{
   initialize: function(){
     //console.info('initialize transition');
   },
   
   fade: function(oldElement, newElement) {
     this.fire("transition:start");
     new Effect.Morph(oldElement, {
         style: {
           opacity: "0"
         },
         duration: .5,
         transition: Effect.Transitions.sinoidal,
         afterFinish: function() {
           this.swap(oldElement, newElement);

           oldElement.appear({
             afterFinish: function() {
               this.fire("transition:finish",newElement.id);
             }.bind(this)
           });
         }.bind(this)
     });
   },
   
   fastFade: function(oldElement, newElement) {
     this.fire("transition:start");
     new Effect.Morph(oldElement, {
         style: {
           opacity: "0"
         },
         duration: .2,
         transition: Effect.Transitions.sinoidal,
         afterFinish: function() {
           this.swap(oldElement, newElement);

           oldElement.appear({
             afterFinish: function() {
               this.fire("transition:finish",newElement.id);
             }.bind(this)
           });
         }.bind(this)
     });
   },
/*
   slideFade: function(oldElement, newElement) { 
     this.fire("transition:start");
     var h = newElement.getStyle("height");
     if(h.match("0px") || !h) {
       var s = newElement.className.match(/(.*)-blob/)[1];
       s = s.toUpperCase()+"_BLOB";
       h = this.styles[s];
     }
     conosle.info('aa');
     new Effect.Morph(oldElement, {
         style: {
           opacity: "0",
           height: h
         },
         duration: .5,
         transition: Effect.Transitions.sinoidal,
         afterFinish: function() { 
           this.animation.transition.swap(oldElement, newElement);
           oldElement.appear({
               afterFinish: function() { console.info('fini');
                 this.currentState = this.states.READY;
                 this.fire("transition:finish");
               }
             });
         }
       });
   },
   */
   blind: function(oldElement, newElement){
      this.fire("transition:start");
      var id = oldElement.id;
      new Effect.BlindUp(id,{
        duration: .3,
        afterFinish: function(el){
          this.swap(oldElement, newElement);
          new Effect.BlindDown(id,{
            duration: 0.4,
            afterFinish: function() {
               this.fire("transition:finish",newElement.id);
             }.bind(this)           
          });
        }.bind(this)
      });
      
   },
   /*
   blind: function(oldElement, newElement) {
     this.fire("transition:start");
     if(oldElement.hasClassName("closed") && newElement.hasClassName("open")) {
       new Effect.Morph(oldElement, {
           beforeStart: function(effect) {
             oldElement.makeClipping();
             this.animation.transition.swap(oldElement, newElement);
             oldElement.setStyle({ 
                 height: "0px",
                   display: "block"
                   });
           },
           afterFinishInternal: function() {
             oldElement.undoClipping();

           },
           duration: .5,
           transition: Effect.Transitions.sinoidal,
           style: {
             opacity: "1",
             height: "45px"
           }
         });

     } else if(oldElement.hasClassName("open") && newElement.hasClassName("closed")) {
       new Effect.Morph(oldElement, {
           beforeStart: function(event) {
             oldElement.makeClipping();
           },
           afterFinishInternal: function() {
             oldElement.undoClipping();
           },
           afterFinish: function() {
             this.animation.transition.swap(oldElement, newElement);
           },
           duration: .5,
           transition: Effect.Transitions.sinoidal,
           style: {
             opacity: "1",
             height: "0px"
           }
         });
     } else {
       this.animation.transition.swap.bind(this)(oldElement, newElement);
     }
   },
*/
   swap: function(oldElement, newElement) {
     for(var i=0;i<newElement.attributes.length;i++) {
       if(newElement.attributes[i].nodeName == "class") {
         if(newElement.className != "") {
           oldElement.className = newElement.className;
         } else {
           oldElement.removeAttribute("class");
         }
       }
       if(newElement.attributes[i].nodeName == "style") continue;
       oldElement.setAttribute(newElement.attributes[i].nodeName, newElement.attributes[i].nodeValue);
     }

     for(var i=0;i<oldElement.attributes.length;i++) {
       if(!newElement.hasAttribute(oldElement.attributes[i].nodeName)) {
         if(oldElement.attributes[i].nodeName == "style") continue;
         oldElement.removeAttribute(oldElement.attributes[i].nodeName);
       }
     }
    
     oldElement.innerHTML = newElement.innerHTML;

     this.fire("transition:finish",newElement.id);

   },
   
   pSwap: function(oldElement,newElement){ 
     this.fire("transition:start");
     this.swap(oldElement, newElement);
   }
 
   
});