$(document).ready(function(){

		//calculate widths of columns and widths to animate to

                 var col = $('#overlay4').width();
		col = parseInt(col);
		var twocol = col * 2;
		var slimcol = (col * 2)	/ 3;

                    $('div.overlay').hoverIntent(
			function(){
				//pop open overlay divs to prevent crazy animation
				$(this).width(twocol+"px");
				$(this).siblings('div').width(slimcol+"px");
				//find out which div we're playing with
				var channel = $(this).attr('id');
				channel = channel.replace("overlay","");
				//animate opening this div
				$("#channel"+channel).animate({width:twocol+"px"},600);
				//find out what other divs arent already shrunk and shrink em
				$("#channel"+channel).siblings('div.channel-image').animate({width:slimcol+"px"},600);
				//fade out the headline, then fade in the sell

				$("#channel"+channel).children('div.fade').scrollTo({top:80,left:0},600);

                                $("#channel"+channel).siblings('div').children('div.fade').scrollTo({top:0,left:0},600);

			},
			function(){

			}
		    );
		    $('div#slide-overlay').hoverIntent(
			function(){},
			function(){
				$(this).children('.overlay').width(col+"px");
				//animate opening this div
				$("div.channel-image").animate({width:col+"px"},600);
				//fade out the headline, then fade in the sell
				$("div.channel-image").children('div.fade').scrollTo({top:0,left:0},600);
			}
		    )
	})