var Colors = new Object();

Colors.getTransitionColor = function(color1, color2, progress) {
    var result = '';
    for (var i = 0; i < 3; i++) {
        var value1 = parseInt(color1.substring(0, 2), 16);
        color1 = color1.substring(2);
        var value2 = parseInt(color2.substring(0, 2), 16);
        color2 = color2.substring(2);
        var value = Math.round((value1 * (1.0 - progress)) + (value2 * progress));
        value = value.toString(16);
        while (value.length < 2) {
            value = '0' + value;
        }
        result += value;
    }
    return result;
};

var HandledEffect = function() {
    this.velocity = 1;
    this.position = 0;
};

HandledEffect.engaged = $A([]);

HandledEffect.tick = function(pe) {
    var continuing = $A([]);
    for (var i = 0; i < HandledEffect.engaged.length; i++) {
        var effect = HandledEffect.engaged[i];
        if (!effect.isIdle) {
            effect.update();
        }
        if (effect.isEngaged) {
            continuing.push(effect);
        }
    }
    HandledEffect.engaged = continuing;
    if (HandledEffect.engaged.length == 0) {
        pe.stop();
        HandledEffect.executer = null;
    }
};

HandledEffect.startTicking = function() {
    if (!HandledEffect.executer) {
        HandledEffect.executer = new PeriodicalExecuter(HandledEffect.tick, 0.05);
    }
};

HandledEffect.prototype.start = function() {
    this.startTime = new Date().getTime();
    this.startPosition = this.position;
    this.isEngaged = true;
    this.isIdle = false;
    HandledEffect.engaged.push(this);
    HandledEffect.startTicking();
};

HandledEffect.prototype.update = function() {
    var now = new Date().getTime();
    var elapsed = now - this.startTime;
    this.position = this.startPosition + (elapsed * this.velocity / 1000);
    if (this.position >= 1) {
        this.position = 1;
    } else if (this.position <= 0) {
        this.position = 0;
    }
    this.render();
    if (this.position == 1 && this.velocity > 0) {
        this.isIdle = true;
    } else if (this.position == 0 && this.velocity < 0) {
        this.isIdle = true;
        this.isEngaged = false;
    }
    if (this.position == 0 || this.position == 1) {
        if (this.afterFinish) {
            this.afterFinish();
        }
    }
};

HandledEffect.prototype.pause = function() {
    this.isIdle = true;
}

HandledEffect.prototype.render = function() {
    
};

NavListener = new Object();
NavListener.effects = $H({});
NavListener.observe = function(element) {
    if(!$(element)) {
        return;
    }
    NavListener.effects[element] = new HandledEffect();
    NavListener.effects[element].render = function () {
        $(element).style.color = '#' + Colors.getTransitionColor('E10F78', '000065', this.position);
    }
    Event.observe($(element), 'mouseout', function () {
        NavListener.effects[element].velocity = 1;
        NavListener.effects[element].start();
    });
    Event.observe($(element), 'mouseover', function () {
        NavListener.effects[element].pause();
        NavListener.effects[element].position = 0;
        NavListener.effects[element].render();
    });
}