$(".panels li").corner('12px');
var panels = {
panels : function(){
	
		//set all panel heights
		$("#panel .panels li").css({height:'270px'});
		//set  first panel initial width
		$("#panel .panels li:first").css({width:'418px'});
		
	$('.panels li').hover(function() {
    	$(this).css({width:604 });
    	$("#panel li").not(this).css({ "width": 110 });
		//hide/show text/content
		$(this).find('.content').show();
		$('.init-text').hide();
		//resize/reposition first panel bg image
		$("#panel .panels li:first").css({width:'108px', backgroundPosition: '-310px bottom'});

    }, function() {
      $('.panels li').css({ width:172 });
	  	//hide/show text/content
		$(this).find('.content').hide();
		$('.init-text').show();
		$('.panels li:first').css({backgroundPosition: '0 bottom', width:418})
    });
		//maintain first panel bg image and width
	$('.panels li:first').hover(function() {
   		$(this).css({backgroundPosition: '0 bottom', width:418  } )
		$("#panel li").not(this).css({ "width": 172 });
		$('.init-text').show();	
	})

  }
}
jQuery(function ($) {

	if($("#panel .panel").length){panels.panels();}
});