let ridingTeaserArray = [];
    
function RidingTeaser(leader, text, date, page) {
        this.leader = leader,
        this.text = text,
        this.date = date,
        this.page = page,
        this.link = function() {
            return `/politics/federal-election-2019/ridings-to-watch/${this.page}`;
        };
}

let ridingArray = ["The Party Leaders", "Hot Button Issues", "The Independents", "Key Ridings", "The Bellwethers", "Tight Races"];
let ridingPartyArray = ["LIB", "CON", "NDP", "GRN", "BQ", "PPC"];
let ridingColorArray = ["#454545", "#454545", "#454545", "#454545", "#454545", "#454545"];
let ridingImageArray = [
    "/polopoly_fs/1.4620698.1570036756!/httpImage/image.png",
    "/polopoly_fs/1.4620705.1570036862!/httpImage/image.png",
    "/polopoly_fs/1.4620707.1570036905!/httpImage/image.png",
    "/polopoly_fs/1.4620708.1570036953!/httpImage/image.png",
    "/polopoly_fs/1.4620710.1570036986!/httpImage/image.png",
    "/polopoly_fs/1.4620713.1570037028!/httpImage/image.png"
];

ridingTeaserArray.push(new RidingTeaser(
    "The Party Leaders", 
    "Where the major parties will defend their home turf",
    "Read the full profile",
    "leaders"
));
    
ridingTeaserArray.push(new RidingTeaser(
    "Hot Button Issues", 
    "Ridings where things could get nasty",
    "Read the full profile",
    "hot-button"        
));
    
ridingTeaserArray.push(new RidingTeaser(
    "The Independents", 
    "Where the incumbents belong to no party.",
    "Read the full profile",
    "independents"
));  

ridingTeaserArray.push(new RidingTeaser(
    "Key Ridings", 
    "8 to keep an eye on, and why",
    "Read the full profile",
    "key-ridings"        
)); 
    
ridingTeaserArray.push(new RidingTeaser(
    "The Bellwethers", 
    "Ridings with a knack for indicating winners",
    "Read the full profile",
    "bellwether"         
));

ridingTeaserArray.push(new RidingTeaser(
    "Tight Races", 
    "These promise to be neck-and-neck on election night",
    "Read the full profile",
    "tight-races"         
));

let ridingOverflow = cutOff;
let ridingSeeMoreVisible = cutOff;

function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

//How small the box width is allowed to shrink, and the gap between 
let ridingMinBoxWidth = 190;
let ridingPadding = 30;
let ridingSeeMoreClicked = false;
let ridingOverflowHeight = 40;

function beginRidingTeaser() {

    let ridingTeaser = document.getElementById('riding-teaser')

    let ridingTeaserOverflow = document.createElement("div");
        ridingTeaserOverflow.setAttribute('id', 'ridingTeaserOverflow')
    ridingTeaser.appendChild(ridingTeaserOverflow)

    let ridingTeaserShadow = document.createElement("div");
        ridingTeaserShadow.setAttribute('id', 'ridingTeaserShadow');
    ridingTeaser.appendChild(ridingTeaserShadow);

    let ridingTeaserContainer = document.createElement("div");
        ridingTeaserContainer.id = "ridingTeaserContainer";
    ridingTeaserOverflow.appendChild(ridingTeaserContainer);
        
    function createRidingTeaser(ridingTeaserObject) {
        let ridingTeaserIndex = ridingArray.indexOf(ridingTeaserObject.leader);
        
        let ridingBigLink = document.createElement('a');
            ridingBigLink.className = "bigLink";
            ridingBigLink.href = `${ridingTeaserObject.link()}`; 
            ridingTeaserContainer.appendChild(ridingBigLink)

        let ridingTeaserDiv = document.createElement("div");
            ridingTeaserDiv.className = "ridingTeaserDiv";
        ridingBigLink.appendChild(ridingTeaserDiv);
        
        let ridingTeaserImage = document.createElement('img');
            ridingTeaserImage.src = `${ridingImageArray[ridingTeaserIndex]}`;
            ridingTeaserImage.className = "circlePhoto";
        ridingTeaserDiv.appendChild(ridingTeaserImage); 
        
        let ridingTeaserFlair = document.createElement("div");
            ridingTeaserFlair.className = "ridingTeaserFlair";
            ridingTeaserFlair.style.background = ridingColorArray[ridingTeaserIndex];
        ridingTeaserDiv.appendChild(ridingTeaserFlair);
        
        let ridingTeaserLeader = document.createElement('div');
            ridingTeaserLeader.className = "ridingTeaserLeader";
            ridingTeaserLeader.innerHTML = ridingTeaserObject.leader;
        ridingTeaserDiv.appendChild(ridingTeaserLeader);
        
        let ridingTeaserText = document.createElement('div');
            ridingTeaserText.className = "ridingTeaserText";
            ridingTeaserText.innerHTML = `${ridingTeaserObject.text}`;
        ridingTeaserDiv.appendChild(ridingTeaserText);

        let ridingTeaserLink = document.createElement('a');
            ridingTeaserLink.className = "ridingTeaserLink";
            ridingTeaserLink.href = `${ridingTeaserObject.link()}`;
            ridingTeaserLink.innerText = `${ridingTeaserObject.date}`;
        ridingTeaserDiv.appendChild(ridingTeaserLink);
    }    

    let shuffledArray = shuffle(ridingTeaserArray);

    for (let i = 0; i < ridingTeaserArray.length; i++) {
        createRidingTeaser(ridingTeaserArray[i]);
    }

    ridingTeaserContainer.style.gridTemplateColumns = `repeat(auto-fit, minmax(${ridingMinBoxWidth}px, 1fr))`;
    ridingTeaserOverflow.style.borderBottom = 'none';
    
    ridingTeaserShadow.style.display = 'none';
    if (ridingSeeMoreVisible === true) {
        let ridingSeeMoreDiv = document.createElement("div");
            ridingSeeMoreDiv.id = "ridingSeeMoreDiv";
        ridingTeaser.appendChild(ridingSeeMoreDiv);
        
        let ridingSeeMoreLink = document.createElement("a");
            ridingSeeMoreLink.className = "seeMore";
            ridingSeeMoreLink.innerText = "SEE MORE";
            ridingSeeMoreLink.onclick = function() {
                ridingSeeMoreClicked = !ridingSeeMoreClicked;
                ridingSeeMoreLink.innerText = ridingSeeMoreClicked ? "See Less" : "See More";
                ridingTeaserOverflow.style.overflow = ridingSeeMoreClicked  ? 'visible' : 'hidden';
                ridingTeaserShadow.style.display = ridingSeeMoreClicked  ? 'none' : 'block';
                trimRidingGrid();
            };
            ridingSeeMoreDiv.appendChild(ridingSeeMoreLink);
        

        let ridingBoxHeight = document.getElementsByClassName('ridingTeaserDiv')[0].offsetHeight;
        let ridingParentWidth = ridingTeaserContainer.parentElement.offsetWidth;

        if (ridingOverflow === true) {
            ridingTeaserOverflow.style.overflow = 'hidden';
            ridingTeaserOverflow.style.maxHeight = `100px`;
            ridingTeaserOverflow.style.borderBottom = '1px solid #eeeeee';
            ridingTeaserShadow.style.height = `${ridingBoxHeight + ridingOverflowHeight}px`;
            ridingSeeMoreDiv.style.position = 'absolute';
            ridingSeeMoreDiv.style.top = `${Math.min(ridingBoxHeight + ridingOverflowHeight, ridingTeaserContainer.offsetHeight)}px`;
            ridingSeeMoreDiv.style.left = `0`;
            ridingSeeMoreDiv.style.right = `0`;
            ridingSeeMoreDiv.style.zIndex = '2';
            ridingSeeMoreDiv.style.marginLeft = 'auto';
            ridingSeeMoreDiv.style.marginRight = 'auto';
            ridingSeeMoreDiv.style.width = '120px';
            
        } else {
            ridingTeaserOverflow.style.borderBottom = 'none';
            ridingSeeMoreDiv.style.display = 'none';
            ridingTeaserShadow.style.display = 'none';
        }
    }
}


//If four boxes would normally fit, switch from auto-fit to three (avoid 4-1 imbalance)
function trimRidingGrid() {
    ridingParentWidth = ridingTeaserContainer.parentElement.offsetWidth;
    if (ridingParentWidth < (ridingMinBoxWidth*5+ridingPadding*6) && ridingParentWidth > ridingMinBoxWidth*3+ridingPadding*4) {
        ridingTeaserContainer.style.gridTemplateColumns = `1fr 1fr 1fr`;
    } else {
        ridingTeaserContainer.style.gridTemplateColumns = `repeat(auto-fit, minmax(${ridingMinBoxWidth}px, 1fr))`;
    }
    if (ridingSeeMoreVisible === true) {
    if (ridingOverflow === true) {
        if (ridingParentWidth < (ridingMinBoxWidth*5+ridingPadding*6) && ridingSeeMoreClicked === false) {
            ridingTeaserShadow.style.display = 'block';
            ridingTeaserOverflow.style.borderBottom = '1px solid #eeeeee';
        } else {
            ridingTeaserShadow.style.display = 'none';
            ridingTeaserOverflow.style.borderBottom = 'none';
        }
        
        let ridingGridHeight = document.getElementsByClassName('bigLink')[0].offsetHeight + 30;
            ridingSeeMoreDiv.style.display = ridingParentWidth < (ridingMinBoxWidth*5+ridingPadding*6) ? 'block' : 'none';
            //This adds an overflow, so we can potentially cut off the number of rows and add a 'see more' button
            ridingBoxHeight = document.getElementsByClassName('ridingTeaserDiv')[0].offsetHeight;
            //how far below the bottom of the top row is shown
            ridingTeaserOverflow.style.maxHeight = ridingSeeMoreClicked ? `${ridingTeaserContainer.offsetHeight}px` : `${ridingGridHeight}px`;
            //positions the 'see more' button 
            ridingSeeMoreDiv.style.top = ridingSeeMoreClicked ? (ridingTeaserContainer.offsetHeight - 12) + 'px' : `${ridingGridHeight + 10}px`;
            ridingTeaserShadow.style.bottom = `0`;
        }
    }
}

//call trim function at start and on resize    
window.addEventListener('load', function() {
    if (document.getElementById("riding-teaser")) {
        beginRidingTeaser();
        trimRidingGrid();

        window.addEventListener("resize", function() {
            trimRidingGrid();
        })
    }
})