Prototype.Browser = {  	
    IE:     !!(window.attachEvent && !window.opera), 
 	Opera:  !!window.opera, 
 	WebKit: navigator.userAgent.indexOf('AppleWebKit/') > -1, 
 	Gecko:  navigator.userAgent.indexOf('Gecko') > -1 && navigator.userAgent.indexOf('KHTML') == -1 
};


try {

 document.execCommand("BackgroundImageCache", false, true);

} catch(err) {}

StatsCards = function(container) {
    this.container = $(container);
    this.cards = this.container.getElementsByClassName("card");
    for (var i = 0; i < this.cards.length; i++)
    {
        this.cards[i].observe(Prototype.Browser.IE ? "mouseenter" : "mouseover", this.handleMouseOver.bindAsEventListener(this));
        this.cards[i].observe(Prototype.Browser.IE ? "mouseleave" : "mouseout", this.handleMouseOut.bindAsEventListener(this));
    }
    this.inProgress = {};
    
};


if (!Prototype.Browser.IE)
{
    StatsCards.prototype.handleMouseOut = function(event) {
        var rel = event.relatedTarget, cur = event.currentTarget;
	    if (rel && rel !== cur && !rel.descendantOf(cur)) {
            if (!cur.effect) {
                StatsCards.setCardVisible(false, cur);
            } else {
                cur.toggle = "out";
            }
	    }
    };
    StatsCards.prototype.handleMouseOver = function(event) {
        var rel = event.relatedTarget, cur = event.currentTarget;
	    if (rel && rel !== cur && !rel.descendantOf(cur)) {
            if (!cur.effect) {
                StatsCards.setCardVisible(true, cur);
            } else {
                cur.toggle = "over";
            }
	    }
    };
} else {
    StatsCards.prototype.handleMouseOut = function(event) {
        var cur = Event.element(event);
        if (!cur.effect) {
            StatsCards.setCardVisible(false, cur);
        } else {
            cur.toggle = "out";
        }
    };
    StatsCards.prototype.handleMouseOver = function(event) {
        var cur = Event.element(event);
        if (!cur.effect) {
            StatsCards.setCardVisible(true, cur);
        } else {
            cur.toggle = "over";
        }
    };
}


StatsCards.setCardVisible = function(visible, element)
{
    var handleFinish = function ()
        {
            this.effect = null;
            if (this.toggle == "over")
                StatsCards.setCardVisible(true, this);
            else if (this.toggle == "out")
                StatsCards.setCardVisible(false, this);
        };
    element.toggle = null;
    if (visible)
        element.effect = new Effect.DropOut(element.getElementsByClassName("image")[0],{afterFinish: handleFinish.bind(element) });
    else
        element.effect = new Effect.DropIn(element.getElementsByClassName("image")[0],{afterFinish: handleFinish.bind(element) });
};

Effect.DropIn = function(element) {
  element = $(element);
  var oldStyle = {
    top: "0px",
    left: "0px"/*,
     opacity: element.getInlineOpacity() */ };
  return new Effect.Parallel(
    [ new Effect.MoveBy(element, 100, 0, {sync: true }), 
      new Effect.Opacity(element, { sync: true, from: 0.0, to: 1.0 }) ],
    Object.extend(
      { duration: 0.5,
        beforeSetup: function(effect) {
          Element.setOpacity(effect.effects[0].element, 0,0);
          effect.effects[0].element.makePositioned();
          effect.effects[0].element.style.top = "-100px";
          effect.effects[0].element.show();
        },
        afterFinishInternal: function(effect) {
          effect.effects[0].element.show().setOpacity(1.0).undoPositioned().setStyle(oldStyle);
        } 
      }, arguments[1] || {}));
}