//plugin name: mslNewsPopup
//plugin author: LM
//last modified: 01/03/11


(function($){
	  $.fn.mslNewsPopup = function(options) {
			
			//set things applicable to all
			var settings = $.extend({}, $.fn.mslNewsPopup.defaults, options);
			
		  return this.each(function(){		
			  
				//set things specific to news list
				//allow use of metadata plugin to specify properties
				var opts = $.metadata ? $.extend({}, settings, $(this).metadata()) : settings;
			  
				//set things specific to news item
				$(this).children(".news_item").each(function(){ 			
      	  var $this = $(this);		
      	  var $itemlink = $this.find("h5 a");
      		var $itemleader = $this.find("p.leader");
  				var $itemoverlay = $this.find("h5 a, .news_item_hook");
  				var $itemimage = $this.find(".news_image img");
  				
  				$this.height(opts.height);
  				$this.width(opts.width);
  				
      		var titleheight = $itemlink.outerHeight();
      		var leaderheight = $itemleader.outerHeight();
      		var newsitemheight = $this.height();
      		
      		var overlayheight = titleheight + leaderheight;
      		var topmarginvalue = newsitemheight - titleheight;
      		
      		$itemlink.css("marginTop",topmarginvalue + 'px');
      		$this.find(".news_item_hook").css("height",overlayheight + 'px').css("marginTop",topmarginvalue + "px");
     	
  			  $this.bind('mouseenter.mslNewsPopup',
      	    function(){
      	      $itemoverlay.animate({
      			  marginTop:"-=" + leaderheight},opts.speed);
      	  });
  				$this.bind('mouseleave.mslNewsPopup',
      	    function(){
     		      $itemoverlay.animate({
      		    marginTop:"+=" + leaderheight},opts.speed);
      	  });
				});
      	  
		  });
				
	  };
		//catchall defaults
		$.fn.mslNewsPopup.defaults = {
		    width: '200',
		    height: '160',
		    speed: '500'
    };

})(jQuery);


// To set the defaults for all instances sitewide:
// $.fn.mslNewsPopup.defaults.width = '200';

		
//Required CSS:
//				 myDiv .news_item_inner{position:relative; overflow:hidden;}
//				 myDiv .news_item_hook{position:absolute; width:100%; left:0; top:0; z-index;4;}
//				 myDiv .news_image{position:absolute;top:0;right:0;}
//				 myDiv h5 a{position:relative;z-index:5;}
//				 myDiv .leader{position:relative; z-index:5;margin:0;}