$(document).ready(function() {

    /*défilement image écran*/
    $(function() {
        /*mobile button*/
        $(".button-mobile a").hover(function() {
                    $(this).next("em").animate({opacity: "show", top: "0"}, "slow");
                }, function() {
                    $(this).next("em").animate({opacity: "hide", top: "10"}, "slow");
                });

        /*caption image*/
        $('.boxgrid.captionfull').hover(function() {
                    $(".cover", this).stop().animate({top:'123px'}, {queue:false,duration:160});
                }, function() {
                    $(".cover", this).stop().animate({top:'283px'}, {queue:false,duration:160});
                });
    });

    $(function() {
        $('.help').mouseenter(
                function() {
                    $(this).find('.explanation').show();

                }).mouseleave(function() {
                    $(this).find('.explanation').hide();
                });
    });

    $(function() {
        var clicked = false;
        $('#third').mouseenter(
                function() {

                    var icon = $(this).find('.myself');
                    if (icon.length > 0) {
                        if (!clicked) {
                            $(this).append('<div class="touch_me">Touch Me !</div>');
                        }
                        var touchMe = $(this).find('.touch_me');
                        touchMe.fadeIn(function() {
                            var iconPosY = icon.css('top'),
                                    top = iconPosY + $(this).height();
                            touchMe.css('top', top);


                        });
                    }


                }).mouseleave(function() {
                    mouseOut($(this).find('.touch_me'))

                });
        $('.myself').click(function(e) {
            mouseOut('.touch_me')
        });

        function mouseOut(el) {
            $(el).fadeOut(function() {
                clicked = true;
            });
        }
    });


    // add drag effect on myself logo
    $(function() {
        var clicked = false;
        var body = $('body');

        var move = function(el) {
            $('body').mousemove(function(e) {
                position(el,e)
            });
        }

         var position = function (el, e) {
            var left = e.pageX - ($(el).width() / 2);
            var top = e.pageY - ($(el).height() / 2);

            $(el).css({
                top : top,
                left : left

            });
        }
        $('.myself').click(function(e) {
            if (clicked) {
                clicked = false;
                body.removeClass('noCursor');
                body.unbind('mousemove');
                $('#third').prepend(this);
                $(this).removeAttr('style')

            } else {
                body.append(this);
                body.addClass('noCursor');
                clicked = true;
                position(this,e)
                move(this);
            }
        });


    });


});