var items = null; //The array of item elements
var curItem = 0; //The current item being displayed
var busy = false; //True when a transition is in progress
var mode = 2; //1 = out then in, 2 = out and in

//Transition from the current item to the specified item
function transitionTo(toItem)
{
    //If a transition is in progress don't begin a new one
    if(busy == true) { return; }

    //Set the transition in progress flag
    busy = true;

    //Get the item to transition out (the currently displayed item)
    var itemOut = items[curItem];

    //Get the item to transition in (the item specified by toItem)
    var itemIn = items[toItem];
    curItem = toItem;
    
    //Set the window location
    window.location.href = "#" + curItem;
    
    //Create the effect handlers
    var inFx = new Fx.Style(itemIn, 'opacity', {
        duration: 700,
        onComplete: function(){
            busy = false; //In transition has finished, no longer busy
        }
    });
    var outFx = new Fx.Style(itemOut, 'opacity', {
        duration: 700,
        onComplete: function(){
            if(mode == 1)
                inFx.start(1); //Start the fade-in after the fade out
        }
    });

    //Begin the transition
    outFx.start(0);
    if(mode == 2)
        inFx.start(1); //Start the fade-in at the same time as the fade-out
        
    $$('menu0').addClass('cdfMenuActive');
}

//Transition a single item forwards or backwards. This determines the correct
//index (wrapping around) and delegates to transitionTo to perform the actual
//transition.
function transitionStep(direction)
{
    //Determine the next item to transition to based on direction
    if(direction == -1)
    {
        //Backwards, if the current item is 0 then the next item is
        //the last one (wrapping around)
        if(curItem == 0)
            transitionTo(items.length - 1);
        else
            transitionTo(curItem - 1);
    }
    else
    {
        //Forwards, if the current item is (items.length - 1) then the
        //next item is the first one
        if(curItem == (items.length - 1))
            transitionTo(0);
        else
            transitionTo(curItem + 1);
    }
}

//Create an onload event
window.addEvent('domready', function() {
    //Get the display items
    items = $$('.item');

    //Get the anchor from the requested URL
    var reqAnchor = self.document.location.hash;
    if(reqAnchor != "")
    {
        //Strip the # from the anchor
        reqAnchor = reqAnchor.substr(1, reqAnchor.length - 1);

        //An anchor was specified, check for a positive integer
        if(/^\d+$/.test(reqAnchor))
        {
            //Check if the value is a valid content item number
            if(reqAnchor >= 0 && reqAnchor < items.length)
            {
                //Set the starting slide
                curItem = parseInt(reqAnchor);
            }
        }
    }
    
    //Setup the menu links
    $$('.fadelink').each(function(el, i) {
       	//Check for the cdf div
   		if($$('#cdf').length > 0)
   		{
	        //Disable the standard link functionality
	        el.setProperty('onClick', "return false;");

    	    //Add a click event to transition to the appropriate page
        	el.addEvent('click', function() {
            	transitionTo(parseInt(el.getProperty('rel')));
        	});
        	
        	
        	
        	
        }
        
    });


    //Setup the display items
    items.each(function(el, i) {
        el.setStyle('position', 'absolute');
        el.setStyle('top', $('container').getStyle('top'));
        el.setStyle('left', $('container').getStyle('left'));
        el.setStyle('opacity', '0');
    });
    items[curItem].setStyle('opacity', '1');

    //Add clickhandlers to the previous and next buttons
    $$('.prevButton').setStyle('cursor', "pointer");
    $$('.prevButton').addEvent('click', function() {
        transitionStep(-1);
    });
    $$('.nextButton').setStyle('cursor', "pointer");
    $$('.nextButton').addEvent('click', function() {
        transitionStep(1);
    });

    //Setup the mode switch button
    $$('.modeButton').addEvent('click', function() {
        if(mode == 1) mode = 2;
        else if(mode == 2) mode = 1;
        $$('.modeButton').setText("Mode " + mode);
    });

    //Setup the home page buttons
    $$('.packagesbutton').setStyle('cursor', "pointer");
    $$('.packagesbutton').addEvent('click', function() {
        transitionTo(3);
    });
    $$('.mainbuybutton').setStyle('cursor', "pointer");
    $$('.mainbuybutton').addEvent('click', function() {
        transitionTo(2);
    });
    $$('.howbutton').setStyle('cursor', "pointer");
    $$('.howbutton').addEvent('click', function() {
        transitionTo(1);
    });

    //Add pointer cursor to the buy button images
    $$('.buybutton').setStyle('cursor', "pointer");

    //Add click handlers to the image map portions
    var screenImages = [];
    $$('.smap').each(function(el) {
        //Prevent the link from being opened when the image map is clicked
        el.setProperty('onClick', "return false;");

        //Push this image onto the screenImages array
        screenImages.push([el.getProperty('href'), el.getProperty('title')]);

        //Add a MooTools click event to display the image using Slimbox
        el.addEvent('click', function() {
            var i = 0;

            //Find the correct index to use
            for(i = 0; i < screenImages.length; i++)
            {
                //Check if this is the correct image to open the lightbox on
                if(screenImages[i][0] == el.getProperty('href'))
                {
                    //Open the lightbox
                    Lightbox.open(screenImages, i);
                }
            }
        });
    });
});