$(function() {
	
	timerID = setInterval( "slideSwitch()", 5000 ); // set timer for slideshow

	// mouseover function, highlight li, and show relative image
	$("#title-slides li").mouseover(function(){
	
		clearInterval(timerID);
		var $slideid = $(this).find('a').attr('rel');
		console.log("hover");
		$(".active").removeClass("active");
		$(this).addClass('active');
		
		var $slide = $(this).children('a').attr('rel');
		$slide_id = "#" + $slide;
		$("IMG.activeimg").removeClass('activeimg');
		$("#" + $slide).addClass('activeimg');
		
	
	})/*.mouseout(function(){
	
	//mouse out restarts the automatic
	    console.log("mouseout");
	    timerID = setInterval( "slideSwitch()", 5000 );
	    
	  });*/
	 
	 
	


})

function slideSwitch() {
	
	//grab the active class
    var $active = $('#title-slides li.active');
    
	//if there is no active, default to last li
    if ( $active.length == 0 ) $active = $('#title-slides li:last');
	
	// setup next var 
    var $next =  $active.next().length ? $active.next()
        : $('#title-slides li:first');
    
    // grab corresponding a link rel attribute that contains image id    
    var $slide = $next.children('a').attr('rel');
	console.log($slide);

	// add class to active link
    $active.addClass('last-active');
    
   // var $active_slide = $(this).attr('rel').val()
   //alert($slide);
   $slide_id = "#" + $slide;
   $("IMG.activeimg").removeClass('activeimg');
   $("#" + $slide).addClass('activeimg');
   
    
    //alert($active_slide);

    $next.addClass('active');
    $active.removeClass('active last-active');
        
}