/**

* Sprite Constracutor.
*/

var Sprite = function(){

var obj = $("<img />").appendTo("#sprite");
obj.css('position', 'absolute').css("buttom", 0);

// regist dialog move behavor.
obj.mousedown(function(e){
   obj
      .data("clickPointX" , e.pageX - obj.offset().left)
      .data("clickPointY" , e.pageY - obj.offset().top);

   $(document).mousemove(function(e){
      obj.css({
         top :e.pageY  - obj.data("clickPointY")+"px",
         left:e.pageX - obj.data("clickPointX")+"px"
      })
   })
}).mouseup(function(){
   $(document).unbind("mousemove")
})

/**
 * proxy sprite image bind event.
 */
this.bind = function(area, event_name, callback){
   var x = 0;
        var y = 0;

             if(arguments.length == 2){
     obj.bind(area, event_name);
                     return;
             }

   obj.bind("touchmove",function(e){
           x = event.touches[0].pageX;
      y = event.touches[0].pageY;
   });
   obj.bind("mousemove",function(e){
      x = e.pageX;
      y = e.pageY;
   });

   obj.bind(event_name, function(e){
                     if(
                                (area["left"] <= x && x <= (area["left"] + area["width"]) )
                        && (area["top"]  <= y && y <= (area["top"]  + area["height"]) )
                     ){
                        callback(e);
                     }
   });
}

/**
 * change sprite image.
 * @params<string> image file path.
 */
this.image = function(path){
        obj.attr("src", path);
        return this;
}

/**
 * change sprite image for interval time.
 * @params<string> image file path.
 * @params<integer> millisecond.
 */
this.motion = function(path, interval){
        var current = obj.attr("src");
        var self = this;
        self.image(path);

        setTimeout(function(){ self.image(current) } , interval);

   return self;
}

/**
 * touch action.
 */
this.touch = function(area, args, callback){ this.bind(area, "click", callback) };

/**
 * nadenade action.
 */
this.nadenade = function(area, args, callback){ 
   var step = [true].concat(array(args.count, false));
   step.idx = 0;
   step.isDone = function(){ return step.reduce(function(r, x){return r && x}) };
   step.reset  = function(){
      for(var i=1;i<step.length;i++){
         step[i] = false;
      }
      step.idx = 0;
   }

   var isOverPoint = function(idx, x){
      var buf = 30;
      var left1 = area["left"];
      var left2 = left1 + buf;
      var right1 = left1 + area["width"] - buf;
      var right2 = right1 + buf;

      return (idx % 2 == 0) ? (step[idx] && left1  <= x && x <= left2)
                            : (step[idx] && right1 <= x && x <= right2)
   }

   var action = function(x){
      if (isOverPoint(step.idx, x)) {
         step.idx += 1;
         step[step.idx] = true;
      }

      if (step.isDone()) {
         callback();
         step.reset();
      }
   }

   if(isTouch()){
      this.bind(area, 'touchmove', function(e){
         action(event.touches[0].pageX);
      });
   }else{
      this.bind(area, 'mousemove', function(e){
         action(e.pageX);
      });
   }
}

}

/**

* Dialog Constructor.
*/

var Dialog = function(left, top, width, height, padding, bgcolor, textcolor, size){

var dlg = $("<div class='dialog'/>").appendTo("#sprite");

// setting default css.
dlg.css("display", "none")
   .css("position", "absolute")
   .css("margin", 0)
   .css("padding", padding)
   .css("background-color", bgcolor)
   .css("color", textcolor);

// regist dialog move behavor.
dlg.mousedown(function(e){
   dlg
      .data("clickPointX" , e.pageX - dlg.offset().left)
      .data("clickPointY" , e.pageY - dlg.offset().top);

   $(document).mousemove(function(e){
      dlg.css({
         top :e.pageY  - dlg.data("clickPointY")+"px",
         left:e.pageX - dlg.data("clickPointX")+"px"
      })
   })
}).mouseup(function(){
   $(document).unbind("mousemove")
})

/**
 * show dialog.
 * @param<string> message.
 * @param<integer> show interval.
 */
this.show = function(msg, interval){ 
   dlg 
      .css("left",   left)
      .css("top",    top)
      .css("width",  width)
      .css("height", height)
      .css("font-size", size)
      .fadeIn("fast");

             dlg
                     .empty()
                     .append(msg);

             if(arguments.length >= 2){
     setTimeout(function(){dlg.fadeOut("fast")} , interval);
             }
};

     /**
      * close dialog.
      */
     this.close = function(){
     dlg.fadeOut("fast");
     }

}