// ....................................................................

// Main Visual Sedimentation Code

// ....................................................................

// TODO : 

// - callback on rollOut

(function($){

// Name Space Plug in Jquery Objects

$.fn.vs = function (){}

$.fn._vs={}

// All this objects are define in correspondant .js files

$.fn._vs.token      = {}

$.fn._vs.draw       = {}

$.fn._vs.stream     = {}

$.fn._vs.chart      = {}

$.fn._vs.phy        = {}

$.fn._vs.decay      = {}

$.fn._vs.flocculate = {}

$.fn._vs.strata     = {}

$.fn._vs.aggregate  = {}

// Core Classe 

var VisualSedimentation = function(element,options){

  // Attach objects

  this.token        = $.fn._vs.token

  this.draw         = $.fn._vs.draw

  this.stream       = $.fn._vs.stream

  this.chart        = $.fn._vs.chart

  this.phy          = $.fn._vs.phy 

  this.decay        = $.fn._vs.decay 

  this.flocculate   = $.fn._vs.flocculate

  this.strata       = $.fn._vs.strata

//  this.aggregate    = $.fn._vs.aggregate 

  this.requestAnimFrame;

  // Mouse object have to be refactor

  this.mouse        ={}

  this.mouse.x      = 0

  this.mouse.y      = 0

  this.mouse.isMouseDragging = false

  this.mouse.isMouseDown     = false

  this.mouse.selectedBody    = null

  // Variables 

  this.dataFlow     = [];

  this.chartPhySetup= {}

  this.tokens       = [];

  this.world        = null;

  this.ctx          = null;

  var elem 	        = $(element);

  var self 	        = this;

	var tokens        = [];

	var B2D;   

	var canvas;

   // Default Settings  

	var defaultSettings = {

          x:0,

          y:0,

          width:290.5,

          height:300.5,

          DOMelement:null,

          chart:{ 

              x:undefined,

              y:undefined,

              width:undefined,

              height:undefined,

              colorRange:d3.scale.category10(),

              scale:d3.scale,

              type:'StackedAreaChart',

                  /*

                    name are based on prefuse tollokit layout :

                     - CircleLayout,

                     - StackedAreaChart,

                     //- bubbleAreaChart,

                     x AxisLabelLayout,

                     x AxisLayout,

                     x CollapsedStackLayout,

                     x GridLayout, 

                  */

              spacer:5,

              //treeLayout:false,

              column:3,

              wallColor:"rgba(230,230,230,0)",

              label:true,

              radius:10 // for CircleLayout

          },

          data:{

              model:[

                        {label:"Column A"},

                        {label:"Column B"},

                        {label:"Column C"},

                      ],

              strata:[

                      [

                        {initValue: 100, label: "Strata 1 col A"}

                      ],[

                        {initValue: 20, label: "Strata 1 col B"}

                      ],[

                        {initValue: 175, label: "Strata 2 col C"}

                      ]      

                      ],

              token:[

                       {

                         timestamp:1,

                         category:1,

                         value: 1,

                         userdata:{},

                         callback:{}

                       }

                      ],

              tokenPast:0,

          		stream:{

                      provider:'generator',

          				    refresh:10000/8,

                      now:0

      					},

          		}

          ,

          sedimentation:{

              token:{size:{original:4

                          ,minimum:2}

                          ,visible:true},   // fill color, shape,

              incoming:{

                        strategy:1,         // 1 = one element by one, more = by Groupe  

                        point:[{x:50,y:0},

                              {x:100,y:0},

                              {x:150,y:0}],

                        target:[{x:50,y:0},

                              {x:100,y:0},

                              {x:150,y:0}]

                        },

              granulate:{visible:false},

              flocculate:{

            			 number:1,	       // 1 = one element by one, more = by groupe of n

            			 action:"buffer",       	// [buffer,continue]

            			 strategy:"Size",       	// [BufferSize, Time, AcummulationAreaHeight, Fps, Manual]

                   bufferSize:5,         	  // number of token to make floculation

            			 bufferTime:1000,      	  // time buffer to make flocullation

            			 bufferHeight:50,       	// height (pixel) to make floculation

            			 bufferFrameRate:25,    	// if the computer is to slow floculate

                   buffer:[]

    					},

              suspension:{

                          height:null,      // pourcent,adaptative

                          incomming:'top',

                          decay:{power:1.001}, // null

                          refresh:200

                         },

              accumulation:{height:null},   // pourcent ,adaptative

              aggregation:{height:0, maxData:0, invertStrata:false},       // pourcent ,adaptative

          },

          options:{

                  refresh:1000/25,

                  panel:false,

                  scale:30,

                  layout:false,

                  canvasFirst:true

                  }

          }

    this.now = function(){

      return(new Date().getTime())

    }

     // get Box2d World 

     this.globalDecay = function (value){

      if(typeof(value)=='undefined'){

        return this.settings.sedimentation.suspension.decay.power

      }else{

        return this.settings.sedimentation.suspension.decay.power=value

      }

     }

     // get Box2d World 

     this.getWorld = function (){

      return this.world;

     }

     this.chartUpdate = function (cat,y){

      var options = {cat:cat,y:y}

      this.chart[this.settings.chart.type](self,'update',options)

     }

     // Todo  ...... 

     this.flocculateTokens = function (number){

      return this.flocculate.update(self,number)

     }

     // TODO DESTROY ALL TOKENS 

    this.flocculateAll = function(){

        return this.flocculate.all(self)

     }

     // Add token function 

     this.addToken = function (element){

      //var token = this.token.addToken(self,element)

      return this.token.addToken(self,element);

     }

     // Select token fonction

     this.selectAll = function (key,value){

      return this.token.selectAll(self,key,value);

     }

     // Select token fonction

     this.select = function (key,value){

      return this.token.select(self,key,value);

     }

     // update a categoryr in the chart

     this.updateAll = function (values){

      var tokens = this.chart.updateAll(self,key,value)

      return tokens;

     }

     // update a category in the chart

     this.update = function (key,value){

      var tokens = this.chart.update(self,key,value)

      return tokens;

     }

    /// Settings without 

    //////////////////////////////////////////////////////// TO CLEAN

    // SAM @ROM1 : are you sure you need that ? extend doing it well normally

  	// Merge options with defaults

    // http://stackoverflow.com/questions/171251/how-can-i-merge-properties-of-two-javascript-objects-dynamically

    //console.log("////////")

    //options.model = modelToStrata(options.data.model)

    function merge_options(obj1,obj2){

        var obj3 = {};

        for (var attrname in obj1) { obj3[attrname] = obj1[attrname]; }

        for (var attrname in obj2) { obj3[attrname] = obj2[attrname]; }

        return obj3;

    }

     merge_options(defaultSettings, options);

     if(options.data!=undefined)

     defaultSettings.data = options.data;

     ////////////////////////////////////////////////////////////////////////////////////

     // Merge option and add the DOMelement to setting

     //this.settings = $.extend(defaultSettings, options || {});

     this.settings = $.extend(true,defaultSettings, options);

     this.settings.DOMelement = element

     //console.log('settings after extend',this.settings)

     // -----------------------------------------------

     // SIMPLE DEFAULT SETTING FOR RETRO COMPATIBILITY 

     //

     if(typeof(this.settings.chart.width) =="undefined"){this.settings.chart.width = this.settings.width}

     if(typeof(this.settings.chart.x)     =="undefined")this.settings.chart.x=0

     if(typeof(this.settings.chart.y)     =="undefined")this.settings.chart.y=0

     if(typeof(this.settings.chart.height)=="undefined")this.settings.chart.height=this.settings.height

     if(typeof(this.settings.stream)      =="undefined"){this.settings.stream={}}

     if(typeof(this.settings.stream.now)  =="undefined"){this.settings.stream.now=0}     

     if(typeof(this.settings.stream.provider)=="undefined"){this.settings.stream.provider='generator'}

     if(typeof(this.settings.stream.refresh)=="undefined"){this.settings.stream.refresh=1000}

     if(typeof(this.settings.data.tokenPast)=="undefined"){this.settings.data.tokenPast=0}

     if(typeof(this.settings.data.tokens)=="undefined"){this.settings.data.tokens=[]}

     // FOR ROM1 setting by default aggregation : 

     if(typeof(this.settings.data.strata) !="undefined" && this.settings.data.strata.length!=0){

       if(typeof(this.settings.sedimentation.aggregation) =="undefined"){

          this.settings.sedimentation.aggregation = {}

        }

       if(typeof(this.settings.sedimentation.aggregation.height) =="undefined"){

          this.settings.sedimentation.aggregation.height = this.settings.chart.height/2

       }

      if(typeof(this.settings.sedimentation.aggregation.maxData) =="undefined"){

          this.settings.sedimentation.aggregation.maxData = 10

       }

     }

     // END

     // Initialisation - Private method 

     this.init = function(){

       // requestAnim shim layer by Paul Irish

       // not use yet, to add

       this.requestAnimFrame = (function(){

         return  window.requestAnimationFrame       || 

                 window.webkitRequestAnimationFrame || 

                 window.mozRequestAnimationFrame    || 

                 window.oRequestAnimationFrame      || 

                 window.msRequestAnimationFrame     || 

                 function(/* function */ callback, /* DOMElement */ element){

                   window.setTimeout(callback, 1000 / 60);

                 };

       })();

        //console.log(this.settings)

        //console.log('Initialisation');

        // Create the physical simulation 

   		   this.world = new this.phy.b2World(

   		      new this.phy.b2Vec2(0, 0)       //gravity

   		     ,  true                 //allow sleep

   		   );

   	    // Create container and canvas for physical simulation drawing 

		    var container = element.appendChild(document.createElement("div"));

		    container.id  = "box_sediviz_"+GUID()

        container.width  = this.settings.width; // TOFIX

        container.height = this.settings.height;

        //console.log(container.id)

        // Allocate the new Element 

        this.settings.DOMelement = container

		    canvas 		    = container.appendChild(document.createElement("canvas"));

		    canvas.id 	  = "canvas";

		    canvas.width  = this.settings.width; // TOFIX

		    canvas.height = this.settings.height;

        canvas.style.position = "absolute"

        //console.log(this.settings.width,this.settings.height)

        this.ctx = canvas.getContext("2d");  

       // Construct the Chart

       this.chart[this.settings.chart.type](self,'init')

       // Draw d3

       //if(typeof(this.settings.options.debugaggregate)=="undefined"){

       // this.aggregate.init(self);

       //}

       // Initiatlise stream 

       this.stream.init(self)

       // Initiatlise decay

       this.flocculate.init(self)

       // Update stream 

       this.stream.update(self);

       // Initiatlise tokens 

       this.token.init(self)

       //FORCE UPDATE CHART due to  (bug positionnement ) @rom1

      this.strata.init(this)

   		 // Update the physical simulation 

  		 window.setInterval(

              function(){self.update(self);},

               self.settings.options.refresh/2

              );

       // Refresh canvas drawings 

       window.setInterval(

              function(){self.draw.update(self);},

              self.settings.options.refresh

              );

       // Update Decay 

       window.setInterval(

              function(){self.decay.update(self);},

              self.settings.sedimentation.suspension.refresh

       );