// this holds the positions of each element so the script knows who to move where
var envpos = ['v3', 'v2', 'v1'];
var p1xy = [];
var p2xy = [];
var p3xy = [];

jQuery(document).ready(function () {

    startTheMagic();
    
});

function startTheMagic() {
    
    // Load the values from the CSS file
    p1xy[0] = jQuery('.p1').css('left');
    p1xy[1] = jQuery('.p1').css('top');
    p2xy[0] = jQuery('.p2').css('left');
    p2xy[1] = jQuery('.p2').css('top');
    p3xy[0] = jQuery('.p3').css('left');
    p3xy[1] = jQuery('.p3').css('top');
        
    // we start with version 3 live, version 2 and version 1 are not live
    jQuery('#v2_live').css('display', 'none');
    jQuery('#v1_live').css('display', 'none');
    
    // register onclick events for the tabs
    jQuery('.vtabgrey').click(function() {
        doPromote(this.id);
    });
    
    // register onclick events for the grey pages
    jQuery("#v1-slide,#v2-slide,#v3-slide").click(function() {
        doPromote(this.id)
    });
    
    // register hover events for the grey pages
    jQuery("#v1-slide,#v2-slide,#v3-slide").hover(
        function () {
            // onmouseover
            var myid = this.id.substring(0,2);
            if (myid == envpos[1] || myid == envpos[2]) {
                jQuery('#'+myid+'-tab').removeClass('vtabgrey').addClass('vtabhover');
            }
        }, 
        function () {
            // onmouseout
            var myid = this.id.substring(0,2);
            if (myid == envpos[1] || myid == envpos[2]) {
                jQuery('#'+myid+'-tab').removeClass('vtabhover').addClass('vtabgrey');
            }
        }
    );
    
}



function doPromote(p_id) {
    
    // Debug
    //console.info("Calling doPromote(%s)", p_id);
    
    // Gather current positions of everything
    var id_p1 = envpos[0];
    var id_p2 = envpos[1];
    var id_p3 = envpos[2];
    
    // we have two scenarios: someone clicks p2, or someone clicks p3
    // if someone clicks p2, move the item in p2 to p1. move p1 to p2.
    // if someone clicks p3, move the item in p3 to p1. move p2 to p3. move p1 to p2

    // clicked tab at p2 scenario
    if (p_id == envpos[1]+'-tab' || p_id == envpos[1]+'-slide') {
        
        // set the new positions into the global
        envpos[0] = id_p2;
        envpos[1] = id_p1;
                    
        // Hide the old p1 live version and show the new p1 live version
        jQuery('#'+id_p1+'_live').css('display', 'none');
        jQuery('#'+id_p2+'_live').css('display', 'block');
                    
        // move p2 to p1
        jQuery('#'+id_p2).css('z-index', 30);
        jQuery('#'+id_p2+'-tab').removeClass('vtabhover').addClass('vtabgrey');
        jQuery('#'+id_p2+'_live').css('z-index', 35);
        jQuery('#'+id_p2).animate({ top:p1xy[1], left:p1xy[0] }, 1000);
        jQuery('#'+id_p2+'_live').animate({ top:p1xy[1],  left:p1xy[0] }, 1000);
        
        // move p1 to p2
        jQuery('#'+id_p1).css('z-index', 20);
        jQuery('#'+id_p1+'_live').css('z-index', 25);
        jQuery('#'+id_p1).animate({ top:p2xy[1], left:p2xy[0] }, 1000);
        jQuery('#'+id_p1+'_live').animate({ top:p2xy[1], left:p2xy[0] }, 1000);
    }
    
    // clicked tab at p3 scenario    
    if (p_id == envpos[2]+'-tab' || p_id == envpos[2]+'-slide') {    
          
        // set the new positions into the global        
        envpos[0] = id_p3;      
        envpos[1] = id_p1;
        envpos[2] = id_p2;
                   
        // Hide the old p1 live version and show the new p1 live version
        jQuery('#'+id_p1+'_live').css('display', 'none');
        jQuery('#'+id_p3+'_live').css('display', 'block');
                    
        // move p3 to p1
        jQuery('#'+id_p3).css('z-index', 30);
        jQuery('#'+id_p3+'-tab').removeClass('vtabhover').addClass('vtabgrey');
        jQuery('#'+id_p3+'_live').css('z-index', 35);
        jQuery('#'+id_p3).animate({ top:p1xy[1], left:p1xy[0] }, 1000);
        jQuery('#'+id_p3+'_live').animate({ top:p1xy[1], left:p1xy[0] }, 1000);
        jQuery('#'+id_p3+'-shadow').animate({ opacity:1 }, 1000);
        
        // move p1 to p2
        jQuery('#'+id_p1).css('z-index', 20);
        jQuery('#'+id_p1+'_live').css('z-index', 25);
        jQuery('#'+id_p1).animate({ top:p2xy[1], left:p2xy[0] }, 1000);
        jQuery('#'+id_p1+'_live').animate({ top:p2xy[1], left:p2xy[0] }, 1000);
        
        // move p2 to p3
        jQuery('#'+id_p2).css('z-index', 10);
        jQuery('#'+id_p2+'_live').css('z-index', 15);
        jQuery('#'+id_p2).animate({ top:p3xy[1], left:p3xy[0] }, 1000);
        jQuery('#'+id_p2+'_live').animate({ top:p3xy[1], left:p3xy[0] }, 1000);
        jQuery('#'+id_p2+'-shadow').css('opacity',0);
    }
        
}

function doTextRotate(p_old, p_new) {
    jQuery('#text'+p_old).fadeOut(300, function() {
        jQuery('#text'+p_new).fadeIn(500);
    });
}

function clickPromoteText() {
    doPromote(envpos[2]+'-tab');
    return false;
}