var currPanel = 0;
var lastPanel = null;
var panels = null;
var switchPanel = 0;

function addPanel(id) {
    $('#wrapper div.rotater').prepend('<div class="stepPanel" id="step-' + id + '"></div>');
    $('#step-' + id).html(panels[id].html);
}

function panelRotate() {
    $('#wrapper div.rotater').attr('class', 'rotater step-' + currPanel);
    switchPanel = setTimeout('nextPanel();', 7000);
}

function nextPanel() {
    var oldPanel = currPanel;
    if (currPanel != lastPanel)
        currPanel += 1;
    else
        currPanel = 0;
    addPanel(currPanel);
    $('#step-' + currPanel).css('left', '955px').animate({
        'left': '0px'
    }, 500);
    $('#step-' + oldPanel).animate({
        'left': '-955px'
    }, 500, function() {
        $('#step-' + oldPanel).remove();
    });
    setTimeout('panelRotate()', 500);
}

function selectPanel(id) {
    var oldPanel = currPanel;
    currPanel = id;
    addPanel(id);
    $('#step-' + currPanel).css('left', '955px').animate({
        'left': '0px'
    }, 500);
    $('#step-' + oldPanel).animate({
        'left': '-955px'
    }, 500, function() {
        $('#step-' + oldPanel).remove();
    });
    setTimeout('panelRotate()', 500);
}

function tiffRotater() {
    var rotater0201 = new Image;
    rotater0201.src = '/images/features/rotater_net_step-01.jpg';
    var rotater0202 = new Image;
    rotater0202.src = '/templates/images/button_selector_see_into_future_off.gif';
    var rotater0203 = new Image;
    rotater0203.src = '/templates/images/button_selector_see_into_future_on.gif';

    var rotater0301 = new Image;
    rotater0301.src = '/images/features/rotater_net_step-02.jpg';
    var rotater0302 = new Image;
    rotater0302.src = '/templates/images/thumbnail_01-2.gif';
    var rotater0303 = new Image;
    rotater0303.src = '/templates/images/thumbnail_02-2.gif';
    var rotater0304 = new Image;
    rotater0304.src = '/templates/images/thumbnail_03-2.gif';
    var rotater0305 = new Image;
    rotater0305.src = '/templates/images/button_see_full_program_off.gif';
    var rotater0306 = new Image;
    rotater0306.src = '/templates/images/button_see_full_program_on.gif';

    var rotater0401 = new Image;
    rotater0401.src = '/images/features/rotater_net_step-03.jpg';
    var rotater0402 = new Image;
    rotater0402.src = '/templates/images/thumbnail_01-3.gif';
    var rotater0403 = new Image;
    rotater0403.src = '/templates/images/thumbnail_02-3.gif';
    var rotater0404 = new Image;
    rotater0404.src = '/templates/images/thumbnail_03-3.gif';

    jQuery.getJSON('/templates/json/rotater.json', function(data) {
        panels = data;
        lastPanel = panels.length - 1;
        jQuery.each(panels, function(i) {
            $('#selectIndicator').append('<li class="step-' + i + '"><a href="#" title="' + (i + 1) + '"><span>' + (i + 1) + '</span></a></li>');
        });
        addPanel(currPanel);
        panelRotate();
        $('#selectIndicator li a').click(function() {
            if (parseInt($(this).parent().attr('class').split('-')[1]) != currPanel) {
                clearTimeout(switchPanel);
                selectPanel(parseInt($(this).parent().attr('class').split('-')[1]));
            }
            return false;
        });
    });
}