/*** pg-media***/
$(document).ready(function(){
	
/* insert pagination*/
$('<div id="switcher"><span class="button selected" id="switcher-lists">Lists</span>&nbsp;|&nbsp;<span class="button" id="switcher-thumbs">Thumbs</span></div>').insertBefore('body.pg-media div#s_media h4');

/* set some jquery objects */	
 	 var target = 'body.pg-media div#s_media div.s_item';			
	 var container =  $(target);
	 var containerImg =  $(target + ' img.image');
	 var containerH3 = $(target + ' h3');
	 var containerH3Link = $(target + ' h3 a');
	 var containerByline = $(target + ' p.s_byline');

     var s_itemsMargin = $('body.pg-media div#s_media div.s_items').css('marginLeft');
     var containerMarginLeft = $(target).css('marginLeft');
	 var containerMarginBottom = $(target).css('marginBottom');
	 var containerMarginRight = $(target).css('marginRight');
	
/* toggle between detail and list view of the video clips */
	 $('#switcher .button').click(function() {   
		if (this.id == 'switcher-thumbs') {
		  state1();
		}
		else if (this.id == 'switcher-lists') {
		  state2();
		}
		$('#switcher .button').removeClass('selected');
		$(this).addClass('selected');
	  });
	
	 	 
	 function state1() {		
	 	 container.show();
	     $('body.pg-media div#s_media div.s_items').css({'marginLeft':'5px'});
		 container.css({'float':'left', 'width':'90px', 'height':'90px', 'overflow':'hidden', 'marginLeft':'0px', 'marginBottom':'5px', 'marginRight':'5px'});
		 containerImg.removeClass('image').css({'width':'88px', 'height':'60px', 'marginLeft':'1px'});
		 containerH3.css({'clear':'both', 'lineHeight':'10px'});
		 containerH3Link.css({'fontSize':'10px'});
		 containerByline.hide();
		 
		 containerH3.each(function(){
		 var target02 = $(this).find('a:eq(0)');
 		 var $myCloned = target02.clone();	
		 
		 var strLength =  $myCloned.text().length;
		 if (strLength > 28) 
			{ 
				target02.hide();
  				$myCloned.html( $myCloned.text().substr(0, 28).replace(/\./,'')+'..');
				$myCloned.addClass('cloned').prependTo($(this));
			} // end:if
 	 	}); // end:each 	
	 }// end:function
	 
	 function state2() {
	     $('body.pg-media div#s_media div.s_items').css({'marginLeft':s_itemsMargin});
		 container.css({'float':'none', 'height': 'auto', 'width':'auto', 'overflow':'hidden', 'marginLeft':containerMarginLeft, 'marginBottom':containerMarginBottom, 'marginRight':containerMarginRight});
		 containerImg.addClass('image').css({'width':'100px', 'height':'60px','marginLeft':'1px'});
		 containerH3.css({'clear':'none', 'lineHeight':'100%'});
		 containerH3Link.css({'fontSize':'12px'});
		 containerByline.show();
		 
		 containerH3.each(function(){
		 	 $(this).find('.cloned').remove();
			 $(this).find('a:eq(0)').show();
 		 }); // end:each	
	 } // end:function

/* select the current video clip */					   
		var x = $(target + ' a');		
		var y = window.location.href;
		x.each(function() {
					if ( $(this).attr('href') == y)
					{
						$(this).parent().addClass('selectedVideo');
					}	
		});	// end:each		

/* make div clickable; put hover class & status bar */	
  $(target).each(function() {
	  $(this).hover(
      function() {
         $(this).addClass('hoveredVideoClip');
        window.status=$(this).find('a:eq(0)').attr('href');
		$(this).find('img').fadeTo("fast", 1.0); // This should set the opacity to 100% on hover
      },
      function () {
         $(this).removeClass('hoveredVideoClip');
		 $(this).not('.selectedVideo').find('img').fadeTo("fast", 0.8); // This should set the opacity back to 80% on mouseout
      }); //end:hover event

    $(this).click(function() {
       location = $(this).find('a').attr('href');
    }); //end:click event
  }); // end:each


/* simulate the click */
$('#switcher span#switcher-thumbs').click(); 		

		
// This sets the opacity of the thumbs to fade down to 80% when the page loads
container.find('img').fadeTo("fast", 0.8); 
$('body.pg-media div#s_media div.s_item.selectedVideo img').fadeTo("fast", 1.0);

}); // end:$(document).ready