// Simplified box model for easier layout

(function(){

  var mod = gwk.newModuleClass('simpleBox');

  mod.require('groundwork',0.01);

  mod.version = 0.01;

  mod.init = function(){

    gwk.prefs.simpleBox = {};
    gwk.prefs.simpleBox.targetDom = document.body;
    gwk.prefs.simpleBox.units = 'em';

    gwk.state.simpleBox = {};
    gwk.state.simpleBox.allNodes = [];   

    var testDiv = document.createElement("DIV");
    testDiv.id = 'gwk_simpleBox_oneEmTestDiv';
    testDiv.style.position = 'absolute';
    testDiv.style.left = '-1em';
    testDiv.style.top = '-1em';
    testDiv.style.width = '1em';
    testDiv.style.height = '1em';
    document.body.appendChild(testDiv);

    var poller = function(){
      gwk.prefs.simpleBox.oneem = testDiv.offsetWidth;
    }

    poller();

    window.setInterval(poller,100);

    return true;

  };

  mod.create = function(width,height,container,id){

    this.creator = this.constructor.creator;
    this.prefs = this.creator.prefs.simpleBox;
    this.state = this.creator.state.simpleBox;

    if(!id){
      if(typeof(container)=='string'){
	id = container;
      } else {
        id = 'unnamed' + this.state.allNodes.length;
      }
    };

    if(!container || typeof(container)=='string'){

      container = this.prefs.targetDom;

    } else {

      if(container.nodeType){
        // Stuff to do if this is an HTML element (which it must be, if it isn't a simpleBox object) - nothing right now.
      } else if(container.creator.modules) {
        container = container.domObj;
      };

    };

    height = height || 1;
    width = width || 1;

    var domObj = document.createElement('DIV');
    var styleObj = domObj.style;

    domObj.id = 'gwk_simpleBox_' + id;
    this.state.allNodes.push(domObj);
    domObj.className = 'simpleBox';
    styleObj.width = width + 'em';
    styleObj.height = height + 'em';

    var hrzn = document.createElement('DIV');
    hrzn.style.position = 'absolute';
    hrzn.style.width = '100%'
    hrzn.style.height = '1px';
    hrzn.style.top = '50%';
    hrzn.id = domObj.id + '_horizon';

    container.appendChild(hrzn);
    container.appendChild(domObj);

    this.container = container;
    this.horizon = hrzn;
    this.domObj = domObj;
    this.styleObj = styleObj;

  };

  mod.create.prototype.append = function(obj){

    if(!obj){
      log("simpleBox.append - no target object.",2);
      return
    };

    if(obj.nodeType){
      this.domObj.appendChild(obj);
    } else if(obj.creator.modules) {
      this.domObj.appendChild(obj.domObj);

      if(obj.horizon){ // Ensure the centering accessory for each simpleBox is its sibling
	this.domObj.appendChild(obj.horizon);
      }

      obj.container = this.domObj;

    };

  };

  mod.create.prototype.setBackgroundColor = function(r,g,b){

    if(!g){ // Assume it's a legal color string
      this.styleObj.backgroundColor = r;
    } else { // Assume it's an RGB triplet
      this.styleObj.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')';
    };

  };

  mod.create.prototype.setPos = function(top,left,units){

    top = top || 0;
    left = left || 0;

    this.styleObj.top = this.getDim(top,units);
    this.styleObj.left = this.getDim(left,units);

  };

  mod.create.prototype.setWidth = function(width,units){

    if(!width){return false};

    this.styleObj.width = this.getDim(width,units);

    if(this.state.hjustify=='right'){
      this.domObj.style.left = 'auto';
      this.domObj.style.right=this.state.hjustifyOffset;
    }



    if(this.state.hcentered){
      this.hcenter();
    };

    this.state.vwidth = false;

  };

  mod.create.prototype.setHeight = function(height,units){

    if(!height){return false};

    this.styleObj.height = this.getDim(height,units);

    if(this.state.vjustify=='bottom'){
      this.domObj.style.top = 'auto';
      this.domObj.style.bottom=this.state.vjustifyOffset;
    }



    if(this.state.vcentered){
      this.vcenter();
    }

    this.state.vheight = false;

  };

  mod.create.prototype.setDims = function(width,height,units){

    this.setWidth(width,units);
    this.setHeight(height,units);


  };

  mod.create.prototype.fillWidth = function(preGap, postGap, units){

    this.unhcenter();

    preGap = preGap || 0;
    postGap = postGap || 0;

    this.styleObj.width = 'auto';
    this.styleObj.left = this.getDim(preGap,units);
    this.styleObj.right = this.getDim(postGap,units); 

    this.state.hjustify = 'none';
    this.state.vwidth = true;

  };

  mod.create.prototype.fillHeight = function(preGap, postGap, units){

    this.unvcenter();

    preGap = preGap || 0;
    postGap = postGap || 0;

    this.styleObj.height = 'auto';
    this.styleObj.top = this.getDim(preGap,units);
    this.styleObj.bottom = this.getDim(postGap,units); 

    this.state.vjustify = 'none';
    this.state.vheight = true;

  };

  mod.create.prototype.justifyTop = function(offset,units){

    this.state.vjustify = 'top';

    offset = this.getDim(offset,units);

    var topMove = parseInt(this.styleObj.top) - parseInt(offset);

    this.unvcenter();

    if(this.styleObj.height == 'auto'){

      this.styleObj.bottom = (parseInt(this.styleObj.bottom) + topMove) + 'em';

    };

    this.styleObj.top = offset;

  };

  mod.create.prototype.justifyBottom = function(offset,units){

    this.state.vjustify = 'bottom';

    offset = this.getDim(offset,units);
    
    var bottomMove = parseInt(this.styleObj.bottom) - parseInt(offset);
    var oldTop = this.styleObj.top;

    this.unvcenter();

    if(this.styleObj.height == 'auto'){

      this.styleObj.top = (parseInt(oldTop) + bottomMove) + 'em';

    };

    this.styleObj.bottom = offset;

  };

  mod.create.prototype.justifyLeft = function(offset,units){ // Working

    this.state.hjustify = 'left';

    if(this.state.hcentered){
      this.unhcenter();
    }

    offset = this.getDim(offset,units);

    if(this.styleObj.right != 'auto'){ // Variable-width item, so track the right edge back with it

      var leftMove = parseInt(this.styleObj.left
) - parseInt(offset);
      this.styleObj.right = (parseInt(this.styleObj.right) + leftMove) + 'em';

    }

    this.styleObj.left = offset;

  };

  mod.create.prototype.justifyRight = function(offset,units){


    if(this.state.hcentered){
      this.unhcenter();
    }

    units = units || this.prefs.units;

    if(offset && units == 'px'){
      offset = this.px2em(offset);
      units = '';
    } else {
      offset = offset || 0;
    };

    if(this.styleObj.left != 'auto'){ // Variable-width item, so track the left edge back with it

      var rightMove = parseInt(this.styleObj.right
) - parseInt(offset);
      this.styleObj.left = (parseInt(this.styleObj.left) + rightMove) + 'em';

      if(this.state.vwidth!=true){
	this.styleObj.left = 'auto';
      };

    };

    this.state.hjustifyOffset = offset + units;

    this.styleObj.right = offset + units;

    this.state.hjustify = 'right';

  };

  mod.create.prototype.vcenter = function(){

    this.state.vcentered = true;

    if(this.styleObj.height != 'auto'){
      if(this.styleObj.height != this.px2em(this.domObj.offsetHeight)){
	var topOffset = (parseInt(this.styleObj.height)/2) + 'em';
      } else {
        var topOffset = this.px2em(this.domObj.offsetHeight/2)
      };

      this.horizon.appendChild(this.domObj);
      this.domObj.style.top = '-'+topOffset;

    } else {

      this.styleObj.top = this.styleObj.bottom = ((parseInt(this.styleObj.top) + parseInt(this.styleObj.bottom))/2) + 'em';    };

  };

  mod.create.prototype.unvcenter = function(){

    this.state.vcentered = false;
    this.container.appendChild(this.domObj);
    this.domObj.style.top = '';

  };

  mod.create.prototype.hcenter = function(){

    this.state.hcentered = true;

    if(this.styleObj.width != 'auto'){ // Fixed-width item
      if(this.styleObj.width != this.px2em(this.domObj.offsetWidth)){
	var marginOffset = (parseInt(this.styleObj.width)/2) + 'em';
      } else {
	var marginOffset = this.px2em(this.domObj.offsetWidth/2);
      };
      this.styleObj.left = '50%';
      this.styleObj.marginLeft = '-' + marginOffset;

    } else { // Variable-width item

      this.styleObj.left = this.styleObj.right = ((parseInt(this.styleObj.left) + parseInt(this.styleObj.right))/2) + 'em';


    };

  };

  mod.create.prototype.unhcenter = function(){

    this.state.hcentered = false

    if(this.styleObj.marginLeft!='')
{

      this.styleObj.left = '';
      this.styleObj.marginLeft = '';
    };

  };

  mod.create.prototype.px2em = function(px){
    return ( px / this.prefs.oneem ) + 'em';
  };

  mod.create.prototype.getDim = function(dim,unit){

    unit = unit || this.prefs.units;

    if(dim && unit == 'px'){
      var dim = this.px2em(dim);
      unit = '';
    } else {
      dim = dim || '0';
    }

    return dim + unit;

  };

})();