var stopped = 0; //set up the 'stopped' variable

function start() { //we need to start the tabs, but only if they're not already playing
if (stopped == 0) {
$('ul#messages-tabs').tabs().play();
}
}

$(function() {

//add the actual tabs to the page - that way, if JS is not enabled, users will not see a bunch of tabs that are no use to them...


//get the href attributes from each of the panels, to use them on the tabs as well
var tablink1 = $('div#messages > div#panel1 a').attr('href');
var tablink2 = $('div#messages > div#panel2 a').attr('href');
var tablink3 = $('div#messages > div#panel3 a').attr('href');
var tablink4 = $('div#messages > div#panel4 a').attr('href');

//get the colours for the tabs from each of the panels
var tablink1col = $('div#messages > div#panel1 h1').attr('class');
var tablink2col = $('div#messages > div#panel2 h2').attr('class');
var tablink3col = $('div#messages > div#panel3 h2').attr('class');
var tablink4col = $('div#messages > div#panel4 h2').attr('class');

$('#messages').after('<ul id="messages-tabs" class="clearfix"><li id="tab-panel1" class="' + tablink1col + '"><a href="' + tablink1 + '">welcome</a></li><li id="tab-panel2" class="' + tablink2col + '"><a href="' + tablink2 + '">try it for free</a></li><li id="tab-panel3" class="' + tablink3col + '"><a href="' + tablink3 + '">how it works </a></li><li id="tab-panel4" class="' + tablink4col + '"><a href="' + tablink4 + '">special offers</a></li></ul>');

$('#messages div').hide(); //hide the panes of the tabbed area, to avoid the 4th tab showing briefly before the tabs are set up and running...

//make the tabs work...
$('ul#messages-tabs').tabs('div#messages > div', { 
 
        // enable "cross-fading" effect 
        effect: 'fade', 
        fadeOutSpeed: 'medium', 
		event: 'mouseover',
 
        // start from the beginning after the last tab 
        rotate: true
 
    // use the slideshow plugin. It accepts its own configuration 
    }).slideshow({
	autoplay: false,
	interval: 7000
	});

//because of a quirk in the tabs plugin, it works best to wait a short while before starting the tabs rotating:
function delayedstart() {
if (stopped == 0) {
var t=setTimeout('start()',7000);
}
}

delayedstart(); //set off the delayed start

//attach a click event listener to the tabs - we want the slideshow to stop once a tab's been clicked...
$('ul#messages-tabs li a').mouseover(function(){
$('ul#messages-tabs').tabs().stop();
stopped = 1;
});

$('#messages div').css('position','absolute');

});