// Constants
    var questionWidth = 120;
    var totalQuestions = 0;
    var currentQuestion = 0;
    var carouselWidth = 0;
    var screenWidth = 0;
    var currentMargin = 0;

function closeModalHome(){
    overlayDiv.fade('out');
    modalHome.fade('out');
    (function(){overlayDiv.dispose()}).delay(500);
    (function(){modalHome.dispose()}).delay(500);
}

window.addEvent('resize', function() {
    var offset = (Math.ceil(totalQuestions / 2) - currentQuestion) * 120        
    screenWidth = $('homeBuffer').getWidth();
    if(totalQuestions % 2 == 0){
        $('carousel').setStyle('margin-left', ((screenWidth / 2) - (carouselWidth / 2) - 106) + offset + 120);
    }else{
        $('carousel').setStyle('margin-left', ((screenWidth / 2) - (carouselWidth / 2) - 106) + offset);
    }
});

window.addEvent('domready', function() {

// Modal Controls
	overlayDiv = new Element('div');
	modalHome = new Element('div');

    if(Cookie.read('modalControl') != 'close'){
        overlayDiv.injectInside(document.body).addClass('modal-background').set('text', ' ').setStyle('height', window.getHeight()).fade('hide');
        modalHome.injectInside(document.body).addClass('modal-container modal-home').set('html', '<iframe src="/welcome.html" style="width:650px; height:362px" frameborder="0"></iframe><div class="modalControls"><p>don\'t want this message next time you come?</p><label for="noShow"><input type="checkbox" id="noShow" name="noShow" />check here!</label></div><a href="#" onclick="javascript:closeModalHome(); return false;" id="getStarted">Get Started!</a>');   
        overlayDiv.fade(0.5);
        modalHome.fade('in');
    }
   
    $$('#noShow').addEvent('change', function(){
        var modalControl = Cookie.write('modalControl', 'close', {duration:30});     
    });
	
	overlayDiv.addEvent('click', function(){
        closeModalHome();
	});
	

    // Initializes the questions
    $$('#question .question').fade('hide');
    $$('#question .question.featured').fade('show');

    // set variables
    totalQuestions = getNumQuestions();
    currentQuestion = setCurrentQuestion(totalQuestions);
    carouselWidth = setCarouselWidth(totalQuestions, questionWidth);
    screenWidth = $('homeBuffer').getWidth();
    var slide = new Fx.Tween('carousel');

    // positions the carousel to the middle of the screen
    $('carousel').setStyle('margin-left', (screenWidth / 2) - (carouselWidth / 2) - 106)

    // Gets the number of questions in the carousel
    function getNumQuestions() {
        var numQuestions = 0;

        $each($$('#carousel li'), function() {
            numQuestions++;
        });
        return numQuestions;
    }

    // Gets the carousel's current margin
    function getMargin() {
        var margin = $('carousel').getStyle('margin-left').toInt();
        return margin;
    }

    // Sets the current question
    function setCurrentQuestion(total) {
        var current = 0

        if (total % 2 == 0) {
            current = (total / 2) + 1
        }
        else {
            current = Math.ceil(total / 2)
        }
        return current
    }

    // Sets the Carousel's Width
    function setCarouselWidth(qTotal, qWidth) {
        var totalWidth = qTotal * qWidth;

        $('carousel').setStyle('width', totalWidth + 214);

        if (totalQuestions % 2 == 0) {
            totalWidth = totalWidth + questionWidth;
            return totalWidth;
        }
        else {
            return totalWidth;
        }
    }

    function fadeQuestionOut(currentId) {
        $('a' + currentId).fade('out');
    }

    function fadeQuestionIn(currentId) {
        $('a' + currentId).fade('in');
    }

    // Moves Carousel Left
    function prev() {
        currentMargin = getMargin();
        var newMargin = currentMargin + questionWidth;
        slide.start('margin-left', currentMargin, newMargin);

        fadeQuestionOut(currentQuestion);

        $('q' + currentQuestion).removeClass('current');
        currentQuestion--;
        $('q' + currentQuestion).addClass('current');

        fadeQuestionIn(currentQuestion);
    }

    // Moves Carousel Right    
    function next() {
        currentMargin = getMargin();
        var newMargin = currentMargin - questionWidth;
        slide.start('margin-left', currentMargin, newMargin);

        fadeQuestionOut(currentQuestion);

        $('q' + currentQuestion).removeClass('current');
        currentQuestion++;
        $('q' + currentQuestion).addClass('current');

        fadeQuestionIn(currentQuestion);
    }

    // Button Previous Control    
    $('prev').addEvent('click', function() {
        if (currentQuestion != 1) {
            prev();
            this.setStyle('display', 'none');
            (function() { $('prev').setStyle('display', 'block'); }).delay(500);
        }
    });

    // Button Next Control
    $('next').addEvent('click', function() {
        if (currentQuestion != totalQuestions) {
            next();
            this.setStyle('display', 'none');
            (function() { $('next').setStyle('display', 'block'); }).delay(500);
        }
    });

    // Moves the carousel when a question is clicked
    $$('#carousel li a').addEvent('click', function() {
        currentMargin = getMargin();

        var newQuestion = this.getParent().getAttribute('id').substr(1);
        var difference = currentQuestion - newQuestion;
        var newMargin = (difference * questionWidth) + currentMargin

        slide.start('margin-left', currentMargin, newMargin)

        fadeQuestionOut(currentQuestion);
        $('q' + currentQuestion).removeClass('current');
        currentQuestion = newQuestion;
        $('q' + currentQuestion).addClass('current')
        fadeQuestionIn(currentQuestion);

    });
});