/*
  
  Appends divs to a block element that can then be styled to create corners and drop shadows.
  The classes of the divs appended that can be styled are:
    .topLeft
    .bottomLeft
    .topRight
    .bottomRight
    .leftShadow
    .bottomShadow
    .rightShadow
    .topShadow
    
  Also adds a class 'cornered' to the element itself.
  
  IE requires any target element used to have layout (eg a width or height defined etc)
  
*/

jQuery.fn.decorateBlocks = function(options){
  
  //options
  var corner = true;
  var cornerSize = 10;
  var shadowSize = 0;
  var cap = false;
  
  if(options){
    if(options.shadow) shadow = true;
    if(options.cornerSize) cornerSize = options.cornerSize;
    if(options.shadowSize) shadowSize = options.shadowSize;
    if(options.cap) cap = options.cap;
  }
  
  var totalSize = cornerSize+shadowSize;
  
  //build corners for each item
  jQuery(this).each(function(i, e){
    
    var el = jQuery(e);
    
    var backgroundImage = el.css("backgroundImage");
    var backgroundColor = el.css("backgroundColor");
    var backgroundRepeat = el.css("backgroundRepeat");
    var backgroundPosition = "0px "+cornerSize+"px";//el.css("backgroundPosition");
        
    if(el.data("cornerContainer")){
      backgroundImage = el.data("cornerContainer").find(".middle").css("backgroundImage");
      backgroundColor = el.data("cornerContainer").find(".middle").css("backgroundColor");
      backgroundRepeat = el.data("cornerContainer").find(".middle").css("backgroundRepeat");
      backgroundPosition = el.data("cornerContainer").find(".middle").css("backgroundPosition");
      el.data("cornerContainer").remove();
    }
    
    el.addClass("cornered");
    
    
    el.css({background:"none", overflow:"visible", zoom:"1"});
    el.children().css({zoom:"1"});
    if(el.css("position") != "absolute") el.css({position:"relative"});
    
    var cornerContainer = jQuery('<div class="cornerContainer"></div>').css({
      position:"absolute",
      top:"0",
      left:"0",
      zIndex:"-1",
      overflow:"visible",
      fontSize:"0",
      lineHeight:"0",
      margin:"0",
      padding:"0",
      border:"0",
      outline:"0",
      'float':"none",
      clear:"both",
      width:"100%",
      height:"100%"
    });
    el.append(cornerContainer);
    
    el.data("cornerContainer", cornerContainer);
    
    
    if(cap){
      
      var numberOfCaps = 0;
      //create caps
      if(cap.top){
        var top = jQuery('<div class="top png"></div>');
        top.css({width:"100%", height:totalSize+"px", paddingLeft:(shadowSize*2)+"px", marginTop:"-"+shadowSize+"px", marginLeft:"-"+shadowSize+"px", marginBottom:"-"+cornerSize+"px" });
        numberOfCaps++;
      }
      if(cap.bottom){
        var bottom = jQuery('<div class="bottom"></div>');
        bottom.css({width:"100%", height:totalSize+"px", paddingLeft:(shadowSize*2)+"px", marginLeft:"-"+shadowSize+"px", marginTop:"-"+cornerSize+"px" });
        numberOfCaps++;
      }
      
      //add middle
      var middleWrap = jQuery("<div class='middleWrap' style='height: 100%; width: 100%; position: relative; overflow:visible;'></div>");
      var middleOffset = jQuery("<div class='middleOffset' style='overflow: hidden; position:relative; width: 100%; height: 100%;'></div>");
      middleOffset.css({paddingLeft:shadowSize+"px", paddingRight:shadowSize+"px", marginLeft:"-"+shadowSize+"px"});
      if(top) middleOffset.css({top:cornerSize+"px"});
      middleWrap.append(middleOffset);
      var middle = jQuery("<div class='middle' style='width: 100%; height: 100%; position: relative; overflow: visible; '></div>");
      middle.css({top:"-"+(cornerSize*numberOfCaps)+"px", backgroundColor:backgroundColor, backgroundImage:backgroundImage, backgroundRepeat:backgroundRepeat, backgroundPosition:backgroundPosition});
      middleOffset.append(middle);
      
      //create shadows if needed
      if(shadowSize > 0){
        var leftShadow = jQuery('<div class="leftShadow"></div>');
        var rightShadow = jQuery('<div class="rightShadow"></div>');
        leftShadow.css({width:shadowSize+"px", height:"100%", 'float':"left", display:"inline", marginLeft:"-"+shadowSize+"px"});
        rightShadow.css({width:shadowSize+"px", height:"100%", 'float':"right", display:"inline", marginRight:"-"+shadowSize+"px"});
        middle.append(leftShadow);
        middle.append(rightShadow);
      }
      
      //append bits in the right order
      if(top) cornerContainer.append(top);
      cornerContainer.append(middleWrap);
      if(bottom) cornerContainer.append(bottom);
      
      
      //deal with IE
      if(isMSIE6){
        cornerContainer.css({height:cornerContainer.parent().innerHeight()+"px"});
        cornerContainer.data("innerHeight", cornerContainer.parent().innerHeight());
        jQuery.decorateBlocksChecker.addElementToCheck(cornerContainer);
        jQuery.decorateBlocksChecker.init();
        //fix pngs
        if(DD_belatedPNG){
          if(top) DD_belatedPNG.fixPng( top.get(0) );
          if(bottom) DD_belatedPNG.fixPng( bottom.get(0) );
          if(leftShadow) DD_belatedPNG.fixPng( leftShadow.get(0) );
          if(rightShadow) DD_belatedPNG.fixPng( rightShadow.get(0) );
          DD_belatedPNG.fixPng( middle.get(0) );
        }
        
      }
      
      
    } else {
      //create corners
      var topleft = jQuery('<div class="topLeft"></div>');
      var bottomright = jQuery('<div class="bottomRight"></div>');
      var topright = jQuery('<div class="topRight"></div>');
      var bottomleft = jQuery('<div class="bottomLeft"></div>');
      
      //style corners
      topleft.css({width:totalSize+"px", height:totalSize+"px"});
      bottomleft.css({width:totalSize+"px", height:totalSize+"px"});
      topright.css({width:totalSize+"px", height:totalSize+"px"});
      bottomright.css({width:totalSize+"px", height:totalSize+"px"});
      
      //create sidebars
      var top = jQuery('<div class="topBar"></div>');
      var bottom = jQuery('<div class="bottomBar"></div>');
      var left = jQuery('<div class="leftBar"></div>');
      var right = jQuery('<div class="rightBar"></div>');
      
      //style sidebars
      top.css({width:(el.innerWidth()-(cornerSize*2))+"px", height:cornerSize+"px", backgroundColor:backgroundColor, backgroundImage:backgroundImage});
      bottom.css({width:(el.innerWidth()-(cornerSize*2))+"px", height:cornerSize+"px", backgroundColor:backgroundColor, backgroundImage:backgroundImage});
      left.css({width:cornerSize+"px", height:(el.innerHeight()-(cornerSize*2))+"px", backgroundColor:backgroundColor, backgroundImage:backgroundImage});
      right.css({width:cornerSize+"px", height:(el.innerHeight()-(cornerSize*2))+"px", backgroundColor:backgroundColor, backgroundImage:backgroundImage});
      
      
      //add middle
      var middle = jQuery("<div></div>");
      middle.css({width:(el.innerWidth()-(cornerSize*2))+"px", height:(el.innerHeight()-(cornerSize*2))+"px", backgroundColor:backgroundColor, backgroundImage:backgroundImage});
      
      //if a shadow is needed
      if(shadowSize > 0){
        
        //create shadows
        var topShadow = jQuery('<div class="topShadow"></div>');
        var bottomShadow = jQuery('<div class="bottomShadow"></div>');
        var leftShadow = jQuery('<div class="leftShadow"></div>');
        var rightShadow = jQuery('<div class="rightShadow"></div>');
        
        //style shadows
        topShadow.css({width:(el.innerWidth()-(cornerSize*2))+"px", height:shadowSize+"px"});
        bottomShadow.css({width:(el.innerWidth()-(cornerSize*2))+"px", height:shadowSize+"px"});
        leftShadow.css({width:shadowSize+"px", height:(el.innerHeight()-(cornerSize*2))+"px"});
        rightShadow.css({width:shadowSize+"px", height:(el.innerHeight()-(cornerSize*2))+"px"});
        
      }
      
      //append bits in the right order
      cornerContainer.append(topleft);
      cornerContainer.append(topShadow);
      cornerContainer.append(top);
      cornerContainer.append(topright);
      cornerContainer.append(leftShadow);
      cornerContainer.append(left);
      cornerContainer.append(middle);
      cornerContainer.append(right);
      cornerContainer.append(rightShadow);
      cornerContainer.append(bottomleft);
      cornerContainer.append(bottom);
      cornerContainer.append(bottomShadow);
      cornerContainer.append(bottomright);
      
      
      //set all bits common css
      cornerContainer.children().css({'float':"left", clear:"none", display:"inline", fontSize:"0", lineHeight:"0", padding:"0", margin:"0", border:"0", outline:"0" });
      
      topright.css({marginTop:"-"+shadowSize+"px"});
      
      leftShadow.css({clear:"left"});
      
      bottomright.css({marginTop:"-"+cornerSize+"px"});
      
      var doResize = function(){
        cornerContainer.css({width:(el.innerWidth()+(shadowSize*2))+"px", height:(el.innerHeight()+(shadowSize*2))+"px"});
        middle.css({width:(el.innerWidth()-(cornerSize*2))+"px", height:(el.innerHeight()-(cornerSize*2))+"px"});
        right.css({height:(el.innerHeight()-(cornerSize*2))+"px"});
        left.css({height:(el.innerHeight()-(cornerSize*2))+"px"});
        top.css({width:(el.innerWidth()-(cornerSize*2))+"px"});
        bottom.css({width:(el.innerWidth()-(cornerSize*2))+"px"});
        if(shadow){
          topShadow.css({width:(el.innerWidth()-(cornerSize*2))+"px"});
          bottomShadow.css({width:(el.innerWidth()-(cornerSize*2))+"px"});
          leftShadow.css({height:(el.innerHeight()-(cornerSize*2))+"px"});
          rightShadow.css({height:(el.innerHeight()-(cornerSize*2))+"px"});
        }
      }
      
      doResize();
      
      //setup fontResize handler to adjust this item when the fonts resize
      jQuery(window).fontResize(doResize);
      
      
      //deal with IE
      if(isMSIE6){
        
        //fix pngs
        if(DD_belatedPNG){
          DD_belatedPNG.fixPng( topleft.get(0) );
          DD_belatedPNG.fixPng( bottomleft.get(0) );
          DD_belatedPNG.fixPng( topright.get(0) );
          DD_belatedPNG.fixPng( bottomright.get(0) );
          DD_belatedPNG.fixPng( top.get(0) );
          DD_belatedPNG.fixPng( bottom.get(0) );
          DD_belatedPNG.fixPng( right.get(0) );
          DD_belatedPNG.fixPng( left.get(0) );
          DD_belatedPNG.fixPng( middle.get(0) );
          if(shadow){
            DD_belatedPNG.fixPng( topShadow.get(0) );
            DD_belatedPNG.fixPng( bottomShadow.get(0) );
            DD_belatedPNG.fixPng( leftShadow.get(0) );
            DD_belatedPNG.fixPng( rightShadow.get(0) );
          }
        }
        
      }
    
    }
    
  });
  
};



var isMSIE6 = jQuery.browser.msie && jQuery.browser.version < 7;

//PURELY FOR IE6, since the cornerContainer height 100% doesnt work
jQuery.decorateBlocksChecker = {
  
  initted:false,
  
  init:function(){
    if(jQuery.decorateBlocksChecker.initted) return;
    jQuery.decorateBlocksChecker.initted = true;
    if(isMSIE6) {
      jQuery.decorateBlocksChecker.checkInterval = setInterval(jQuery.decorateBlocksChecker.checkElements, 100);
    }
  },
  
  elementsToCheck:[],
  
  addElementToCheck:function(element){
    jQuery.decorateBlocksChecker.elementsToCheck.push(element);
  },
  
  checkElements:function(){
    var els = jQuery.decorateBlocksChecker.elementsToCheck;
    var len = els.length;
    for(var i = 0; i < len; i++){
      var e = els[i];
      var parentHeight = e.parent().innerHeight();
      if(e.data("innerHeight") != parentHeight){
        e.data("innerHeight", parentHeight);
        e.css({height:parentHeight+"px"});
        e.find('.middleWrap').css({height:"0px"}).css({height:"100%"});
      }
    }
  }
  
  
}