$(document).ready(function(){
if($.client.browser == "Chrome" && $.client.os == "Windows"){
    $("*").css("font-weight", "400");    
}
    init();
});

$(window).resize(function() {
    $("#popup").css("top", ($(window).height() - 493) / 2 + "px");
});

var teeniz = ["Babble Planet","Babble Planet is a serious game for all European children between the ages of 9 and 11 to practice oral English. It offers an innovative audio and social experience where kids can practice their oral expression and comprehension. Using speech recognition, Babble Planet is a new type of video game which helps kids to feel comfortable when speaking English! Babble Planet was firstly a school project, and as it encountered a great success, we are now launching a startup to make it a real product.",["UX design & concept definition", "Speech recognition engine (Java)","Wireframing, mock ups",  "Interface of the game (AS3)", "User testing", "Video shooting and editing"], "<p><a target='_blank' href='http://www.babbleplanet.com'>www.babbleplanet.com</a></p>"];

var mnih = ["Mijn naam is Haas","After graduating I had the opportunity to do an internship in a serious game startup in Netherlands called Mijn naam is Haas. Their main product is a game for young kids to learn Dutch. The gameplay consists in short stories where the kid have to understand the problem and draw the good line to make the solution appear. During 6 months, I took part in the game development by creating new features, and also optimizing existing ones.",["Game development (AS3)", "Game optimization (AS3)", "Technical consulting", "User testing", "Prototypes development"], "<p>Video presenting the game on <a target='_blank' href='http://www.youtube.com/watch?v=4PrOug6B0Zw'>Youtube</a></p>"]
var kleio = ["Kleïo","Kleio is a collaborative and educative game about history designed for 11 and 12 year old pupils.<br/> Kleio's goal is to offer a more immersive way to teach history. Indeed, kids will embody a Roman and explore the Ancient Rome. Used in the classroom, the teacher chooses the different subjects he wants to tackle during the lesson. The software then generates a scenario for a mission that pupils will have to solve by answering quizzes and collaborating with each other.",["Context analysis","Concept definition", "Wireframing, mock ups", "Game development (AS3)", "Multiplayer socket server development (Java)", "Trailer shooting and editing"], "<p>Design documents <a target='_blank' href='http://elsaprieto.com/works/kleio/DossierDeConception.pdf'>here</a> [fr]</p><p>Video trailer on <a target='_blank' href='http://vimeo.com/7513767'>Vimeo</vimeo></p>"]
var mnihwebsite = ["Haas' website","Haas' website was the first mission of my internship in Netherlands. It was quite challenging as they asked three of us to redesign their website from scratch in two weeks. We knew only a little about their product but we managed to meet the deadline by working efficiently and going straight to the point. We proposed a website which can effectively answers every needs of the different targets of the company: parents, teachers and kids.",["UX design & mock-ups", "CMS integration (Wordpress)", "Web development (HTML, CSS & Javascript)"], "<p><a target='_blank' href='http://www.mijnnaamishaas.nl'>www.mijnnaamishaas.nl</a></p>"]
var roodkapje = ["Roodkapje","Roodkapje stands for Little Red Riding Hoods in Dutch. This project is an interactive application for a touch table based on the work of the artist Warja Lavater. As in her works, everything is represented as simple geometric shapes, and the book is a never ending story. In Roodkapje, the scenario of the tale is distributed around a circle so that it never ends. The user can influence the story by moving decoration elements, thus blocking or slowing down a particular character. The application is based on a particle system allowing to create natural interactions between each elements of the scene.",["Game development (AS3)", "Voice recording and acting"], "<p>Blog post about Roodkapje <a target='_blank' href='http://blog.ontspruit.org/2011/04/incognito-een-blauwdruk-voor-interactieve-sprookjes/'>here</a> [nl]</p>"]
var checconi = ["Maçonnerie Checconi","The 'Maçonnerie Checconi' is a building company situated in the south of France and specialized in renovation and house construction. In order to easily communicate about their skills and abilities, they needed a website which presents their last works and which could also easily be modified in the future. ",["Front-end development (HTML & CSS)", "Navigation effects development (JQuery)", "Back-end development (PHP)"], "<p><a target='_blank' href='http://maconnerie-checconi.fr/'>www.maconnerie-checconi.fr</a></p>"]
var fanny = ["Fanny Martel Portfolio","Fanny Martel is a young french graphic designer, but also a friend of mine. As most graphic designer, her programming skills aren't sufficient to develop her own portfolio, so rather than creating a cargo collective as everyone, she preferred to work with me to have something fully personnalized.",["Front-end development (HTML & CSS)", "Navigation effects develoment (JQuery)"], "<p><a target='_blank' href='http://www.fannymartel.com'>www.fannymartel.com</a></p>"]
var arduino = ["Arduino tinkering","Arduino is a bundle of a microcontroller and a software to program it allowing people with no knowledge about electronics and low level programming to make small electronic constructions.<br/> As I was part of the research and development team at Orange, I was asked to test Arduino and explain what was the range of possibilities with such a tool.So I experimented with tasks like making Arduino tweet depending on the luminosity of the room, or making Arduino sing some songs, etc...",["Experimentations (Processing)", "Tutorials writing", "Team reports"], "<p>Read my tutorials <a target='_blank' href='http://api-exploration.net/ants/blog/'>here</a> [fr]</p>"]
var rotterdam = ["Rotterdam moods","Green was born during a three days workshop in Rotterdam. <br/>With Green, you can collect, share and discover every places where you could 'feel green' in Rotterdam: peaceful, zen, natural, hopeful or funny places! The project is made of a mobile application where you can search and localise green places, or enter a new one.<br/> Green is a student project made by Elsa Prieto, Claire Sidoli from Gobelins school (Paris) and Karin Stolk and Ting Yuen from Hogeschool (Rotterdam).",["Concept definition", "UX design, mock-ups", "Short film shooting & editing"], "<p>Watch the stop motion trailer on <a target='_blank' href='http://vimeo.com/7520509'>Vimeo</a></p><p>Some photos of the project <a target='_blank' href='img/work/rotterdam/green1.jpg'>here</a> or <a target='_blank' href='img/work/rotterdam/green2.jpg'>here</a></p>"]
var naive = ["Naïve","Naive is a school exercise about user centric design. During one week, we were asked to redesign the website of a music label considering all the issues small labels are facing today.<br/>We proposed a website intended both for people who wanted to discover naive's catalogue, and for the returning customers who want to get aware of the artists corresponding to their taste. It contains a smart player where you can like or dislike a song and create a profile of your taste. It will then suggest you new artists you may like.",["Conception definition", "UX design", "Wireframing & mock-ups"], "<p>Design documents <a target='_blank' href='http://elsaprieto.com/works/naive/MarieElsa-ProjetNaive.pdf'>here</a> [fr]</p>"]
var laba = ["lab-A","LabA is a magazine available on both paper and Internet made by a team of 4 internee at Orange Labs. Its goal is to maintain all the Orange Labs employees aware of the design news: new products or new services, and interviews of designers.<br/>Our challenge was to propose an innovative experience reflecting our design culture and skills. So we proposed a website where the user is not allowed to use his mouse, and must use his keyboard instead. We also distributed a paper version.",["Website development (AS3 & HTML)","UX design & mock-ups", "Logo design", "Content writing", "Photoshooting"], "<p>A backuped version is available <a target='_blank' href='http://elsaprieto.com/labA'>here</a> (pass: acidule)</p>"]

var content = [];
content['teeniz'] = teeniz;
content['mijn-naam-is-haas'] = mnih;
content['kleio'] = kleio;
content['haas-website'] = mnihwebsite;
content['roodkapje'] = roodkapje;
content['checconi'] = checconi;
content['fanny'] = fanny;
content['arduino'] = arduino;
content['rotterdam'] = rotterdam;
content['naive'] = naive;
content['laba'] = laba;
var currentContent = [];

function init(){
    $(".work").mouseover(function(e){
        $(this).find("img").animate({opacity:1}, 200);
        $(this).find(".desc").fadeIn(250);
                
    });
    
    $(".work").mouseleave(function(e){
            if($(this).attr("class") === "work"){
                var desc = $(this).find(".desc");
                $(this).find("img").animate({opacity:0.6}, 200);
                desc.fadeOut(250);
                
            }
        });
    $(".desc").mouseover(function(){
        $(this).parent().find("img").animate({opacity:1}, 200);
        $(this).fadeIn(250);
        
    });
    
    $("#websites li").mouseover(function(){
        $(this).animate({opacity:1}, 100);
    });
    $("#websites li").mouseout(function(){
        $(this).animate({opacity:0.6}, 100);
    });
    
    $("#overlay").click(function(e){
        if(e.target.id === "overlay"){
            closePopup();
        }
    });
    $(".closePopup").click(function(){closePopup()});
    
    $(".desc").click(function(){
        window.location.hash = $(this).parent().find("a").attr("href").split("./")[1];
    });
    
    if(window.location.hash != ""){
        openPopup(window.location.hash.split("#/")[1]);
    }
    window.onhashchange = function(){
        if(window.location.hash == "" || window.location.hash == "#"){
            if($("#overlay").css("display") === "block"){
                closePopup();
            }
            
        }
        else{        
            openPopup(window.location.hash.split("#/")[1]);
            
        }
        
    };
    
    
}

function openPopup(id){
    $("#overlay").css("top",$(document).scrollTop() + "px");
    $("#popup").css("top", (($(window).height() - 493) / 2) + "px");
    $("body").css("overflow", "hidden");
    $("#overlay").fadeIn();
    currentContent = content[id];
    refreshPopupContent(id)
}

function refreshPopupContent(id){
    $(".bigImg").attr("src", "img/work/"+id+"/big.png");
    $("#projectName").html(currentContent[0]);
    $("#projectDesc").html(currentContent[1]);
    $("#projectRole").empty();
    for(var i=0; i<currentContent[2].length; i++){
        if($.client.browser == "Chrome" && $.client.os == "Windows"){
            $("#projectRole").append("<li style='font-weight:400;'>"+currentContent[2][i]+"</li>");
        }
        else{
            $("#projectRole").append("<li>"+currentContent[2][i]+"</li>");
        }
        
    }
    $("#projectLinks").html(currentContent[3]);
    if($.client.browser == "Chrome" && $.client.os == "Windows"){
        $("#projectLinks p").css("font-weight","400");
        $("#projectLinks a").css("font-weight","400");
    }
}

function closePopup(){
    $("body").css("overflow", "auto");
    $("#overlay").fadeOut(200, function(){
        var st = parseInt($(window).scrollTop());
        window.location.hash = "";
        $(window).scrollTop(st);
        $(".bigImg").attr("src", "");
        }
        
    );
}