var adjustw = 10;
var adjusth = adjustw;
var	descin = false;
var	activein = false;
function GridBox(obj)
{
	//alert('work on single grid');
	var instance = this;
	instance.gridelement = $(obj.gridelement);	
	
	instance.stW = obj.stW;
	instance.stH = obj.stH;
	instance.exW = obj.exW;
	instance.exH = obj.exH;
	instance.adjustTop = (obj.stH-obj.exH)/2;
	instance.adjustLeft = (obj.stW-obj.exW)/2;
	instance.des_stH = 10;
	instance.des_stW = -7;
	
	instance.inactive = instance.gridelement.find('.inactive');
	instance.active = instance.gridelement.find('.active');
	instance.description = instance.active.find('.desc');
	
	
	instance.inactiveWidth = instance.gridelement.find('.inactive').width();
	instance.inactiveHeight = instance.gridelement.find('.inactive').width();
	
	instance.active.css('height',instance.inactiveHeight+'px');
	instance.active.css('width',instance.inactiveWidth+'px');
	instance.active.css('top','0px');
	instance.active.css('left','0px');
	instance.description.css('top',instance.adjustTop-instance.des_stH);
	instance.description.css('left',instance.adjustLeft-instance.des_stW);
    

	instance.active.find('img').css('opacity',0);
//	instance.active.css('width',instance.stW+'px');
//	instance.active.css('height',instance.stH+'px');
	instance.active.find('img').css('width',instance.stW+'px');
	instance.active.find('img').css('height',instance.stH+'px');
	
	
	instance.description.css({ 'left'		: 18		 });
	instance.description.hide();
	
	instance.appear = function()
	{
		

	  instance.gridelement.css('z-index','999999');


		instance.active.find('img').stop().animate({
								width		: instance.exW,
								height		: instance.exH,
								opacity		: 1
								},150,
								function(){
											instance.description.fadeIn('slow');
											}
								);
		instance.active.stop().animate({
								top			: instance.adjustTop,
								left		: instance.adjustLeft
								},150);
	 
	};
	
	instance.disappear = function()
	{
		
			  
	

	  instance.gridelement.css('z-index','0');

			instance.description.hide();
			instance.active.animate({
								top			: 0,
								left		: 0
								},150);
		instance.active.find('img').stop().animate({top:0,left:0,width:instance.stW,height:instance.stH,opacity:0},250,function(){
																									   	
																										
																													});
		
	
						
							
						
		
	};
	
	instance.active.hover(instance.appear,instance.disappear)
	
	/*instance.active.bind('mouseenter',function(){
											  
											   instance.appear();
											   });
	instance.active.bind('mouseleave',function(){
											   instance.disappear();
											   });*/


	
}