/**
    Document   : SlideShow.js
    Author     : Pierre FEVRIER
    Description: Classe permettant d'animer le menu du site
 */

/**
    Procédure SlideShow

    Initialise et met en cache les différents éléments du menu
 */
function SlideShow (parentObject)
{
    this.parent             = parentObject;
    this.btn                = document.getElementById('boutonMenu');
    this.btn_style          = this.btn.style;
    this.btn_style_bg       = document.getElementById('boutonMenuGauche').style;
    this.btn_init_pos       = this.btn_current_pos      = parseInt(this.btn.style.left.replace("px",""));
    this.btn_init_larg      = this.btn_current_larg     = parseInt(this.btn.style.width.replace("px",""));
    this.active_menu        = document.getElementById('hover').firstChild;
    this.colors             = new Array ('#000000', '#101010', '#262626', '#424242', '#60605f', '#7f7f7f', '#a0a09f', '#bebdbd', '#d8d8d8', '#efefef', '#ffffff');
    this.is_resized         = false;

    this._init_evts ('accueil', -17, 135);
    this._init_evts ('creations', 84, 160);
    this._init_evts ('cv', 210, 99);
    this._init_evts ('contact', 275, 143);
    this._init_evts ('blog', 385, 111);
    this._init_evts ('a-propos', 461, 153);
}

    /**
        Procédure _init_evts

        Initialise les évênements onmouseover et onmouseout du menu passé en paramètre
     */
    SlideShow.prototype._init_evts = function(menu_id, pos, larg)
    {
        var currentMenu = document.getElementById(menu_id);
        currentMenu.onmouseover = function() {clearTimeout(ctl.menu.timer);ctl.menu.is_resized = false;ctl.menu._change_color(ctl.menu.active_menu, 0);ctl.menu.init_slide(this, pos, larg, 'focus');}
        currentMenu.onmouseout = function() {clearTimeout(ctl.menu.timer);ctl.menu.is_resized = false;ctl.menu._change_color(this, 0);ctl.menu.init_slide(this, ctl.menu.btn_init_pos, ctl.menu.btn_init_larg, 'blur');}
        currentMenu.onclick = function () {clearTimeout(ctl.menu.timer);ctl.ajax.set_anchor(menu_id+'.html');return false;}
    }

    /**
        Procédure _change_color

        Change la couleur du menu passé en paramètre
     */
    SlideShow.prototype._change_color = function(menu, stage)
    {
        menu.style.color = this.colors[stage];
    }

    /**
        Procédure init_slide

        Initialise les paramètres permettant de faire slider le menu
     */
    SlideShow.prototype.init_slide = function(menu, pos, larg, event)
    {
        var px = 0;

        if (pos > this.btn_current_pos) // Si on slide vers la droite
        {
          px = pos - this.btn_current_pos;
          this._to_right(menu, pos, larg, px, event);
        }
        else if (pos < this.btn_current_pos) // Sinon si on slide vers la gauche
        {
          px = this.btn_current_pos - pos;
          this._to_left(menu, pos, larg, px, event);
        }
        else if (event == 'focus' && pos == this.btn_init_pos) // Sinon si on slide vers la position initiale
        {
            this._change_color (this.active_menu, 10);
        }
        else
        {
          event == 'focus' ? this._change_color (menu, 10) : this._change_color (this.active_menu, 10);
        }
    }

    /**
        Procédure _to_right

        Calcul la nouvelle position du menu en sachant qu'il faut slider
        vers la droite
     */
    SlideShow.prototype._to_right = function(menu, pos, larg, px, event)
    {
        if (! this.is_resized) this._resize (larg);

        if (px > 20)
        {
          this.btn_current_pos += (px < 40) ? (px-20) : 20;
          this.btn_style.left = this.btn_current_pos+"px";
          this._set_timer (menu, pos, larg, event);
        }
        else if (px > 10)
        {
          this.btn_current_pos += 1;
          this.btn_style.left = this.btn_current_pos+"px";
          var newColor = 10-(px-11);
          event == 'focus' ? this._change_color (menu, newColor) : this._change_color (this.active_menu, newColor);
          this._set_timer (menu, pos, larg, event);
        }
        else if (px > 0)
        {
          this.btn_current_pos += 1;
          this.btn_style.left = this.btn_current_pos+"px";
          this._set_timer (menu, pos, larg, event);
        }
        else
        {
            clearTimeout(this.timer);
        }
    }

    /**
        Procédure _to_left

        Calcul la nouvelle position du menu en sachant qu'il faut slider
        vers la gauche
     */
    SlideShow.prototype._to_left = function(menu, pos, larg, px, event)
    {
        if (! this.is_resized) this._resize (larg);

        if (px > 20)
        {
          this.btn_current_pos -= (px < 40) ? (px-20) : 20;
          this.btn_style.left = this.btn_current_pos+"px";
          this._set_timer (menu, pos, larg, event);
        }
        else if (px > 10)
        {
          this.btn_current_pos -= 1;
          this.btn_style.left = this.btn_current_pos+"px";
          var newColor = 10-(px-11);
          event == 'focus' ? this._change_color (menu, newColor) : this._change_color (this.active_menu, newColor);
          this._set_timer (menu, pos, larg, event);
        }
        else if (px > 0)
        {
          this.btn_current_pos -= 1;
          this.btn_style.left = this.btn_current_pos+"px";
          this._set_timer (menu, pos, larg, event);
        }
        else
        {
            clearTimeout(this.timer);
        }
    }

    /**
        Procédure _resize

        Calcule la taille finale du menu et applique progressivement
        les redimensionnements pour que l'effet soit invisible
     */
    SlideShow.prototype._resize = function(larg)
    {
        var px = 0;
        if (larg > this.btn_current_larg) // S'il faut agrandir le bouton
        {
            px = larg-this.btn_current_larg;
            if (px > 40)
            {
                this.btn_current_larg +=  20;
            }
            else if (px > 10)
            {
                px < 15 ? this.btn_current_larg += (px-10) : this.btn_current_larg += 5;
            }
            else if (px > 0)
            {
                this.btn_current_larg += 1;
            }
            this.btn_style.width = this.btn_current_larg+"px";
            this.btn_style_bg.width = (this.btn_current_larg-43)+"px";
        }
        else if (larg < this.btn_current_larg) // Sinon s'il faut le rétrécir
        {
            px = this.btn_current_larg-larg;

            if (px > 40)
            {
                this.btn_current_larg -=  20;
            }
            else if (px > 10)
            {
                px < 15 ? this.btn_current_larg -= (px-10) : this.btn_current_larg -= 5;
            }
            else if (px > 0)
            {
                this.btn_current_larg -= 1;
            }
            this.btn_style.width = this.btn_current_larg+"px";
            this.btn_style_bg.width = (this.btn_current_larg-43)+"px";
        }
        else
        {
            this.is_resized = true;
        }
    }

    /**
        Procédure _set_timer

        Espace chaque calcul de position de 10 ms pour soulager le CPU (tic toc tic toc...)
     */
    SlideShow.prototype._set_timer = function(current_menu, pos, larg, event)
    {
        this.timer = setTimeout(function () {ctl.menu.init_slide(current_menu, pos, larg, event);},10);
    }

    /**
        Procédure change_target

        Change le menu sélectionné par défaut
     */
    SlideShow.prototype.change_target = function(menu, pos, larg)
    {
        clearTimeout(this.timer);
        this.is_resized = false;

        document.getElementById('hover').id = '';
        menu.parentNode.id = 'hover';

        this.btn_init_pos = pos;
        this.btn_init_larg = larg;
        this.init_slide(menu, pos, larg, 'focus');

        this._change_color(this.active_menu, 0);
        this._change_color(menu, 10);

        this.active_menu = document.getElementById('hover').firstChild;
        document.getElementById('hover').firstChild.blur();
    }