function resizeFrame(resizingData,callback) 
{
    var page = resizingData.page
    var size= resizingData.size
    var size2= resizingData.size2
    var target = resizingData.target
    var style = resizingData.style 
    var attribute = resizingData.attribute
    
    //measure the window and document height and width dynamically    
    var w = $(window).width();
    var h = $(window).height();
    var wd = $(document).width();
    var hd = $(document).height();
    if (page=='portfolio'){
        portfolio(wd,w,h,hd,page,style,target,size,size2,attribute,resizingData)
        }
    if (page=='home'){
        home(wd,w,h,hd,page,style,target,size,attribute,resizingData)
        }
}


      function home(wd,w,h,hd,page,style,target,size,attribute,resizingData){
            
            if (wd< size) {
                    $(target[0]).css(style[2], attribute[2]);
                    $(target[2]).css(style[0], attribute[1]);
                    $(target[1]).css(style[1], attribute[0]);
                    $(target[1]).css(style[2], attribute[2]);
            }
            
            //when the browser window is increased horizontally remove the stylings on the surround two divs
            //IE JS error caused in the below block somewhere
            if (wd > size) {
                    $(target[0]).css(style[2], attribute[3]);
                    
                    $(target[2]).css(style[0], attribute[4]);
                    
                    $(target[1]).css(style[1], attribute[4]);
                    
                    $(target[1]).css(style[2], attribute[4]);

            }
                  
      }
      
        function portfolio(wd,w,h,hd,page,style,target,size,size2,attribute,resizingData){

            //alert(size2);
        
            if (wd< size) {
                   // $(target[0]).css(style[0], attribute[1]);//green
                    extra_portfolios(wd, size,resizingData)
              //do other functions here
            }
            
            if (wd > size) {
                    //$(target[0]).css(style[0], attribute[0]);orange
              //do other functions here
                    extra_portfolios(wd, size,resizingData)
            }
            
            if (wd>size2) {
                      $(target[0]).css(style[1], attribute[2]);
            
            }
            if (wd<size2) {
                      $(target[0]).css(style[1], attribute[3]);
            
            }
     
        }

      

        //show more boxes exponentially as the page expands - called by portfolio page
        function extra_portfolios(wd, size,resizingData) {
            if (wd< size){
                 $(".additional_boxes").html('');
            }
            if (wd > size && (wd % 10) == 0 ){
               
               //clear the div area
               var html='';
               //select a random portfolio set
               var x =Math.floor(Math.random()*resizingData.imageData.length)

                                             for(var i=0;i<2;i++){
                                                html+= '<div class="category_page_boxes">';
                                                html+= '<ul>                        ';
                                                html+= '<li><img src="images/categories/'+resizingData.imageData[x].image+'" alt="'+resizingData.imageData[x].alt+'" width="197" height="123" /></li>';
                                                html+= '<li><h3>'+resizingData.imageData[x].title+'</h3></li>';
                                                html+= '<li><a href="#" title="add"> <img class="plus_icon_with_no_subheading" src="images/categories/plus_icon.png" alt="plus_icon" width="10" height="10" /></a>    </li>';
                                                html+= '</ul>';
                                                html+= '</div>';
                                                
                                                i++;
                                                }
                                                
            $(".additional_boxes").append(html);

        

            }    
            
        }