/* Copyright (c) 2011, 2012, Oracle and/or its affiliates. All rights reserved. */
/* ------------------------------------------------------------- */
/* ------------------- amx-inputNumberSlider.js ---------------- */
/* ------------------------------------------------------------- */


(function() {
// TODO finish the migration from "amx.*" to "adf.mf.api.amx.*" and "adf.mf.internal.amx.*"

  var amxRenderers = {

    inputNumberSlider: {
      create: function(amxNode){
        amx.registerInputValue(amxNode, "value");
        var field = amx.createField(amxNode);
        var $node = field.$node;
        var disable = field.isDisable;
        var $container = $('<div class="container"></div>');
        field.$value.append($container);
//        var $inputTextNumber = $('<div class="inputTextNumber"></div>');
//        var $input = $('<input maxlength="4" type="text" />').appendTo($inputTextNumber);

//        if (typeof amxNode.value !== "undefined"){
//          $input.val(amxNode.value);
//        }

        var $slider = $('<div class="slider"><div class="valve-background"><div class="valve"></div></div><div class="selected"></div></div>');

//        $container.append($inputTextNumber);
        $container.append($slider);


        // for now, we do not add these buttons
        //$inputTextNumber.append('<div class="btn up"></div><div class="btn down"></div>');

//        var $input = $inputTextNumber.find("input");
        var $valve_bg = $slider.find(".valve-background");
        var $valve = $valve_bg.find(".valve");
        var $selected = $slider.find(".selected");


        if (amxNode.minimum && !isNaN(amxNode.minimum)){
          $slider.attr("data-min",amxNode.minimum);
          amxNode._min = amxNode.minimum * 1;
        }else{
          $slider.attr("data-min",0);
          amxNode._min = 0;
        }

        if (amxNode.maximum && !isNaN(amxNode.maximum)){
          $slider.attr("data-max",amxNode.maximum);
          amxNode._max = amxNode.maximum * 1;
        }else{
          $slider.attr("data-max",100);
          amxNode._max = 100;
        }

        if (amxNode.stepSize){
          $slider.attr("step",amxNode.stepSize);
          amxNode._step = amxNode.stepSize;
        }else{
          $slider.attr("step",1);
          amxNode._step = 1;
        }

        if (typeof amxNode.value !== "undefined"){
          $slider.attr("data-value",amxNode.value);
          amxNode._currentValue = amxNode.value * 1;
        }

        if(amx.isValueTrue(amxNode.readOnly)){
          $node.addClass("amx-readOnly");
//          $slider.html('<div class="readValue">'+amxNode._currentValue+'</div>');
        }

        if(disable){
          $node.addClass("amx-disabled");
          field.$value.append('<div class="disable"></div>');
        }
		// calls applyRequiredMarker in amx-core.js to determine and implement required/showRequired style
		adf.mf.api.amx.applyRequiredMarker(amxNode, field);

        /* for now, we do not have the .btn
        $inputTextNumber.delegate(".btn","click",function(){
          var $btn = $(this);
          var p = $btn.hasClass("up") ? 1 : -1;
          var value = amxNode._currentValue + p * amxNode._step;
          setValue($valve,value);
        });
        */

        /* good one, but for now, let's not have keyboard support
        $input.bind("keyup",function(e){
          var value = $input.val() * 1;
          if(!isNaN(value)){
            setValue($valve,value);
          }
        });
        */
        if(!disable && !field.isReadOnly){
          $slider.tap(function(e){
            var pageX;
            if (e.pageX != undefined) {
              pageX = e.pageX;
            }
            else {
              var oe = e.originalEvent;
              if (oe.touches && oe.touches.length > 0) {
                pageX = oe.touches[0].pageX;
              }
              // on 'touchend' oe.touches is empty, need to check oe.changedTouches
              else if (oe.changedTouches && oe.changedTouches.length > 0) {
                pageX = oe.changedTouches[0].pageX;
              }
              else {
                return;
              }
            }
            var startX = $slider.offset().left;
            var deltaX = pageX - startX;
            var value = deltaX / $slider.width() * (amxNode._max - amxNode._min) + amxNode._min;
            amxNode["_oldValue"] = amxNode._currentValue;
            setValue($valve_bg,value);
            // set the amxNode value so that it stays in sync
            amxNode.value = amxNode._currentValue;
            var vce = new amx.ValueChangeEvent(amxNode._oldValue, amxNode._currentValue);
            amx.processAmxEvent($node,"valueChange","value",amxNode._currentValue, vce);
          });

          $slider.drag(".valve-background",{
            start: function(event,dragExtra){
              event.preventDefault();
              event.stopPropagation();
              amxNode["_oldValue"] = amxNode._currentValue;
            },
            drag: function(event,dragExtra){
              event.preventDefault();
              event.stopPropagation();
              var $valve_bg = $(this);
              var left = $valve_bg.position().left;
              var offset = $valve_bg.width() / 2;
              left = left + dragExtra.deltaPageX;
              var value;
              if(left < -offset){
                left = -offset;
                value = amxNode._min;
              }
              else if(left > $slider.width() - offset){
                left = $slider.width() - offset;
                value = amxNode._max;
              }
              else {
                value = (left + offset) / $slider.width() * (amxNode._max - amxNode._min) + amxNode._min;
                value = Math.floor(value / amxNode._step) * amxNode._step + Math.round(value % amxNode._step / amxNode._step) * amxNode._step;
              }
              $valve_bg.css("left", left+"px");
              $selected.css("width", (left+offset)+"px");
              $slider.attr("data-value",value);
              if (amxNode._currentValue != value){
                amxNode._currentValue = value;
              }
            },
            end: function(event,dragExtra){
              event.preventDefault();
              event.stopPropagation();
              var $valve_bg = $(this);
              setValue($valve_bg,amxNode._currentValue);
              // set the amxNode value so that it stays in sync
              amxNode.value = amxNode._currentValue;
              var vce = new amx.ValueChangeEvent(amxNode._oldValue, amxNode._currentValue);
              amx.processAmxEvent($node,"valueChange","value",amxNode._currentValue, vce);
              amxNode["_oldValue"] = amxNode._currentValue;
            }
          });
        }


        function setValue($valve_bg,value,width){
          if(!width){
            width = $slider.width();
          }
          value = Math.floor(value / amxNode._step) * amxNode._step + Math.round(value % amxNode._step / amxNode._step) * amxNode._step;
          if(value <= amxNode._min){
            value = amxNode._min;
          }
          if(value >= amxNode._max){
            value = amxNode._max;
          }
          var offset = $valve_bg.width() / 2;
          var left = (value - amxNode._min)/(amxNode._max - amxNode._min) * width ;
          $valve_bg.css("left", (left - offset)+"px");
          $selected.css("width", left+"px");
          $slider.attr("data-value", value);
          if (amxNode._currentValue != value){
            amxNode._currentValue = value;
          }
        }
        amxNode.setValue = setValue;

        return field.$node;
      },

      init: function($node,amxNode){
        var $valve_bg = $node.find(".valve-background");
        var $slider = $node.find(".slider");
        amxNode.setValue($valve_bg, $slider.attr("data-value") * 1, $slider.width());
      }
    }


  }; // /var amxRenderers

  // add this renderer
  amx.registerRenderers("amx",amxRenderers);

})();

