/**
 * @author ROSE
 */




$(document).ready(function(){

	tailleFen();
    /*ajout des evenements*/
    $('#actualite').click(function(){
        home();
    });
    
    $('#edition').click(function(){
        ajouter('edition');
    });
    
    $('#web').click(function(){
        ajouter('web');
    });
    
    $('#graphisme').click(function(){
        ajouter('graphisme');
    });
    
    $('#divers').click(function(){
        ajouter('divers');
    });
    
    $('#menu').draggable({
        containment: 'document',
        scroll: false
    });
    
    $('#desc').draggable({
        containment: 'document',
        scroll: false
    });
    
    position($('#desc'));
    
    /*ajouter les blocs pour la home page*/
    home();
     //   ajouter('edition');
    
});


function home(){

	
    /*Vider l'ancien conteneur*/
    $('#book').html("");
    height = 245;
    marge = 50;
    $.ajax({
        url: "xml/book.xml",
        encoding: "UTF-8",
        async: false,
		cache : false,
        dataType: "xml",
        success: function(xml){
			
            var hello = $(xml).find('bienvenue').text();
            $('#content').html('<h3>Hello</h3><p>' + hello + '</p>');
			$(xml).find('actu').each(function(){
                var title = $(this).find('nom').text();
                var date = $(this).find('date').text();
                var desc = $(this).find('text').text();
                var visuel = $(this).find('visuel').text();
                var lien = $(this).find('lien:first').text();
                if (visuel != "") {
                    $('<div id="' + title + '" class="actu" title="Drag-me" onclick="devant(this);"><div class="poigne"></div><div><h3><a href="' + lien + '">' + title + '</a></h3><p>' + desc + '</p></div><img src="images/' + visuel + '" alt="' + title + '" /></div>').appendTo('#book');
                }
                else {
                    $('<div id="' + title + '" class="actu" title="Drag-me" onclick="devant(this);"><div class="poigne"></div><div><h3>' + title + '</h3><p>' + date + '</p></div><p>' + desc + '</p></div>').appendTo('#book');
                }
                var elem = document.getElementById(title);
                
                //position(elem); //ici ie sort de la boucle


                $(elem).css("left", "25px");
                $(elem).css("top", height+"px");
                height = parseInt($(elem).height()) + parseInt(height) + parseInt(marge);
				
                $(elem).draggable({
                    containment: 'document',
                    scroll: false
                });
				
            });
            
            
        }
    });
    
	$(pong).appendTo('#book');
	$("#pong").draggable({
                    containment: 'document',
                    scroll: false
                });
        gameLoad();

	$(formul).appendTo('#book');
	$("#contact").draggable({
                    containment: 'document',
                    scroll: false
                });


    //position
    $('#desc').css("left", "205px");
    $('#desc').css("top", "89px");
    
    $('#pong').css("left", "712px");
    $('#pong').css("top", "245px");

    $('#contact').css("left", "460px");
    $('#contact').css("top", "245px");
}


/**
 * Cette methode permet d'ajouter dans l'id "#book" tous les projets de la catŽgorie choisi en parametre
 * et crŽer les projets sous forme de blocs draggable
 * @param {String} cat
 */
 
 
function ajouter(cat){
	
    /*Vider l'ancien conteneur*/
    $('#book').html("");
	
    
    /*RŽcuperer les donnŽes en mode dŽsynchronisŽs*/
    
    $.ajax({
        url: "xml/book.xml",
        encoding: "UTF-8",
		dataType: "xml",
        async: false,
        success: function(xml){
            $(xml).find('projet').each(function(){
                var type = $(this).find('type').text();
                if (type == cat) {
                
                    /*Recuprer les infos du projet*/
                    
                    var title = ""+ $(this).find('nom').text();
                    var date = $(this).find('date').text();
                    var visuel = $(this).find('visuel').text();
                    
                    /* */
                    
                    if (cat == "web") {
                        var lien = $(this).find('lien:first').text();
                    }
                    else {
                        var lien = 'book/' + type + '/' + $(this).find('lien:first').text();
                    }
                    
                    /*CrŽer les blocs*/
                    var extension = lien.substr(lien.length-3,lien.length );
					
					$('<div id="' + title + '" class="projet" title="Drag-me" ondragstart="devant(this);" onclick="devant(this);"><div class="poigne"></div><div><h3><a rel="'+title+'" href="' + lien + '" ><span onclick="devant('+title+');">' + title + '</span></a></h3><p>' + date + '</p></div><img src="images/' + visuel + '" alt="' + title + '" /></div>').appendTo('#book');
           
                            
                    /*Rendre draggable les blocs*/
                    
                    var elem = document.getElementById(title);
                    $(this).find('lien:not(:first)').each(function(){
					
                        var liens = $(this).text();
                        $('<a href="book/' + type + '/' + liens + '" rel="'+title+'" ></a>').appendTo(elem);
                    });
                    $(elem).draggable({
                        containment: 'document',
                        scroll: false
                    });
                    
                    
                    if (cat != "web") {
                        $('"a[rel=' + title + ']"').fancybox({
                            'padding': 0,
                            'autoScale': false,
                            'transitionIn': 'none',
                            'transitionOut': 'none'
                        });
                    }
                    /*Positionner les blocs de faon alŽatoire*/
                    position(elem);
                }
                
            });
        }
    });
    devant($('.projet:last'));
}


function tailleFen(){
 
 // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
 
	if (typeof window.innerWidth != 'undefined')
	{
		viewportwidth = window.innerWidth,
		viewportheight = window.innerHeight
	}
	 
	// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

	else if (typeof document.documentElement != 'undefined'
			&& typeof document.documentElement.clientWidth !=
		 'undefined' && document.documentElement.clientWidth != 0)
	{
		viewportwidth = document.documentElement.clientWidth,
		viewportheight = document.documentElement.clientHeight
	}
	 
	// older versions of IE
	 
	else
	{
	    viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
	    viewportheight = document.getElementsByTagName('body')[0].clientHeight
	}
}

/**
 * Cette methode permet de position de faon alŽatoire un objet
 * @param {Object} target
 */
function position(target){

    var limTop = viewportwidth - $(target).height();
    var limLeft = viewportheight - $(target).width();
    var l = Math.round(Math.random() * (viewportwidth)); //position horizontal
    var t = Math.round(Math.random() * (viewportheight)); //position vertical
	
    /*mise ˆ jour de la position de l'objet*/
    if (t > limTop) {
        t = Math.abs( t - parseInt($(target).height()));
    }
    if (l > limLeft) {
        l = Math.abs( l - parseInt($(target).width()));
    }
    $(target).css("left", l/1.5);
    $(target).css("top", t/1.5);
    
}

/**
 * Cette methode permet de passer l'objet en paramtre au dessus des autres objet qui ont le meme nom de classe
 * @param {Object} target
 */
function devant(target){

    /* on en profite pour charger la description de l'element*/
    description(target);
    
    var z = 0;
    
    /*recupere la plus haute position*/
    $(".projet").each(function(){
        if (z < $(this).css("z-index")) {
            z = parseInt($(this).css("z-index"), 10);
        }
    });
    
    z = z + 1; //encore plus haut
    $(target).css("z-index", z);
}


/**
 * Cette methode charge la description de l'objet en parametre pour l'inscrire dans le bloc description
 * @param {Object} target
 */
function description(target){

    var targetId = $(target).attr("id");
    
    $.ajax({
        url: "xml/book.xml",
        encoding: "UTF-8",
        async: false,
        dataType: "xml",
        success: function(xml){
            $(xml).find('projet').each(function(){
                var name = $(this).find('nom').text();
                if (name == targetId) {
                    var desc = $(this).find('text').text();
                    $('#content').html('<h3>' + name + '</h3><p>' + desc + '</p>');
                    
                }
            });
        }
    });
}


var viewportwidth;//largeur fenetre 
var viewportheight;//hauteur fenetre

var formHead = '<div id="contact" onclick="devant(this);"><div class="poigne"></div><div id="content">';
var formRens = '<div id="renseignement"><h3>Renseignements</h3><h4>S&eacute;bastien ROSE</h4><p>2 rue Edouard Branly<br/>38000 Grenoble<br/>France</p><p>06 29 23 30 61</p><p><a href="mailto:s.rose@dixanes.fr">s.rose@dixanes.fr</a></p></div>';
var formFormH = '<form  action="formvalidation.php5" onSubmit="return validate();" method="post" accept-charset="utf-8"><h3>Formulaire</h3>'
var formInPut = '<input id="nom" type="text" name="nom" value="votre nom"/><br/><input id="email" type="text" name="email"  value="votre email"/> <br/><textarea name="message">votre message</textarea><br/><input type="submit" name="Submit" value="envoyer">';
var formEnd = '</form></div>';
var formul = formHead + formRens + formFormH + formInPut + formEnd;

var pong = '<div id="pong" class="actu" title="Drag-me" onclick="devant(this);"><div class="poigne"></div><div><h3>PONG</h3><p>Un petit classique, afin d\'utiliser la balise canvas d\'html5, et de m\'exercer en javascript-Objet. Jouez ici, c\'est en 4 points.</p></div><canvas onclick="go()"; id="game" width="403" height="225"></canvas></div>';