$(function() {

    // The Plus and Minus controls are hidden by default so that non-javascript users never see them.
    // This line enables the controls for Javascript users.
    $("div.promo-controls").removeClass("hide");
    
    // Hide all controls marked for use in this function. (they must be hidden first or they will not animate)
    $(".jquery-item").hide();
    
    // Find all containers of the objects
    for(x=0; x < $(".jquery-item-container").length; x++){
    
        // Set the number of items to show of default (half of the total number of items)
        var numberOfItemsToShow = $(".jquery-item", $(".jquery-item-container").eq(x)).length / 2;
        
        // Round up to a whole number if the number of articles is uneven.
        numberOfItemsToShow = Math.round(numberOfItemsToShow);
        // However, only a maximum of 3 articles will be shown
        if(numberOfItemsToShow > 3){
            numberOfItemsToShow = 3
        }
    
        // Give all Items the hide class by default, this is needed so they animate
        for(i=numberOfItemsToShow; i < $(".jquery-item", $(".jquery-item-container").eq(x)).length; i++){
            $(".jquery-item", $(".jquery-item-container").eq(x)).eq(i).addClass("hide");
        }
        // Show the number controls
        for(i=0; i < numberOfItemsToShow; i++){
            $(".jquery-item", $(".jquery-item-container").eq(x)).eq(i).show("slide");
        }
    }
                    
    // Add the onclick events to all the controls
    $(".add-item").click(showItem);
    $(".remove-item").click(removeItem);
    
    // Show items when the Plus is clicked.
    function showItem(e){
        e.preventDefault();
        var added = false;
    
        for(i=0; i < $(".jquery-item", this.parentNode.parentNode).length; i++){
            if($(".jquery-item", this.parentNode.parentNode)[i].className == "jquery-item hide" && added == false){                
                $(".jquery-item", this.parentNode.parentNode).eq(i).show("slide");
                $(".jquery-item", this.parentNode.parentNode).eq(i).removeClass("hide");
                added = true;
                
                displayControls(i+1, this.parentNode.parentNode);
            }
        }
    }
    // Hide the Items when the Minus is clicked. Users cannot remove the last story (which is why the loop finishes at 1)
    function removeItem(e){
        e.preventDefault();
        var removed = false;
        
        for(i=$(".jquery-item", this.parentNode.parentNode).length-1; i >= 1; i--){                        
            if($(".jquery-item", this.parentNode.parentNode)[i].className != "jquery-item hide" && removed == false){
                $(".jquery-item", this.parentNode.parentNode).eq(i).hide("slide");
                $(".jquery-item", this.parentNode.parentNode).eq(i).addClass("hide");
                removed = true;
                
                displayControls(i, this.parentNode.parentNode);
            }
        }
    }    
    
    // Toggle the on or off state of the controls
    function displayControls(numberOfStories, controlContainer){
        
        if(numberOfStories < $(".jquery-item", controlContainer).length){
            $(".add-item", controlContainer).removeClass("add-inactive");
        }
        else{
            $(".add-item", controlContainer).addClass("add-inactive");
        }
        if(numberOfStories > 1){
            $(".remove-item", controlContainer).removeClass("remove-inactive");
        }else{
            $(".remove-item", controlContainer).addClass("remove-inactive");
        }
    }
});