// all packages need to dojo.provide() _something_, and only one thing
dojo.provide("xenomorph.RoundedCorners2");

// our declared class
dojo.declare("xenomorph.RoundedCorners2",
  [dijit._Widget, dijit._Templated],
  // class properties:
  {
    templatePath: null,
    // Necessary to keep Dijit from using templateString in AccordionPane
    templateString: ['<div class="Xenomorph_RoundedCorners2">',
                       '<table>',
                         '<tbody>',
                           '<tr>',
                             '<td class="Left"></td>',
                             '<td class="Middle" dojoAttachPoint="containerNode"></td>',
                             '<td class="Right"></td>',
                           '</tr>',
                         '</tbody>',
                       '</table>',
                     '</div>'
                    ].join( ' ' ),
    
    // src: String
    src: null,
    
    //Params
    backgroundColour: '#ffffff',
    foregroundColour: '#000000',
    paintLeft:   'yes',
    paintRight:  'yes',
    radius: '3',
    
    //Start the widget.
    startup: function(){
      
      //Startup the widget
      this.inherited("startup",arguments);
      
      //Start things up.
      var lambda = function( aWidget, aDelay ){
        
        if( (typeof CapsoolGlobalVariables.enclosingPageLoaded == 'undefined') ||
            (CapsoolGlobalVariables.enclosingPageLoaded == false)                ){
          window.setTimeout(
            function(){ lambda( aWidget, aDelay ); },
            aDelay
          );
        }else{
          aWidget.startUpLoadEngine();
        }
      };
      
      lambda( this, 2000 );
    },
    
    //Populate the engine
    startUpLoadEngine: function(){
      
      var radius = parseInt( this.radius, 10 );
      
      //Components
      var left   = dojo.query( 'td.Left',   dojo.byId(this.id) )[0];
      var middle = dojo.query( 'td.Middle', dojo.byId(this.id) )[0];
      var right  = dojo.query( 'td.Right',  dojo.byId(this.id) )[0];
      
      var dimensions = dojo.coords( middle );
      
      var maxHeight = dimensions.h;
      
      //Resize for the corners
      dojo.style( left,  'width', radius + 'px');
      dojo.style( right, 'width', radius + 'px');
      
      dojo.style( left,  'height', maxHeight + 'px');
      dojo.style( right, 'height', maxHeight + 'px');
      
      dojo.style( middle, 'paddingLeft',  '0px');
      dojo.style( middle, 'paddingRight', '0px');
      
      //Colours
      dojo.style( left,   'backgroundColor', this.backgroundColour );
      dojo.style( middle, 'backgroundColor', this.foregroundColour );
      dojo.style( right,  'backgroundColor', this.backgroundColour );
      
      //Handle colours if the left bar is NOT drawn
      if( this.paintLeft == 'no' )
        dojo.style( left, 'backgroundColor', this.foregroundColour );
        
      //Handle colours if the right bar is NOT drawn
      if( this.paintRight == 'no' )
        dojo.style( right, 'backgroundColor', this.foregroundColour );
      
      //Draw the bars
      for( var x = radius; x > 0; x-- ){
        
        var y = Math.round( Math.sqrt( radius*radius - x*x) );
        y = y + '';
        y = parseInt( y, 10 );
        
        var a = document.createElement( 'div' );
        var b = document.createElement( 'div' );
        
        dojo.style( a, 'display', 'block' );
        dojo.style( b, 'display', 'block' );
        
        dojo.style( a, 'float', 'left'  );
        dojo.style( b, 'float', 'right' );
        
        dojo.style( a, 'width', '1px' );
        dojo.style( b, 'width', '1px' );
        
        dojo.style( a, 'height', (dimensions.h - 2*(radius-y)) + 'px');
        dojo.style( b, 'height', (dimensions.h - 2*(radius-y)) + 'px');
        
        dojo.style( a, 'marginTop', (radius-y) + 'px' );
        dojo.style( b, 'marginTop', (radius-y) + 'px' );
        
        dojo.style( a, 'marginBottom', (radius-y) + 'px' );
        dojo.style( b, 'marginBottom', (radius-y) + 'px' );
        
        dojo.style( a, 'padding', '0px' );
        dojo.style( b, 'padding', '0px' );
        
        dojo.style( a, 'backgroundColor', this.foregroundColour );
        dojo.style( b, 'backgroundColor', this.foregroundColour );
        
        if( this.paintLeft == 'yes' )
          left.appendChild( a ); //left.insertBefore( a, left.firstChild );
        
        if( this.paintRight == 'yes' )
          right.appendChild( b );
      }
    },
    
    statics: {}
  }
);

/**
 *Detect that the page has finished loading
 */
dojo.addOnLoad(
  function(){
    
    CapsoolGlobalVariables.enclosingPageLoaded = true;
  }
);