/* --- This is for Main Slider I believe --- */
       	$(function() {
			/* the index of the current list element */
			
           	var current = 1;
				
            /* function to iterate through all the list elements */
           	var iterate		= function(){
               var i = parseInt(current+1);
               var lis = $('#rotMenu').children('li').size();
               if(i>lis) i = 1;
               display($('#rotMenu li:nth-child('+i+')'));
			   // alert('num of lis found: '+lis);
           	}
				
			// Initially display the first one 
           	display($('#rotMenu li:first'));
				
				// In intervals of 7 seconds jump to the next element 
           	var slidetime = setInterval(iterate,7000);
				
				// if the User clicks on one list item, the auto slider stops
            // clearTimeout(slidetime);
				// clearTimeout(600);

           	$('#rotMenu li').bind('click',function(e){
			   clearTimeout(slidetime);
               display($(this));
               e.preventDefault();
           	});
				
			// displays each element associated to the "elem" list element
           	function display(elem){
               var $this 	= elem;
               var repeat 	= false;
               if(current == parseInt($this.index() + 1)) {
                   repeat = true;
			   }
			   

			   // slide the current one back
               if(!repeat)
				   // The marginRight was -20px, I changed this to -24px to better suit the new css position of the tabbers.
                   $this.parent().find('li:nth-child('+current+') p').stop(true,true).animate({'marginRight':'-24px'},300,function(){
						// alert('navigator.appName: '+navigator.appName);
						// This next bit just will not work in stupid Internet Explorer, no matter what
						if(navigator.appName=='Microsoft Internet Explorer'){
							//$(this).animate({'filter':'alpha(opacity=70)'},700);
						}
						else {
							$(this).animate({'opacity':'0.7'},700);
						}
                   });
					
               current = parseInt($this.index() + 1);
					
               var elem = $('p',$this);
					
                   // slide out the clicked or next one */ 
                   elem.stop(true,true).animate({'marginRight':'0px','opacity':'1.0'},300);
						 
			   // this one controls the top animation's position (.info_heading), before and after it appears.	
               var info_elem = elem.next();
               $('#rot1 .heading').animate({'left':'-420px'}, 500,'easeOutCirc',function(){
                   $('h6',$(this)).html(info_elem.find('.info_heading').html());
                   $(this).animate({'left':'12px', 'top':'0px'},400,'easeInOutQuad');
               });

			   // this one controls the bottom animation's position (.info_description), before and after it appears.	 
               $('#rot1 .description').animate({'bottom':'-58px'},400,'easeOutCirc',function(){
                   $('p',$(this)).html(info_elem.find('.info_description').html());
                   $(this).animate({'bottom':'6px'},500,'easeInOutQuad');
               })
					
					// the image will fade out and another will fade in */
               $('#rot1').prepend(
               $('<img/>',{
                   style	:	'opacity:0',
                   className : 'bg'
               }).load(
               function(){
                   $(this).animate({'opacity':'1'},800);
                   $('#rot1 img:first').next().animate({'opacity':'0'},200,function(){
                       $(this).remove();
                   });
               }
           ).attr('src','images/slider/'+info_elem.find('.info_image').html()).attr('width','766').attr('height','255')
           );
           }
       	});