$(document).ready(function(){
     var startX;
     var startY;
     
     var width;
     var height;
     
     var state;

    $(".imgbox").load("./img.php");
    
    $("#testarea").mouseover(function(){
      //$("#notif").text("mouse over");



    }).mouseout(function(){
      //$("#notif").text("mouse out");
      
    }).click(function(e){

      ofs = $("#testarea").offset({ scroll: false })

//alert(ofs.left);
      startX = e.pageX - ofs.left;
      startY = e.pageY - ofs.top;
      /*
      $("#notif").text("mouse down");
      $('#startx').text(startX);
      $('#starty').text(startY);
      $("#finnot").text("Waiting...");
      */
      
      $.ajax({
         type: "POST",
         url: "./img.php",
         data: "left="+ startX + "&top="+ startY
         
       });      

        $(".imgbox").load("./img.php");   
      /*
      //ramecek
      state = "drawing";
      
      //reseting
      $("#obrys").css("width", "0px");
      $("#obrys").css("height", "0px");      
      
      $("#obrys").css("display", "block");
      $("#obrys").css("left", startX+"px");
      $("#obrys").css("top", startY+"px");
*/
      
    
    }).mouseup(function(e){
/*      $("#notif").text("mouse up");
      $('#endx').html(e.pageX);
      $('#endy').html(e.pageY);
      $("#finnot").text("Now send!");
      
      
      //ramecek
      state = "finish";
 */     /*
      var actX = e.pageX - this.offsetLeft;
      var actY = e.pageY - this.offsetTop;
            
      width = actX - startX;
      height = actY - startY;
      
      $("#obrys").css("width", width+"px");
      $("#obrys").css("height", height+"px");
      */
      
    
    }).mousemove(function(e){
      //$("#notif").text("mouse move");
      $('#xdiv').html(e.pageX);
      $('#ydiv').html(e.pageY);
      
      
      
      //ramecek
      if(state == "drawing"){

      var actX = e.pageX - this.offsetLeft;
      var actY = e.pageY - this.offsetTop;

      if(actX < startX){
        var widthTemp = startX - actX;
     //   $("#obrys").css("left", actX+"px");
        
      }
      else{
        var widthTemp = actX - startX;
      }
      
      if(actY < startY){
        var heightTemp = startY - actY;
      //  $("#obrys").css("top", actY+"px");

      }
      else{
        var heightTemp = actY - startY; 
      }
      
    //  $("#obrys").css("width", widthTemp+"px");
    //  $("#obrys").css("height", heightTemp+"px");
      
      }
      
    });
    


     $(".change").keyup(function () {

      $.ajax({
         type: "POST",
         url: "./img.php",
         data: "text="+ $(".text").val()
         
       });

        //$(".imgbox").load("./img.php");

          
    })
        .change();      
        
        

  });