var CSPtargets;
var CSPtargetCount = 0;
var CSPInterval;
//this is set to 1 to start since we are starting with the research open and marking it as such
//we also need to expand this out 
var CSPcurrentTargetIndex = 1;
//compartmentalizing this function even though it could be bound to the other function
$(function () {

    //do the css stuff
    //make the first one's background blue
    CSP.makeBlueBackground($('#featured li a.research'));
    $('div#fragment-2').css('margin-left', '320px');
    $('div#fragment-2 .mask').css({ 'width': 0, 'padding': 0 });

    //targets are anything that isn't blank
    CSPtargets = $('#featured ul li a:not(.blank)');
    //get our upper bounds for our key
    CSPtargetCount = CSPtargets.size() - 1;
    //set the every 7 second thing	
    CSP.startAnimation();
});

$(function () {
    $('div#home-slider').mouseleave(function (e) {
        e.stopPropagation();
        //CSP.closeAllPanels(e);
        //CSP.removeAllBlueBackgrounds();
        CSP.startAnimation();
        return false;

    });
    $('div#home-slider').mouseenter(function (e) {
        e.stopPropagation();
        CSP.stopAnimation();
        return false;
    });
    $('#featured ul li a').each(function (iterator, element) {
        $(element).bind('mouseover', function (eventObject) {
            //mouseStart on hover on the gray/blue links
            $(eventObject.currentTarget).addClass('background_down');
            var target = $(eventObject.currentTarget);
            CSP.showPanel(target);
            eventObject.stopPropagation();
            //return false;
        });
    });
});
var CSP = {
    animationStopped: false,
    showPanel: function (element) {
        CSPcurrentTargetIndex = element.attr('data-animation-index') - 2;
        var target = element;
        CSP.makeBlueBackground(target);
        var mask = $($(target).attr('data-href').toString()).find('.mask');
        var width = (target.width() + 10);
        var divFragment = CSP.getFragmentForElement(target);
        $(CSP.getFragmentForElement(target)).stop().animate({ 'margin-left': width }, 950, function () {
        });
        CSP.slideLeftAllFragmentsExcept(element);
        CSP.closeMask(mask);
    },
    makeBlueBackground: function (element) {
        $(element).addClass('background_down');
    },
    removeBlueBackground: function (element) {
        $(element).removeClass('background_down');
    },
    //this hides a panel
    hidePanel: function (element) {
        var mask = CSP.getMaskFromElement(element);
        $(element).stop().animate({ 'margin-left': -300 }, 200);
        CSP.openMask(mask);
        CSP.removeBlueBackgroundForPanel(element);
    },
    //will return if an elements panel is open
    isElementPanelOpen: function (element) {
    },
    //this opens the mask(makes it wide again)
    openMask: function (mask) {
        $(mask).stop().animate({ 'margin-left': 0, 'width': "101%" }, 200);
    },
    closeMask: function (mask) {
        CSP.appendMaskWidthToMask(mask);
        $(mask).stop().animate({ 'width': 0, 'padding': 0 }, 950);
    },
    //attaches the mask width to the mask so we can open it back to that size later on
    appendMaskWidthToMask: function (mask) {
        $(mask).attr('data-width', $(mask).width());
    },
    getFragmentForElement: function (element) {
        return $($(element).attr('data-href').toString());
    },
    slideLeftAllFragmentsExcept: function (element) {
        var fragments = $('div.fragment');
        var href = $(element).attr('data-href');
        $(fragments).each(function (iterator, item) {
            var id = "#" + $(item).attr('id');
            if (id !== href) {
                CSP.hidePanel(item);
            }
        });
    },
    getMaskFromElement: function (element) {
        return $(element).find('.mask');
    },
    closeAllPanels: function (e) {
        $('div.fragment').each(function (it, item) {
            CSP.hidePanel(item);
            CSP.openMask(CSP.getMaskFromElement(item));
        });
        return false;
    },
    removeAllBlueBackgrounds: function () {
        $('#featured ul li a').each(function (iterator, element) {
            CSP.removeBlueBackground(element);
        });
    },
    removeBlueBackgroundForPanel: function (panel) {
        var panel = ($('#featured ul li a[data-href="#' + $(panel).attr('id') + '"]'));
        CSP.removeBlueBackground(panel);
    },
    animatePanels: function () {
        if (CSP.animationStopped) {
            //console.log('animation is stopped for CSP');
            return;
        }
        //console.log('the CSPcurrentTargetIndex is ' + CSPcurrentTargetIndex);
        if (CSPcurrentTargetIndex > CSPtargetCount) {
            //console.log('currentTargetIndex was set to zero');
            CSPcurrentTargetIndex = 0;
        }
        //console.log('triggering a mouseover for ' + CSPcurrentTargetIndex);
        $(CSPtargets[CSPcurrentTargetIndex]).mouseover();
        CSPcurrentTargetIndex += 1;
    },
    stopAnimation: function () {
        //console.log('we stopped the animation');
        if (CSPInterval) {
            //console.log('we removed the animation windowTimeout');
            window.clearInterval(CSPInterval);
            CSPInterval = null;
        }
        CSP.animationStopped = true;
    },
    startAnimation: function () {
        if (!CSPInterval) {
            //console.log('we added a new windowInterval to animate');
            CSPInterval = window.setInterval(CSP.animatePanels, 8000);
        }
        //console.log('we started the animation');
        CSP.animationStopped = false;
    },
    getHrefFromFragment: function (element) {
        return ($('#featured ul li a[data-href="#' + $(element).attr('id') + '"]').attr('href'));
    }
}

$(function () {
    //Send links to a location
    $('#featured ul a').click(function () {
        var h = $(this).attr('href');
        window.location = h;
    });

    $('div.fragment').bind('click', function (e) {


        window.location = CSP.getHrefFromFragment(e.currentTarget);

    });


});