/*-----------------------------------------------------------------------------
  [JS - Directory - annuaire]

    1. Définition de la classe directory
    2. Initialisation
    3. Création du markup
    	3.1 Création du Menu alphabet 
        3.2 Récupération des utilisateurs en json
        3.3 Création du markup pour chaque utilisateur 
        3.4 Création de la Pagination
    4. Evènement lors du click sur un utilisateur
    5. Evènement pour le choix du type de vue (text ou poster)
    6. Tooltip
    7. Evenement de fermeture de la fenetre utilisateur
    8. Affichage d'un utilisateur
    9. Rechargement des utilisateurs
    10. Filtre, recherche des utilisateurs
    11. Tri, ordre des utilisateurs
    12. Déplacement dynamique du menu alphabet
    13. Effet over sur les images avatars
    14. Reload
    15. DomReady

-----------------------------------------------------------------------------*/


/*-----------------------------------------------------------------------------
  [1. Définition de la classe directory]
*/

var directory = new Class({
    Implements: [Options, Events],
    options: {
        limit: 50,
        offset: 0,
        url: false
    },
    

/*-----------------------------------------------------------------------------
  [2. Initialisation]
*/
   initialize: function(options) {

    	var dir = this;
        if (options)
        {
            this.setOptions(options);
        }
        if (!this.options.url)
            this.options.url = this.options.id;
        if (this.options.limit)
        {
            this.options.url += '/(limit)/' + this.options.limit;
        }
        if (this.options.offset)
        {
            this.options.url += '/(offset)/' + this.options.offset;
        }
        this.createHtml(dir);
    },


/*-----------------------------------------------------------------------------
  [3. Création du markup]
*/
    createHtml: function(dir) {
        var ul = $('profiles');
        var users = [];
 
        /*-----------------------------------------------------------------------------
			[3.1 Création du Menu alphabet]
         */

        if(!$chk($('menu-alphabet'))) {
			var ul_alphabet = new Element('ul', {'id': 'menu-alphabet', 'class': 'alphabet', 'style': 'position:relative;'});
			/** Markup Menu alphabet  */
			var li_letter = new Array();
			for (var i = 65; i <= 90; i++)
			{
				var l = String.fromCharCode(i);
				li_letter[i] = new Element('li', {'html': '<a rel="' + l + '" href="#">' + l + '</a>'});
				ul_alphabet.grab(li_letter[i]);
			}
			$('users-list').grab(ul_alphabet, 'top');
			
			/** Evenements au click d'une lettre */
			$$('#menu-alphabet a').addEvent('click', function(e) {
				e.stop();
				$$('#menu-alphabet a.active').removeClass('active');
				this.addClass('active');
				var letter = this.get('html');
				replaceUsers();
				return false;
			});
        }
        
	    /*-----------------------------------------------------------------------------
			[3.2 Récupération des utilisateurs en json]
	    */

        var json = new Request.JSON({
            url: uriBase + 'ez_directory/list/' + this.options.url,
            onRequest: function() {
                var loading = new Element('li', {'id' : 'loading'});
                ul.grab(loading);
            },
            onSuccess: function(responseJSON, responseText) {
                users = responseJSON;
                $('loading').destroy();
                $$('#menu-alphabet a.active').removeClass('active');
                /* Si la liste d'utilisateur est vide, création et affichage du block 'pas de résultat' */
                if (!users.list)
                {
                    if ($chk($('no-result')))
                        $('no-result').destroy();
                    var h = new Element('h2', {'html': searchH1});
                    var p = new Element('p', {'html': searchP});
                    var div = new Element('div', {'id': 'no-result'});
                    div.grab(h);
                    div.grab(p);
                    if ($chk($('full-directory')))
                        $('profiles').grab(div);
                    else
                        $('full-wanted').grab(div);
                    
                    return true;
                }
                
                /* Si présent, destruction de l'ancien div 'pas de resultat' */
                if ($chk($('no-result')))
                    $('no-result').destroy();
                
        /*-----------------------------------------------------------------------------
          [3.3 Création du markup pour chaque utilisateur ]
        */
                
                var myChain2 = new Chain();
                myChain2.chain(function() {
                	var myChain = new Chain();
                	users.list.each(function(user) {
	                	myChain.chain(function(){
	                		userDisplay(user, ul);
	                		dir.tooltip();
	                	});
	                });
	                
	                var runChain = function() { 
	            		myChain.callChain();
	            	}
	                runChain.periodical(50);
                }).callChain();
                                
        /*-----------------------------------------------------------------------------
          [3.4  Création de la Pagination ]
        */

                if (eval(users.list_count) > eval(users.limit))
                {
                    /** Variable pour les calculs des pages */
                    var nlist_count = new Number(users.list_count);
                    var noffset = new Number(users.offset);
                    var nlimit = new Number(users.limit);
                    var item_previous = noffset - nlimit;
                    var item_next = noffset + nlimit;                    
                    var left_max = 7;
                    var right_max = 6;
                    var page_count = Math.ceil(nlist_count / nlimit);
                    var current_page = Math.min(page_count, Math.ceil(noffset / nlimit));
                    var left_length = Math.min(current_page, left_max);
                    var right_length = Math.max(Math.min(page_count - current_page - 1, right_max), 0);

                    /** Conteneur pagination */
                    var pagination = new Element('ul', {'id': 'pagination', 'class': 'navigator google'});
                    
                    /** Item prev */
                    if (item_previous >= 0)
                    {
                        var li_prev = new Element('li', {
                            'class': 'prev',
                            html: '<a href="#" rel="' + item_previous + '"><span> </span></a>'
                            });
                        pagination.grab(li_prev);
                    }
                    
                    /** Pages */
                    var li_page = new Array();
                    for (var i = 0; i < page_count; i++)
                    {
                        li_page[i] = new Element('li', {
                            html: '<a href="#" rel="' + (i * nlimit) + '">' + (i + 1) + '</a>'
                            });
                        if (current_page == i)
                        {
                            li_page[(i)].addClass('selected');
                            li_page[(i)].set('html', (i + 1));
                        }
                        pagination.grab(li_page[i]);
                    }
                    
                    /** Item next */
                    if (item_next < nlist_count)
                    {
                        var li_next = new Element('li', {
                            'class': 'next',
                            html: '<a href="#" rel="' + item_next + '"><span> </span></a>'
                            });
                        pagination.grab(li_next);
                    }
                    
                    $('users-list').grab(pagination);
                    
                    /** Evenement pour la pagination */
                    $$('.navigator.google li a').addEvent('click', function(e) {
                    	e.stop();
                        var offset = this.get('rel');
                        replaceUsers(offset);
                        return false;
                    });
                }
				
				/** Lors d'un nouveau rechargement, remise en place de la lettre selectionnee */
				if (users.by_letter)
				{
					$$('#menu-alphabet a[rel='+users.by_letter+']').addClass('active');
				}
                
                dir.build();
                dir.viewmode(dir);
            }
        }).get();
    },
    

/*-----------------------------------------------------------------------------
  [4. Evènement lors du click sur un utilisateur]
*/
    build: function() {
        var profiles = $('profiles');
        
        /** Remise en place de la vue poster apres un refresh */
        var current_view = $$('li.current').getFirst('a');
        if (current_view.get('class') == 'poster-view')
        {
            profiles.addClass('poster');
        }
    },


/*-----------------------------------------------------------------------------
  [5. Evènement pour le choix du type de vue (text ou poster)]
*/
    viewmode: function(dir) {
    	$$('.views a').addEvent('click', function(e) {
        	e.stop();
            this.getParent('li').addClass('current');    
            var profiles_li = $$('#profiles li');
            if (this.hasClass('poster-view')) {
                $('profiles').addClass('poster');
                profiles_li.removeClass('uncollapsed');
                profiles_li.removeProperty('style');
                $$('.text-view').getParent('li').removeClass('current');
                
            } else {
                $('profiles').removeClass('poster');
                $$('.poster-view').getParent('li').removeClass('current');
                profiles_li.removeProperty('style');
            }
            
            return false;
        });
    },

/*-----------------------------------------------------------------------------
  [6. Tooltip]
*/
    tooltip: function() {
	    if ($chk($$('.tooltip'))) {
	        var tip = new Tips('.tooltip', {
	            className: 'tool-tip',
	            title: function(el) {
	                if (el.getProperty('title')) {
	                    var content = el.getProperty('title').split('::');
	                    el.store('tip:title', content[0]);
	                    el.store('tip:text', '');
	                }
	            }
	        });
	    }
    }
});

/*-----------------------------------------------------------------------------
  [7. Evenement de fermeture de la fenetre utilisateur ]
*/

var closeProfile = function(li) {
	li.getElements('.close').addEvent('click', function(e) {
		e.stop();
		this.getParent('li').removeClass('uncollapsed');
		var myEffect = new Fx.Morph(this.getParent('li'), {duration: 'short', transition: Fx.Transitions.linear});
        myEffect.start({'height': 18});
        return false;
	});
};

/*-----------------------------------------------------------------------------
  [8. Affichage d'un utilisateur]
*/

var userDisplay = function(user, ul) {
	/** Creation de chaque li utilisateur */
	var uid = 'u' + user.id;
	var img = new Element('img', user.img);
	var profiles = $('profiles');
	var li = new Element('li', {
	    'id': 'u' + user.id,
	    'class': 'profile',
	    'styles': {
			'opacity': 0
		},
	    'events': {
	    	'mouseover': function() {
				this.addClass('hover');
			},
			'mouseleave': function() {
				this.removeClass('hover');
			},
			'click': function() {
				if(!profiles.hasClass('poster')) {
	                if (this.hasClass('uncollapsed')) {
	                    return true;
	                }
	                var elem = this;
	                var myEffect = new Fx.Morph(this, {duration: 'short', transition: Fx.Transitions.linear});
	                    myEffect.start({'height': 130}).addEvent('complete', function(el) {
	                        el.addClass('uncollapsed');
	                    });
	                return false;
	            }
	            return true;
			}
		}
	});
	var dl = new Element('dl');
	var dd_last_name = new Element('dd', {
	    'class': 'last-name',
	    html: '<a rel="' + user.node_id + '" href="'+ user.a.href + '">' + user.last_name + '</a>'
	});
	var dd_first_name = new Element('dd', {
	    'class': 'first-name',
	    html: '<a rel="' + user.node_id + '" href="'+ user.a.href + '">' + user.first_name + '</a>'
	});
	
	dl.grab(dd_last_name);
	dl.grab(dd_first_name);
	
	/** Filtres */
	$$('input.selectDirectory').each(function(el) {
		if(user.infos[el.get('id')] != ''){
			var infos = user.infos[el.get('id')];
		}
		else {
			var infos = "&nbsp;";
		}
		
	    var dd_filter = new Element('dd', {
	        'class': el.get('id'),
	        html: '<a rel="' + user.node_id + '" href="'+ user.a.href + '">' + infos + '</a>'
	    });
	    dl.grab(dd_filter);
	});
	
	li.grab(dl);
	
	/** Création de l'image pour le mode trombi */
	var img_gray = new Element('img', user.img_gray);
	var a_img_gray = new Element('a', {
	    'class': 'filter tooltip',
	    title: user.first_name + ' ' + user.last_name,
	    rel: user.img.src,
	    href: user.a.href,
        'events': {
	    	'mouseenter': photoEffect,
            'mouseleave': photoEffect
    	}
	});
	var div_infos = new Element('div', {
	    'class': 'infos'
	});
	li.grab(div_infos.grab(a_img_gray.grab(img_gray)));
	
	/** Création du deployement */
	var img_gray2 = new Element('img', user.img_gray);
	var a_img = new Element('a', {
	    'class': 'filter',
	    rel: user.img.src,
	    href: user.a.href,
	    'events': {
	    	'mouseenter': photoEffect,
            'mouseleave': photoEffect
    	}
	});
	var div_deploy = new Element('div', {
	    'class': 'deploy',
	    html: '<a class="close" href="' + user.a.href + '"><span>' + close + '</span></a>'
	});
	var img = new Element('img', user.img);
	
	var div_right = new Element('div', {
	    'class': 'right',
	    html: '<h2>' + user.first_name + ' ' + user.last_name + '</h2><p>' + user.infos.domain + '</p><p>' + user.infos.country + '</p><p>' + user.infos.zone + '</p>'
	});
	
	div_right.grab(new Element('a', user.a));
	div_deploy.grab(a_img.grab(img_gray2));
	div_deploy.grab(div_right);
	li.grab(div_deploy);
	
	closeProfile(li);
	
	ul.grab(li);
	li.set('tween', {
        duration: 300,
        onComplete: function(e) {
            li.erase('style');
        }
    }).tween('opacity', [0, 1]);
};

/*-----------------------------------------------------------------------------
  [9. Rechargement des utilisateurs]
*/

var replaceUsers = function(offset) {

    /** Suppréssion des anciens users */
	$('profiles').setStyle('display', 'block');

    /** Recuperation des filtres pour les users */
    var node = $('node_id').get('value');
    var name = $('by_name').get('value');
    $('by_name').set('value', searchInput);
    var letter = $$('.active').get('html');
    if ($chk($('full-directory')))
        var id = $('full-directory').get('class');
    if ($chk($('full-wanted')))
        var id = $('full-wanted').get('class');
    id = id.substr(id.indexOf('id') + 2);
    var url = id;
    if (name != '' && name != searchInput) {
        url += '/(by_name)/' + name;
    }
    $$('input.selectDirectory').each(function(el) {
    	url += '/(' + el.get('id') + ')/' + el.get('value');
    });
    if (letter != '') {
        url += '/(by_letter)/' + letter;
    }
    /** Destruction du conteneur */
    $('profiles').empty();
    
    /** Destruction de l'ancienne pagination */
    if ($chk($$('.navigator.google')))
        $$('.navigator.google').destroy();
    
    /** Création du directory */
    new directory({url: url, offset: offset});

    /** Redefinition du tri par default */
    $$('#profiles-order a.asc').set('class', 'desc');
}


/*-----------------------------------------------------------------------------
  [10. Filtre, recherche des utilisateurs]
*/

var filterSearchSelectUsers = function() {
    $$('.selectDirectory').each(function(el) {
        var your_select = new MavSelectBox({
            elem: el,
            alternate: true,
            onSelect: function() {
                replaceUsers(false);
            }
        }); 
    });
    $('selectDirectoryForm').addEvent('submit', function(e){
    	e.stop();
        replaceUsers(false);
        return false;
    });
}


/*-----------------------------------------------------------------------------
  [11. Tri, ordre des utilisateurs]
*/

var orderSearchSelectUsers = function() {
    $$('#profiles-order a').addEvent('click', function(e) {
        e.stop();
        /** Recuperation des elements pour le tri */
        var a = this;
        var tab = new Array();
        var sorttab = new Array();
        var htab = new Hash();
        var elem = $$('.profile');

        elem.each(function(item, index) {
            var val = item.getFirst('dl').getFirst('dd.' + a.get('rel')).getFirst('a').get('html');
            while (tab.contains(val))
            {
                val += 'a';
            }
            tab[index] = val;
            htab[val] = index;
        });
        tab.sort();
        
        /** Changement de la fleche de tri */
        if (this.get('class') == 'desc')
        {
            tab.reverse();
            this.removeClass('desc');
            this.addClass('asc');
        }
        else
        {
            this.removeClass('asc');
            this.addClass('desc');
        }
        tab.each(function(item, index)
        {
            sorttab[index] = htab[item];
        });
        
        /** Effet de tri */
        var mysort = new Fx.Sort(elem, {
            transition: Fx.Transitions.Back.easeInOut,
            duration: 1000
            });
        mysort.rearrangeDOM(sorttab);
    });
}


/*-----------------------------------------------------------------------------
  [12. Déplacement dynamique du menu alphabet]
*/

var moveSelector = function() {
    var top = null;
    var el = $('menu-alphabet');
    var container = $('profiles');
    if (!el)
        return false;
    var orTop = el.getStyle('top');
    if (!orTop) 
    {
        orTop = 0;
    }
    else if ( orTop.substr(orTop.length-2) == 'px')
    {
        orTop = parseInt(orTop.substr(0, orTop.length-2));
    }

    if (el.getPosition().y <= window.getScroll().y) 
    {
        top = orTop + window.getScroll().y - el.getPosition().y;
    }
    else if ((el.getPosition().y - orTop) >= window.getScroll().y) 
    {
        top = 0;
    }
    else 
    {
        top = window.getScroll().y - (el.getPosition().y - orTop);
    }

    if (top == null) 
    {
        return;
    }
    top = top <= 0 ? 23 : top+= 60;
    /** Effet de déplacement */
    var myFx = new Fx.Morph(el,{'duration': 400});
    myFx.start({'top':top});
}

/*-----------------------------------------------------------------------------
  [13. Effet over sur les images avatars]
*/

var photoEffect = function() {
    var img = this.getFirst();
    var imgOver = this.get('rel');
    var imgBase = img.get('src');

    img.set('src', imgOver);
    this.set('rel', imgBase);    
};

/*-----------------------------------------------------------------------------
  [14. Reload]
*/

var reload = function(id) {
	if ($chk($$('.navigator.google')))
        $$('.navigator.google').destroy();
	$('profiles').empty();
	$$('input.selectDirectory').each(function(el) {
		el.set('value', '*');
	});
	$$('div.selectDirectory').each(function(el) {
		el.getElement('a').set({'html': el.getElement('li').get('html')});
	});
	new directory({'id': id});
};

/*-----------------------------------------------------------------------------
  [15. DomReady]
*/

window.addEvent('domready', function(e) {
    if ($chk($('full-directory')) || $chk($('full-wanted')))
    {
        if ($chk($('full-directory')))
            var id = $('full-directory').get('class');
        if ($chk($('full-wanted')))
            var id = $('full-wanted').get('class');
        id = id.substr(id.indexOf('id') + 2);
        new directory({'id': id});
        filterSearchSelectUsers();
        orderSearchSelectUsers();
        moveSelector.periodical(500);
        
        $$('.reload').addEvent('click', function(e) {
        	e.stop();
        	reload(id);
        });
    }
});