var effectSpeed = 300;
    var deg = 30;
    var pausers;
    
    var agent = (Browser.Engine.gecko) ? 'Moz' : ((Browser.Engine.webkit) ? 'Webkit' : '');
    
    var newStyles = new Hash({ 'webkitTransform': 'skew(@deg, @deg)', 'MozTransform': 'skew(@deg, @deg)', });
        $extend(Element.Styles, newStyles);
    
    var objs = new Array;
    var els = getElementsByClassName("mainbubble");
    for(var x=0; x<els.length; x++){
        var el = els[x];
        var id = el.getAttribute("id");
        objs[id] = new Flipcard(el);
        el.onmouseover = function(){ objs[this.getAttribute("id")].triggerOpen(); }
        el.onmouseout = function(){ objs[this.getAttribute("id")].triggerClose(); }
    }
    
    function loadWebKit(){
        var newStyles = new Hash({ 'webkitTransform': 'skew(@deg, @deg)' });
        $extend(Element.Styles, newStyles);
        var elements = $("main").getElements(tClass);
        
        // elements.setStyle("left", "0px");
        $("main").getElements(tClass).each(function(item, index){
            var currentStyles = item.getStyles("position", "left", "width", "height", "top");
            var toggle = false;
            var openable = true;
            var closeable = false;
            item.setStyle('webkitTransform','skew(0deg, 0deg)');
            
            item.enableClose = function(){ closeable = true; }
            item.enableOpen = function(){ openable = true; }
            
            item.addEvent('mouseover', function(){
                if(!toggle&&openable==true){
                    var extraT = 0;
                    var extraP = 0;
                    /* if(this.id == "flip4"){ extraT = 150; extraP = 500; } */  // Can set special anim speed for certain elements
                             
                    this.setStyle("overflow", "hidden");
                    var tp = this;
                    this.set('morph', {duration: effectSpeed+extraT, transition: 'Sine:in', onComplete: function(){
                        toggle = true;
                        item.addClass("toggle");
                        
                        tp.setStyle('webkitTransform','skew(0deg, -'+deg+'deg)');
                        tp.set('morph', {duration: effectSpeed+extraT, transition: 'Sine:out', onComplete: function(){ }  });
                        tp.morph({
                            'width': currentStyles.width,
                            'left': currentStyles.left, 
                            'webkitTransform': 'skew(0deg, 0deg)'
                        });  
                    }});
                    
                    this.morph({
                        'width': 0,
                        'left': parseInt(currentStyles.width)/2 + parseInt(currentStyles.left)+extraP, 
                        'webkitTransform': 'skew(0deg, 20deg)'
                    });
                    openable = false;
                    setTimeout(item.enableClose(),effectSpeed);
                }
            });
            
            item.addEvent('mouseout', function(){
                if(toggle&&closeable==true){
                    var extraT = 0;
                    var extraP = 0;
                    /* if(this.id == "flip4"){ extraT = 150; extraP = 500; } */  // Can set special anim speed for certain elements
                             
                    this.setStyle("overflow", "hidden");
                    var tp = this;
                    this.set('morph', {duration: effectSpeed+extraT, transition: 'Sine:in', onComplete: function(){
                        toggle = false;
                        item.removeClass("toggle");
                        
                        tp.setStyle('webkitTransform','skew(0deg, -20deg)');
                        tp.set('morph', {duration: effectSpeed+extraT, transition: 'Sine:out', onComplete: function(){ }  });
                        tp.morph({
                            'width': currentStyles.width,
                            'left': currentStyles.left, 
                            'webkitTransform': 'skew(0deg, 0deg)'
                        });  
                    }});
                    
                    this.morph({
                        'width': 0,
                        'left': parseInt(currentStyles.width)/2 + parseInt(currentStyles.left)+extraP, 
                        'webkitTransform': 'skew(0deg, 20deg)'
                    });
                    closeable = false;
                    setTimeout(item.enableOpen(),effectSpeed);
                }
            });
        });
    }
    
    function loadFox(){
        var newStyles = new Hash({ 'MozTransform': 'skew(@deg, @deg)' });
        $extend(Element.Styles, newStyles);
        var elements = $("main").getElements(tClass);
        elements.setStyle("MozTransform", "skew(0deg, 0deg)");
        
        $("main").getElements(tClass).each(function(item, index){
            var currentStyles = item.getStyles("position", "left", "width", "height", "top");
            var toggle = false;
            
            item.addEvent('mouseover', function(){
                var extraT = 0;
                var extraP = 0;
                /* if(this.id == "flip4"){ extraT = 150; extraP = 500; } */  // Can set special anim speed for certain elements
                this.setStyle("overflow", "hidden");
                var tp = this;
                this.set('morph', {duration: effectSpeed+extraT, transition: 'Sine:in', onComplete: function(){
                    toggle = true;
                    item.addClass("toggle");
                    
                    tp.setStyle('MozTransform','skew(0deg, -20deg)');
                    tp.set('morph', {duration: effectSpeed+extraT, transition: 'Sine:out', onComplete: function(){ }  });
                    tp.morph({
                        'width': currentStyles.width,
                        'left': currentStyles.left, 
                        'MozTransform': 'skew(0deg, 0deg)'
                    });  
                }});
                         
                this.morph({
                    'width': 0,
                    'left': parseInt(currentStyles.width)/2 + parseInt(currentStyles.left)+extraP, 
                    'MozTransform': 'skew(0deg, 20deg)'
                });  
            });
            
            item.addEvent('mouseout', function(){
                var extraT = 0;
                var extraP = 0;
                /* if(this.id == "flip4"){ extraT = 150; extraP = 500; } */  // Can set special anim speed for certain elements
                this.setStyle("overflow", "hidden");
                var tp = this;
                this.set('morph', {duration: effectSpeed+extraT, transition: 'Sine:in', onComplete: function(){
                    toggle = false;
                    item.removeClass("toggle");
                    
                    tp.setStyle('MozTransform','skew(0deg, -20deg)');
                    tp.set('morph', {duration: effectSpeed+extraT, transition: 'Sine:out', onComplete: function(){ }  });
                    tp.morph({
                        'width': currentStyles.width,
                        'left': currentStyles.left, 
                        'MozTransform': 'skew(0deg, 0deg)'
                    });  
                }});
                         
                this.morph({
                    'width': 0,
                    'left': parseInt(currentStyles.width)/2 + parseInt(currentStyles.left)+extraP, 
                    'MozTransform': 'skew(0deg, 20deg)'
                });  
            });
        });
    }
    
    
    
    function Flipcard(obj){
        this.obj = obj;
        this.flip = this.obj.childNodes[0];
        var t = this;
        
        this.anim_in = new Fx.Morph(this.flip, {
            duration: effectSpeed/2,
            onComplete: function(){
                setTimeout(function(){ t.anim2(); }, 10);
            }
        });
        this.anim_out = new Fx.Morph(this.flip, { duration: effectSpeed/2 })
        this.width = 186;
        
        this.catchTimer = null;
        
        this.flip.setAttribute("style","-webkit-transform: skew(0deg, 0deg); -moz-transform: skew(0deg, 0deg);");
        
        this.openable = true;
        this.closeable = false;
        this.mousehover = false;
        
        
        this.triggerOpen = function(){
            this.mousehover = true;
            this.open();
        }
        
        this.triggerClose = function(){
            this.mousehover = false;
            this.primeClose();
        }
        
        this.open = function(){
            clearTimeout(this.catchTimer);
            if(this.openable==true){
                this.openable = false;
                
                //Animate
                this.anim_in.start({"width": 0, "left": this.width/2, "webkitTransform": "skew(0deg, "+deg+"deg)", "MozTransform": "skew(0deg, "+deg+"deg)"});
                setTimeout(function(){ t.setCloseable(); },effectSpeed+50);
            }
        }
        
        this.primeClose = function(){
            if(this.closeable==true){
                this.catchTimer = setTimeout(function(){ t.close() }, 10);
            }
        }
        
        this.close = function(){
            this.closeable = false;
            
            //Animate
            this.anim_in.start({"width": 0, "left": this.width/2, "webkitTransform": "skew(0deg, -"+deg+"deg)", "MozTransform": "skew(0deg, -"+deg+"deg)"});
            setTimeout(function(){ t.setOpenable(); },effectSpeed+50);
        }
        
        this.setOpenable = function(){
            this.openable = true;
            if(this.mousehover==true){ this.open(); }
        }
        
        this.setCloseable = function(){
            this.closeable = true;
            if(this.mousehover==false){ this.close(); }
        }
        
        this.anim2 = function(){
            if(hasClass("toggle")){
                removeClass("toggle");
                this.flip.setAttribute("style","-webkit-transform: skew(0deg, "+deg+"deg); -moz-transform: skew(0deg, "+deg+"deg); width: 0px; left: "+(this.width/2)+"px;");
            }else{
                addClass("toggle");
                this.flip.setAttribute("style","-webkit-transform: skew(0deg, -"+deg+"deg); -moz-transform: skew(0deg, -"+deg+"deg); width: 0px; left: "+(this.width/2)+"px;")
            }
            this.anim_out.start({"width": this.width, "left": "0", "webkitTransform": "skew(0deg, 0deg)", "MozTransform": "skew(0deg, 0deg)",});
        }
        
        
        function hasClass(cls){ return t.obj.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)')); }
        function addClass(cls){ if(!hasClass(cls)){ t.obj.className += " "+cls; } }
        function removeClass(cls){
            if(hasClass(cls)){
                var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
                t.obj.className=t.obj.className.replace(reg,' ');
            }
        }
    }