/*************************
 *              Variable
 *************************/
var urlCloud="/site_elements/layout/landscape/cloud1.png";
var urlMoon="/site_elements/layout/landscape/moon.png";
var urlUfo="/site_elements/layout/landscape/ufo.png";
var arrayCloud=[];
var nbrCloud=5;
function initLandscape(){
     
    // initUfo();
     initCloud();
     initMoon();
  // initWaves();

//initCanvas()
  initSocket();
}
/*
 *      CANVAS IMAGE
 **/
var canvasContainer,ctx;
function initCanvas(){
    canvasContainer=$("<canvas id='canvasContainer'  width='4000' height='4000'></canvas>");
    canvasContainer.css("position","absolute")
    //canvasContainer.css("width",$(window).width()+"px");
    //canvasContainer.css("height",$(window).height()+"px");
    //canvasContainer.css("border","1px solid #fff");
    $("#sky").append(canvasContainer);
    ctx=canvasContainer[0].getContext('2d');
    canvasContainer[0].addEventListener('mousemove', ev_mousemove, false);
    
}
function ev_mousemove (ev) {
  var x, y;

  // Get the mouse position relative to the canvas element.
  if (ev.layerX || ev.layerX == 0) { // Firefox
    x = ev.layerX;
    y = ev.layerY;
  } else if (ev.offsetX || ev.offsetX == 0) { // Opera
    x = ev.offsetX;
    y = ev.offsetY;
  }

  // The event handler works like a drawing pencil which tracks the mouse 
  // movements. We start drawing a path made up of lines.
  if (false) {
    ctx.beginPath();
    ctx.moveTo(x, y);
    started = true;
  } else {
    ctx.lineTo(x, y);
    ctx.stroke();
  }
}

/*************************
 *              Ufo
 *************************/
var ufo;
function initUfo(){
    ufo=$("<div class='ufo'><img src='"+urlUfo+"'></div>");
    ufo.css("position","absolute");
    ufo.css("top","50px");
    ufo.css("left",$(window).width());
     $("#sky").append(ufo);
     moveUfo()
}
function moveUfo(){
ufo.animate({
    left:"-=50px"

    },((Math.random()*400)+1000),function(){
        moveUfo()
    })
}
/*************************
 *              Moon
 *************************/
var moon;
function initMoon(){
    moon=$("<div class='moon'><img src='"+urlMoon+"'></div>");
    moon.css("position","absolute");
    moon.css("right","50px");
     $("#sky").append(moon);
}

/*************************
 *              Wave
 *************************/
var wave;
function initWaves(){
    wave=$("<div class='wave'></div>");
    wave.css("position","absolute");
    wave.width($(window).width()+30);
    wave.height(80);
    wave.css("background-color","#3359A5");
    wave.css("left",-10);
    wave.css("bottom",-10);
    wave.data("moveWave",1);
    wave.data("initposX",parseInt( wave.css("left")));
    wave.data("initposY",parseInt( wave.css("bottom")));
    $("#sky").append(wave);
    setInterval("moveWaves()",50);
}
function moveWaves(){
    wave.data("moveWave",wave.data("moveWave")+0.05);
    var posX=wave.data("initposX")+Math.sin(wave.data("moveWave"))*10;
    var posY=wave.data("initposY")+Math.cos(wave.data("moveWave"))*10;

    wave.css("left",posX);
    wave.css("bottom",posY);
    //wave.text(posX);
}
/*************************
 *              Clouds
 *************************/

function initCloud(){
    for(i=0;i<nbrCloud;i++){
        var cloud=$("<div class='cloud'><img src='"+urlCloud+"'></div>");
        cloud.css("position","absolute");
        cloud.css("opacity","0.8");
        cloud.css("top",(Math.random()*($(window).height()-200) ));
        cloud.css("cursor","move");
        cloud.css("z-index","5");
        cloud.css("left",(Math.random()*$(window).width() ));
        cloud.data("speed", Math.random()+0.5);
        cloud.data("mouseOn",false);;
        cloud.draggable({
            handle: 'div.header',
            opacity: 0.5,
            cursor:"move"
        });
        cloud.mouseover(function(){
            mouseOnCloud($(this));
        })
        cloud.mouseout(function(){
            mouseOutCloud($(this));
        })
        arrayCloud.push(cloud);
        $("#sky").append(cloud);
    }
    setInterval("moveClouds()",50);
    //moveClouds()
}

function moveClouds(){
     for(i=0;i<nbrCloud;i++){
         
         if((parseInt(arrayCloud[i].css("left"))+10)>$(window).width()){
                arrayCloud[i].css("left",-150);
                arrayCloud[i].css("top",(Math.random()*($(window).height()-200)));
                arrayCloud[i].data("speed", Math.random()+0.5);
         }else{
             if(!arrayCloud[i].data("mouseOn")){
                 arrayCloud[i].css("left",(parseFloat(arrayCloud[i].css("left"))+arrayCloud[i].data("speed")));
             }
             
             
         }
     }
}


function mouseOnCloud(jElement){
    jElement.data("mouseOn",true);
     jElement.animate({
         opacity:1
     },500)
}
function mouseOutCloud(jElement){
    jElement.data("mouseOn",false);
     jElement.animate({
         opacity:0.8
     },500)
}