var ShrinkingBlockContainer = Class.create( {

	parent_container : undefined,
	container : undefined,
	middle_block_index : undefined,
	cur_opacity : 0,
	max_height : 0,
	 
	initialize : function( parent_element_id, config_file ){
		
		this.blocks = new Array();
		this.parent_container = $(parent_element_id)
		this.container = document.createElement( "div" );
	    this.container.className = "block-container";
	    this.container.id = "block-container";
	    this.parent_container.appendChild( this.container );
	    
	    
	    this.loadContentConfig( config_file );
	   
	},
	
	
	loadContentConfig : function( config_file ){
		
		var container = this;

		var request = new Ajax.Request( config_file, {
		
		  method : 'get',
		  onSuccess : function(transport){
		  	
		  	
		  	ShrinkingBlockContainer.prototype.configLoaded.apply( container, new Array( transport ) );
		  },
		  
		  onFailure : function( transport ){
		  	
		  	ShrinkingBlockContainer.prototype.configFailed.apply( container, new Array( transport ) );
		  }
		  
		});

		
	},
	
	
	
	configLoaded : function( request ){
			
		
			var config = eval( "(" + request.responseText + ")" );
		
			this.createBlocks( config );

	},
	
	
	configFailed : function( request ){
	
	    console.info( "failed to load config: " + request.responseText );
		
	},
	
	
	
	createBlocks : function( config ){

	  var items = config.items;	  
	  
	  for( var i=0; i<items.length; i++ ){
	
	  	var item = items[i];
	  
	// DISPLAY BLOCK
		var block = document.createElement( "div" );
		block.className = "block";
		block.id = "block-" + i;

		this.container.appendChild( block );

	// SCREEN	childNodes[0]
		var screen = document.createElement( "div");
		screen.className = "screen";
	
		block.appendChild( screen );

	// CONTAINER  childNodes[1]
		var content_container = document.createElement( "div" );
		content_container.className = "content-container";
		content_container.setAttribute( "index", i );
		
    // IMAGE container.childNodes[0]
		var image_container = document.createElement( "div" );
		image_container.className = "image-container";
		var image = document.createElement( "img" );
		image.className = "image";
		image.src = item.image_file;
		image_container.appendChild( image );
		
		
	// CAPTION container.childNodes[1]
		var caption_container = document.createElement( "div" );
		caption_container.className = "caption-container";
		caption_container.appendChild( document.createTextNode( item.caption ) );
		
		content_container.appendChild( image_container );
		content_container.appendChild( caption_container );
		
		block.appendChild( content_container );

		var dbc = this;
		if( block.addEventListener ){
		
		  block.addEventListener( "mouseover", function(){ dbc.blockOver.apply(     dbc,  new Array( this ) ); }, false );
		  block.addEventListener( "mouseout" , function(){ dbc.blockOut.apply(      dbc,  new Array( this ) ); }, false );
		  block.addEventListener( "click" ,    function(){ dbc.shiftBlocks.apply(  dbc,  new Array( this ) ); }, false );
		  
		}else{
	      	
		  block.attachEvent( "onmouseover",    function(){ dbc.blockOver.apply( dbc,  new Array( display_block ) ); } );	
		  block.attachEvent( "onmouseout" ,    function(){ dbc.blockOut.apply(  dbc,  new Array( display_block ) ); } );
		  block.attachEvent( "onclick" ,       function(){ dbc.shiftBlocks.apply(  dbc,  new Array( display_block ) ); } );
		}
	
	  }
	    this.middle_block_index = 3;    	    
	    this.paintBlocks();
	
    },
    
    
    blockOver : function( target_block ){
    	
    	target_block.childNodes[1].style.borderColor = "white";
    },
    
    
    blockOut : function( target_block ){
    	
    	target_block.childNodes[1].style.borderColor = "black";
    },
    
    
    
    shiftBlocks : function( target_block ){
    	
    	var dbc = this;
    	this.animation_interval_id = window.setInterval( function(){
    	
    		ShrinkingBlockContainer.prototype.hideBlocks.apply( dbc, new Array(target_block) );
    	
    	}, 10 );
    	
    },


    hideBlocks : function(target_block){
    	    	
    	for( var i=0; i<this.container.childNodes.length; i++ )
    		this.container.childNodes[i].firstChild.style.opacity = this.cur_opacity;
    
    	
    	var dbc = this;
    	if( this.cur_opacity >= 1 ){
    	   
    		for( var i=0; i<this.container.childNodes.length; i++ )
    		  this.container.childNodes[i].childNodes[1].style.display = "none";
    		window.clearInterval( this.animation_interval_id );
    		this.animation_interval_id = window.setInterval( function(){
   
    		 ShrinkingBlockContainer.prototype.shrinkBlocks.apply( dbc, new Array(target_block) );	
    		
    		}, 10 );
    	}  
    	
    	this.cur_opacity += 0.2;
    	
    },
    
    
    
    
    shrinkBlocks : function(target_block){
    	

    	for( var i=0; i<this.container.childNodes.length; i++ ){    		
    		
    		var block = this.container.childNodes[i];
    		
    		var cur_w = parseInt( block.style.width );
    		cur_w -= 20;
    		if( cur_w < 0 )
    		 cur_w = 0;
    		 
    		block.style.width = block.style.height  = cur_w + "px";
    		
    		var cur_l = parseInt( block.style.left );
    		cur_l += 10;
    		
    		var max_left = Number(block.getAttribute( "start_left" )) + Math.round(block.getAttribute( "max_height" )/2);

    		if( cur_l > max_left )
    		  cur_l = max_left;
    		block.style.left  = cur_l + "px";

    	}
    	
    	
    	var dbc = this;
    	if( parseInt( this.container.childNodes[this.middle_block_index].style.width ) <= 0 ){

    		window.clearInterval( this.animation_interval_id );
    		ShrinkingBlockContainer.prototype.shiftContent.apply( dbc, new Array( target_block ) );
    	}
    	
    	
    },    
    
    
    
    
    
    shiftContent : function( target_block ){
    
       var block_index = parseInt( target_block.childNodes[1].getAttribute( "index" ) );
       var middle_index = this.middle_block_index;
       
       
       var total_blocks = this.container.childNodes.length;
       var block_buffer = new Array();
       
       
     // THIS MAKES THE CLICKED BOX FIRST IN THE ARRAY  
       for( var i=block_index; i<total_blocks; i++ ){
       
          block_buffer.push( this.container.childNodes[i].removeChild( this.container.childNodes[i].childNodes[1] ) ); 
       }
       
       for( var i=0; i<block_index; i++ ){
       
          block_buffer.push( this.container.childNodes[i].removeChild( this.container.childNodes[i].childNodes[1] ) ); 
       }
       
       
      
     // THIS REINSERTS THE CONTENT BOXES STARTING AT THE MIDDLE DISPLAY BOX
       var last_insert_index = 0;
       for( var i=0; (middle_index+i)<block_buffer.length; i++ ){
       
          block_buffer[i].setAttribute( "index", (i+middle_index) );
          this.container.childNodes[middle_index+i].appendChild( block_buffer[i] );
          last_insert_index = i;
       }
       
       last_insert_index++;
       
       
     // AND THIS WRAPS THE REST BACK TO THE BEGINNING
       for( var i=0; (i+last_insert_index)<block_buffer.length; i++ ){
       
          block_buffer[i+last_insert_index].setAttribute( "index", i );
          this.container.childNodes[i].appendChild( block_buffer[i+last_insert_index] );
       }
       
       
     // SET THE FONT SIZES
       
       var font_size = 8;
       var blocks = this.container.childNodes;
       
       
       for( var i=0; i<total_blocks; i++ ){
       	
         var caption_container = blocks[i].down( ".caption-container" );
         caption_container.style.fontSize = font_size + "pt";
         
         if( i<this.middle_block_index ){
         
         	font_size++;
         
         }else if( i>this.middle_block_index ){
         	
         	font_size--;
         }
       	
       }
       
       
       
     // NOW REGROW AND SHOW THEM ALL
       var dbc = this;
       this.animation_interval_id = window.setInterval( function(){
   
    		  ShrinkingBlockContainer.prototype.growBlocks.apply( dbc, new Array() );	
    		
       }, 10 );
    
    },
    
    
    
    
    growBlocks : function(){
    
    	
    
    	for( var i=0; i<this.container.childNodes.length; i++ ){    		
    		
    		var block = this.container.childNodes[i];
    		var cur_w = parseInt( block.style.width );
    		cur_w += 20;
    		
    		if( cur_w > block.getAttribute( "max_height" ) )
    		 cur_w = block.getAttribute( "max_height" );
    		
    		block.style.width = block.style.height = cur_w + "px";
    		

    		var cur_l = parseInt( block.style.left );
    		cur_l -= 10;
    		if( cur_l <= block.attributes.start_left.value )
    		  cur_l = block.attributes.start_left.value; 
    		block.style.left = cur_l + "px";
   		
    	}
    	
    	var dbc = this;
    	if( parseInt( this.container.childNodes[this.middle_block_index].style.width ) >= this.container.childNodes[this.middle_block_index].attributes.max_height.value ){
    	  
    		for( var i=0; i<this.container.childNodes.length; i++ )
    		  this.container.childNodes[i].childNodes[1].style.display = "block";
    		
    		window.clearInterval( this.animation_interval_id );
    		this.animation_interval_id = window.setInterval( function(){
   
    		  ShrinkingBlockContainer.prototype.showBlocks.apply( dbc, new Array() );	
    		
    		}, 10);
    	}
   
    	
    },    
    
    
    showBlocks : function(){
    	
    	
    	for( var i=0; i<this.container.childNodes.length; i++ )
    	   this.container.childNodes[i].firstChild.style.opacity = this.cur_opacity;
    	   
    	

    	if( this.cur_opacity <= 0 ){
    	  window.clearInterval( this.animation_interval_id );
    	} 
    	this.cur_opacity -= 0.2;
    	
    },  
    
    
    
    

    
    

    
    
    paintBlocks : function(){
	
	  var left = 0;
	  var block_count = this.blocks.length;
	  var current_size = 1;
	  
	  var width = 100;
	  var height = 100;
	  
	  var left = findPosX( this.container );
	  var top =  findPosY( this.container );
	  
	  var font_size = 8;
	  
	  for( var i=0; i<this.container.childNodes.length; i++ ){

		  var block = this.container.childNodes[i];
		  
		  var caption_container = block.down( ".caption-container");
		  
		  block.style.left = left + "px";
		  block.style.top = top + "px";
		  block.setAttribute( "start_left", left );
		  
		  // IS MAIN DISPLAY BLOCK, SO MAKE IT BIGGGG
		  if( i == this.middle_block_index ){

		    block.style.height = "250px";
		    block.style.width =  "250px";
		    caption_container.style.fontSize = "12pt";
		    block.setAttribute( "max_height", 250 );
		    
		    width = height = parseInt( this.container.childNodes[i-1].style.width );
		    font_size = parseInt( this.container.childNodes[i-1].down( ".caption-container" ).style.fontSize );
		    
		  }else{
		  	
		    block.style.height = height + "px";
		    block.style.width = width + "px";	
		    caption_container.style.fontSize = font_size + "pt";
		    block.setAttribute( "max_height", width );
		  
		    if( i < this.middle_block_index ){
	  	  	  height = width += 20;
	  	  	  font_size++;
		    }else if( i > this.middle_block_index ){
		      height = width -= 20;
		      font_size--;
		    }
		  }
		  
		  left += parseInt( block.style.width ) + 4;
		    

	  }
	  
	  if( this.container.childNodes )
	   this.max_height = parseInt( this.container.childNodes[this.middle_block_index].style.height );
	
    }
	
})