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

// our declared class
dojo.declare("xenomorph.RoundedCorners",
  [dijit._Widget, dijit._Templated],
  // class properties:
  {    
    templatePath: null,
    // Necessary to keep Dijit from using templateString in AccordionPane
    templateString: [
                    '<div class="Xenomorph_RoundedCorners">',
                      '<div class="Top"    dojoAttachPoint="topNode"></div>',
                      '<div class="Middle" dojoAttachPoint="containerNode"></div>',
                      '<div class="Bottom" dojoAttachPoint="bottomNode"></div>',
                    '</div>'
                    ].join( ' ' ),
    
    // src: String
    src: null,
    
    //Params
    backgroundColour: '#ffffff',
    borderWidth: 0,
    borderColour: '',
    cssOnly: 'no',
    foregroundColour: '#000000',
    paintBottom: 'yes',
    paintTop:    'yes',
    radius: 3,
    
    //Start the widget.
    startup: function(){
      
      this.inherited("startup",arguments);
      
      this.startUpLoadEngine();
    },
    
    //Populate the engine
    startUpLoadEngine: function(){
      
      //Auto detect whether or not to use css
      if( this.cssOnly == 'auto' ){
        this.startUpLoadEngine_autodetect();
      }
      
      //Non css rounded corners
      if( this.cssOnly == 'yes' ){
        this.startUpLoadEngine_css();
      }
      
      //Css rounded corners
      if( this.cssOnly == 'no' ){
        this.startUpLoadEngine_div()
      }
    },
    
    //Handle the auto detect
    startUpLoadEngine_autodetect: function(){
      
      if( !this.statics.autoDetect ){
        var body = dojo.query( 'html body' )[0];
        
        dojo.addClass( body, 'BorderRadius09' );
        
        var css3    = dojo.style( body, 'borderRadius'       );
        var mozilla = dojo.style( body, 'MozBorderRadius'    );
        var webkit  = dojo.style( body, 'WebkitBorderRadius' );
        
        if( (typeof css3    != 'undefined') ||
            (typeof mozilla != 'undefined') ||
            (typeof webkit  != 'undefined')   ){
          this.cssOnly = 'yes'; 
        }else{
          this.cssOnly = 'no';
        }
        
        dojo.removeClass( body, 'BorderRadius09' );
        
        this.statics.autoDetect = this.cssOnly;
      }
      
      if( this.statics.autoDetect )
        this.cssOnly = this.statics.autoDetect;
    },
    
    //The css case
    startUpLoadEngine_css: function(){
      
      var style_bottom = {};
      var style_top    = {};
      
      if( this.paintBottom == 'yes' ){
        
        style_bottom['height'] =          this.radius + 'px';
        style_bottom['backgroundColor'] = this.foregroundColour;
        
        style_bottom['borderBottomRightRadius'] = '9px';
        style_bottom['borderBottomLeftRadius'] =  '9px';
        
        style_bottom['MozBorderRadiusBottomright'] = '9px';
        style_bottom['MozBorderRadiusBottomleft'] =  '9px';
        
        style_bottom['WebkitBorderBottomRightRadius'] = '9px';
        style_bottom['WebkitBorderBottomLeftRadius'] =  '9px';
        
        if( (this.borderWidth > 0) && (this.borderColour != '') ){
          style_bottom['border'] =     this.borderWidth + 'px solid ' + this.borderColour;
          style_bottom['borderTop'] = 'none';
        }
      }
      
      if( this.paintTop == 'yes' ){
        
        style_top['height'] =          this.radius + 'px';
        style_top['backgroundColor'] = this.foregroundColour;
        
        style_top['borderTopRightRadius'] = '9px';
        style_top['borderTopLeftRadius'] =  '9px';
        
        style_top['MozBorderRadiusBottomright'] = '9px';
        style_top['MozBorderRadiusBottomleft'] =  '9px';
        
        style_top['WebkitBorderBottomRightRadius'] = '9px';
        style_top['WebkitBorderBottomLeftRadius'] =  '9px';
        
        if( (this.borderWidth > 0) && (this.borderColour != '') ){
          style_top[ 'border'] =       this.borderWidth + 'px solid ' + this.borderColour;
          style_top[ 'borderBottom'] = 'none';
        }
      }
      
      dojo.style( this.bottomNode, style_bottom );
      dojo.style( this.topNode,    style_top    );
    },
    
    //The divs case
    startUpLoadEngine_div: function(){
      
      var dimensions = dojo.coords( this.containerNode );
        
      var maxWidth = dimensions.w;
      
      var style_bottom = { 'width':  maxWidth + 'px',
                           'height': this.radius + 'px',
                           'backgroundColor': this.backgroundColour
                          };
      var style_middle = { 'width': maxWidth + 'px',
                           'backgroundColor': this.foregroundColour
                          };
      var style_top    = { 'width': maxWidth + 'px',
                           'height': this.radius + 'px',
                           'backgroundColor': this.backgroundColour
                          };
      
      //Handle colours/layout if the bottombar is NOT drawn
      if( this.paintBottom == 'no' ){
        style_bottom['backgroundColor'] = this.foregroundColour;
        style_bottom['display'        ] = 'none';
        style_bottom['visiblity'      ] = 'hidden';              
      }
        
      //Handle colours/layout if the topbar is NOT drawn
      if( this.paintTop == 'no' ){
        style_top['backgroundColor'] = this.foregroundColour;
        style_top['display'        ] = 'none';
        style_top['visiblity'      ] = 'hidden';
      }
      
      dojo.style( this.bottomNode,    style_bottom );
      dojo.style( this.containerNode, style_middle );
      dojo.style( this.topNode,       style_top    );
      
      //Draw the bars
      for( var y = this.radius - 1; y >= 0; y-- ){
        
        var x = this.type_corner_circular( y, this.radius );
        //var x = this.type_corner_edge(     y, this.radius );
        //var x = this.type_corner_soft(     y, this.radius );
        
        //Adjust for border pixel
        //if( (this.borderWidth > 0) && (this.borderColour != '') ){
        //  x = x - this.borderWidth;
        //}
        
        //Layout
        var a = dojo.doc.createElement( 'div' );
        var b = dojo.doc.createElement( 'div' );
        
        var style_a = { 'width': (dimensions.w - 2*(this.radius-x)) + 'px',
                        'height': '1px',
                        'marginLeft': (this.radius-x) + 'px',
                        'marginRight': (this.radius-x) + 'px',
                        'padding': '0px',
                        'backgroundColor': this.foregroundColour,
                        'lineHeight': '1px'
                        
                       };
        var style_b = { 'width': (dimensions.w - 2*(this.radius-x)) + 'px',
                        'height': '1px',
                        'marginLeft': (this.radius-x) + 'px',
                        'marginRight': (this.radius-x) + 'px',
                        'padding': '0px',
                        'backgroundColor': this.foregroundColour,
                        'lineHeight': '1px'
                       };
        
        //Set the border
        if( (this.borderWidth > 0) && (this.borderColour != '') ){
          style_a['borderLeft' ] = this.borderWidth + 'px solid ' + this.borderColour;
          style_a['borderRight'] = this.borderWidth + 'px solid ' + this.borderColour;
           
          style_b['borderLeft' ] = this.borderWidth + 'px solid ' + this.borderColour;
          style_b['borderRight'] = this.borderWidth + 'px solid ' + this.borderColour;
          
          if( y >= (this.radius - 1 - this.borderWidth) ){
            style_a.backgroundColor = this.borderColour;
            style_b.backgroundColor = this.borderColour;
          }
          
          //Middle area cleanup
          dojo.style( this.containerNode, 'borderLeft',  this.borderWidth + 'px solid ' + this.borderColour );
          dojo.style( this.containerNode, 'borderRight', this.borderWidth + 'px solid ' + this.borderColour );
        }
        
        dojo.style( a, style_a);
        dojo.style( b, style_b);
        
        //Insert the bottom div
        if( this.paintBottom == 'yes' ){
          this.bottomNode.insertBefore( a, this.bottomNode.firstChild );
        }
        
        //Insert the top div
        if( this.paintTop == 'yes' ){
          this.topNode.appendChild( b );
        }
      }
    },
    
    //Corner type - circular
    type_corner_circular: function( y, radius ){
      
      var x = Math.sqrt( radius*radius - y*y );
      x     = Math.round( x );
      
      return x;
    },
    
    //Corner type - edge
    type_corner_edge: function( y, radius ){
      var x = radius - y;
      
      return x;
    },
    
    //Corner type - soft
    type_corner_soft: function( y, radius ){
      
      var scale = 1.5/radius;
      
      var x = radius - y*y*scale;
      
      x = Math.floor( x );
      
      return x;
    },
    
    statics: { 'enclosingPageLoaded': false }
  }
);

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