//Inicializacion de variables globales
Hexadecimales = new ConstruirArreglo(16);

for(var indice = 0; indice < 10; indice++)
    Hexadecimales[indice] = indice;

Hexadecimales[10] = "a";
Hexadecimales[11] = "b";
Hexadecimales[12] = "c";
Hexadecimales[13] = "d";
Hexadecimales[14] = "e";
Hexadecimales[15] = "f";

/**
 * Construye un arreglo del tamano indicado
 *
 * @param tamano Tamano inicial del arreglo
 */
function ConstruirArreglo(tamano)
{
    this.length = tamano;

    for(var indice = 1; indice <= tamano; indice++)
        this[indice] = 0;

    return this;
}

/**
 * Contiene el valor indicado a base16
 *
 * @param valor Valor que se convertir? a base 16
 */
function ObtenerHexadecimal(valor)
{
    if (valor < 0)
        return "00";
    else
    {
         if (valor > 255)
            return "ff";
        else
            return "" + Hexadecimales[Math.floor(valor/16)] + Hexadecimales[valor%16];
    }
}

function int2Hex(valor)
{
    if (valor < 0)
        return "00";
    else
    {
         if (valor > 255)
            return "ff";
        else
            return "" + Hexadecimales[Math.floor(valor/16)] + Hexadecimales[valor%16];
    }
}

function ColorHTML(r, g, b)
{
    var hr = int2Hex(r);
    var hg = int2Hex(g);
    var hb = int2Hex(b);

    return "#"+hr+hg+hb;
}

function AnimarCambioColor(me, rOriginal, gOriginal, bOriginal, rObjetivo, gObjetivo, bObjetivo, incremento, delay)
{
    if (rOriginal == rObjetivo && gOriginal == gObjetivo  && bOriginal == bObjetivo )
        return;

    if (rOriginal < rObjetivo)
    {
        rOriginal = rOriginal + incremento;
        if (rOriginal > rObjetivo)
           rOriginal = rObjetivo;
    }
    else if (rOriginal > rObjetivo)
    {
        rOriginal = rOriginal - incremento;
        if (rOriginal < rObjetivo)
            rOriginal = rObjetivo;
    }

    if (gOriginal < gObjetivo)
    {
        gOriginal = gOriginal + incremento;
        if (gOriginal > gObjetivo)
           gOriginal = gObjetivo;
    }
    else if (gOriginal > gObjetivo)
    {
        gOriginal = gOriginal - incremento;
        if (gOriginal < gObjetivo)
            gOriginal = gObjetivo;
    }

    if (bOriginal < bObjetivo)
    {
        bOriginal = bOriginal + incremento;
        if (bOriginal > bObjetivo)
           bOriginal = bObjetivo;
    }
    else if (bOriginal > bObjetivo)
    {
        bOriginal = bOriginal  - incremento;
        if (bOriginal < bObjetivo)
            bOriginal = bObjetivo;
    }

    me.style.backgroundColor = ColorHTML(rOriginal, gOriginal, bOriginal);
    setTimeout(function(){AnimarCambioColor(me, rOriginal, gOriginal, bOriginal, rObjetivo, gObjetivo, bObjetivo, incremento, delay)}, delay);
}


$(document).ready(function() {
    $('input:text').blur(
        function () {
            AnimarCambioColor(this, 206, 223, 251, 255, 255, 255,1,10);
        });

     $('input:text').focus (
        function () {
            AnimarCambioColor(this, 255, 255, 255, 206, 223, 251,1,10);
        });

        $('input:password').blur(
        function() {
            AnimarCambioColor(this, 206, 223, 251, 255, 255, 255, 1, 10);
        });

        $('input:password').focus(
        function() {
            AnimarCambioColor(this, 255, 255, 255, 206, 223, 251, 1, 10);
        });   
});