var SlideBox = Class.create({
    element: null,
    box: null,
    animation: null,
    startX: 0,
    startY: 0,
    finishX: 0,
    finishY: 0,
    duration: 1,
    initialize: function(e, options) {
        if(options) {
            this.startX = (options.startX?options.startX:this.startX);
            this.startY = (options.startY?options.startY:this.startY);
            this.finishX = (options.finishX?options.finishX:this.finishX);
            this.finishY = (options.finishY?options.finishY:this.finishY);
            this.duration = (options.duration?options.duration:this.duration);
        }
        this.element = e;
        this.box = this.element.select('div')[0];
        e.observe('mouseenter',this.handleMouseOver.bindAsEventListener(this));
    },
    handleMouseOver: function(e) {
        e.stop();
        if(this.animation) {this.animation.cancel();}
        this.element.stopObserving('mouseenter');
        this.element.observe('mouseleave',this.handleMouseOut.bindAsEventListener(this));
        this.animation = new Effect.Move(this.box, {x: this.finishX, y: this.finishY, mode: 'absolute', transition: Effect.Transitions.spring, duration: this.duration});
    },
    handleMouseOut: function (e) {
        e.stop();
        if(this.animation) {this.animation.cancel();}
        this.element.stopObserving('mouseleave');
        this.element.observe('mouseenter',this.handleMouseOver.bindAsEventListener(this));
        this.animation = new Effect.Move(this.box, {x: this.startX, y: this.startY, mode: 'absolute', transition: Effect.Transitions.spring, duration: this.duration});
    }
});

SlideBox.init = function(elements) {
    var projects = elements;
    projects.each(function(e) {
        new SlideBox(e, {startX: 0, startY: 143, duration: 0.5});
    });
};

var DoubleLink = Class.create({
    element: null,
    box: null,
    animation: null,
    duration: 1,
    initialize: function(e, options) {
        if(options) {
            this.duration = (options.duration?options.duration:this.duration);
        }
        this.element = e;
        this.box = this.element.select('div')[0];
        e.observe('mouseenter',this.handleMouseOver.bindAsEventListener(this));
    },
    handleMouseOver: function(e) {
        e.stop();
        if(this.animation) {this.animation.cancel();}
        this.element.stopObserving('mouseenter');
        this.element.observe('mouseleave',this.handleMouseOut.bindAsEventListener(this));
        this.animation = new Effect.Morph(this.box, {style: 'margin-top:-'+this.element.getHeight()+'px', duration: this.duration, transition: Effect.Transitions.spring});
    },
    handleMouseOut: function (e) {
        e.stop();
        if(this.animation) {this.animation.cancel();}
        this.element.stopObserving('mouseleave');
        this.element.observe('mouseenter',this.handleMouseOver.bindAsEventListener(this));
        this.animation = new Effect.Morph(this.box, {style: 'margin-top:0px', duration: this.duration});
    }
});

DoubleLink.init = function() {
    var links = $$('.doublelink');
    links.each(function(e) {
        new DoubleLink(e, {duration: 0.4});
    });
};

var WorkDetails = Class.create({
    duration: 0.5,
    mainBox: null,
    box: null,
    moreButton: null,
    animation: null,
    fadeAnimation: null,
    up: false,
    initialize: function(e,options) {
        if(options) {
            this.duration = (options.duration?options.duration:this.duration);
        }
        this.moreButton = e.select('.moreButton')[0];
        this.box = e.select('.moreProjectInfo')[0];
        this.mainBox = e;
        this.box.hide();
        this.mainBox.observe('mouseenter',this.handleMouseOver.bindAsEventListener(this));
        this.moreButton.observe('click',this.moreClickHandler.bindAsEventListener(this));
    },
    handleMouseOver: function(e) {
        e.stop();
        if(this.fadeAnimation) {this.fadeAnimation.cancel();}
        this.fadeAnimation = new Effect.Appear(this.box, ({duration: 0.3}));
        this.mainBox.stopObserving('mouseenter');
        this.mainBox.observe('mouseleave',this.handleMouseOut.bindAsEventListener(this));
    },
    handleMouseOut: function(e) {
        e.stop();
        if(this.animation) {this.animation.cancel();}
        this.mainBox.stopObserving('mouseleave');
        if(this.up) {
        this.animation = new Effect.Move(this.box, {
            x: 0, y: 220, mode: 'absolute', transition: Effect.Transitions.spring, duration: this.duration,
            afterFinish: function() {
                    this.up = false;
                    if(this.fadeAnimation) {this.fadeAnimation.cancel();}
                    this.fadeAnimation = new Effect.Fade(this.box, ({duration: 0.2}));
                }.bind(this)
            });
        } else {
            if(this.fadeAnimation) {this.fadeAnimation.cancel();}
            this.fadeAnimation = new Effect.Fade(this.box, ({duration: 0.2}));
        }
        this.mainBox.observe('mouseenter',this.handleMouseOver.bindAsEventListener(this));
    },
    moreClickHandler: function(e) {
        e.stop();
        if(this.animation) {this.animation.cancel();}
        this.up = true;
        this.animation = new Effect.Move(this.box, {x: 0, y: 0, mode: 'absolute', transition: Effect.Transitions.spring, duration: this.duration});
    }
});

WorkDetails.init = function(e) {
    var elements = e.select('li');
    elements.each(function(e) {
        new WorkDetails(e, {duration: 0.8});
    });
};

function writeimail() {
    var alias = "contacto";
    var domain = "bothmedia.com";
    document.write(alias+"@"+domain);
}

document.observe('dom:loaded', function() {
    var links = $$("a.blank");
    links.each(function(element) {
        element.observe('click',function(e) {
            window.open(element.href,'_blank');
            e.stop();
        });
    });
});

Cufon.replace('h2', { trim: 'simple' });
Cufon.replace('ul#works li h4', { trim: 'simple' });
Cufon.replace('div#whoweare', { trim: 'simple' });
Cufon.replace('ul.getintouch li', { trim: 'simple' });
Cufon.replace('div#casestudies h3', { trim: 'simple' });
Cufon.replace('.quote .reference', { trim: 'simple' });
Cufon.replace('div#freequote h3', { trim: 'simple' });