let profilesTeaserArray = [];
    
function ProfilesTeaser(leader, text, date) {
        this.leader = leader,
        this.text = text,
        this.date = date,
        this.link = function() {
            return `/politics/federal-election-2019/leader-profiles/${this.leader.replace(/\s+/g, '-').toLowerCase()}`;
        };
}

let leaderArray = ["Justin Trudeau", "Andrew Scheer", "Jagmeet Singh", "Elizabeth May", "Yves-Francois Blanchet", "Maxime Bernier"];
let partyArray = ["LIB", "CON", "NDP", "GRN", "BQ", "PPC"];
let colorArray = ["#B91319", "#1A4782", "#F37021", "#3D9B35", "#33B2CC", "#472e8c"];
let imageArray = ["/polopoly_fs/1.4562618.1566584459!/httpImage/image.jpg", "/polopoly_fs/1.4562624.1566584730!/httpImage/image.png", "/polopoly_fs/1.4562627.1566584815!/httpImage/image.png", "/polopoly_fs/1.4562628.1566584882!/httpImage/image.png", "/polopoly_fs/1.4588745.1568228907!/httpImage/image.png", "/polopoly_fs/1.4562631.1566584959!/httpImage/image.png"];

profilesTeaserArray.push(new ProfilesTeaser(
    "Justin Trudeau", 
    "Rolling up his sleeves with a new message: now is not the time for change.",
    "Read the full profile"
));
    
profilesTeaserArray.push(new ProfilesTeaser(
    "Andrew Scheer", 
    "An Ontario native with a passion for the Prairies offers opposition with a smile.",
    "Read the full profile"     
));
    
profilesTeaserArray.push(new ProfilesTeaser(
    "Jagmeet Singh", 
    "A new leader hits the party’s reset button in the fight for social justice and equality.",
    "Read the full profile"        
));  

profilesTeaserArray.push(new ProfilesTeaser(
    "Elizabeth May", 
    "Focused on the future with a passion for the planet and a wealth of experience.",
    "Read the full profile"        
)); 
    
profilesTeaserArray.push(new ProfilesTeaser(
    "Maxime Bernier", 
    "Unwilling to censor himself for party unity, now he’s got an unfiltered alternative.",
    "Read the full profile"         
));

profilesTeaserArray.push(new ProfilesTeaser(
    "Yves-Francois Blanchet", 
    "The Bloc Quebecois leader talks about how he shed his ‘tough-guy image’.",
    "Read the full profile"         
));

let overflow = true;
let seeMoreVisible = false;

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 minBoxWidth = 190;
let padding = 30;
let seeMoreClicked = false;
let overflowHeight = 40;

function beginProfilesTeaser() {

    let profilesTeaser = document.getElementById('profiles-teaser')

    let profilesTeaserOverflow = document.createElement("div");
        profilesTeaserOverflow.setAttribute('id', 'profilesTeaserOverflow')
    profilesTeaser.appendChild(profilesTeaserOverflow)

    let profilesTeaserShadow = document.createElement("div");
        profilesTeaserShadow.setAttribute('id', 'profilesTeaserShadow');
    profilesTeaser.appendChild(profilesTeaserShadow);

    let profilesTeaserContainer = document.createElement("div");
        profilesTeaserContainer.id = "profilesTeaserContainer";
    profilesTeaserOverflow.appendChild(profilesTeaserContainer);
        
    function createProfilesTeaser(profilesTeaserObject) {
        let profilesTeaserIndex = leaderArray.indexOf(profilesTeaserObject.leader);
        
        let bigLink = document.createElement('a');
            bigLink.className = "bigLink";
            bigLink.href = `${profilesTeaserObject.link()}`; 
            profilesTeaserContainer.appendChild(bigLink)

        let profilesTeaserDiv = document.createElement("div");
            profilesTeaserDiv.className = "profilesTeaserDiv";
        bigLink.appendChild(profilesTeaserDiv);
        
        let profilesTeaserImage = document.createElement('img');
            profilesTeaserImage.src = `${imageArray[profilesTeaserIndex]}`;
            profilesTeaserImage.className = "circlePhoto";
        profilesTeaserDiv.appendChild(profilesTeaserImage); 
        
        let profilesTeaserFlair = document.createElement("div");
            profilesTeaserFlair.className = "profilesTeaserFlair";
            profilesTeaserFlair.style.background = colorArray[profilesTeaserIndex];
        profilesTeaserDiv.appendChild(profilesTeaserFlair);
        
        let profilesTeaserLeader = document.createElement('div');
            profilesTeaserLeader.className = "profilesTeaserLeader";
            profilesTeaserLeader.innerHTML = profilesTeaserObject.leader;
        profilesTeaserDiv.appendChild(profilesTeaserLeader);
        
        let profilesTeaserText = document.createElement('div');
            profilesTeaserText.className = "profilesTeaserText";
            profilesTeaserText.innerHTML = `${profilesTeaserObject.text}`;
        profilesTeaserDiv.appendChild(profilesTeaserText);

        let profilesTeaserLink = document.createElement('a');
            profilesTeaserLink.className = "profilesTeaserLink";
            profilesTeaserLink.href = `${profilesTeaserObject.link()}`;
            profilesTeaserLink.innerText = `${profilesTeaserObject.date}`;
        profilesTeaserDiv.appendChild(profilesTeaserLink);
    }    

    //let shuffledArray = shuffle(profilesTeaserArray);

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

    profilesTeaserContainer.style.gridTemplateColumns = `repeat(auto-fit, minmax(${minBoxWidth}px, 1fr))`;
    profilesTeaserOverflow.style.borderBottom = 'none';
    
    profilesTeaserShadow.style.display = 'none';
    if (seeMoreVisible === true) {
        let seeMoreDiv = document.createElement("div");
            seeMoreDiv.id = "seeMoreDiv";
        profilesTeaser.appendChild(seeMoreDiv);
        
        let seeMoreLink = document.createElement("a");
            seeMoreLink.className = "seeMore";
            seeMoreLink.innerText = "SEE MORE";
            seeMoreLink.onclick = function() {
                seeMoreClicked = !seeMoreClicked;
                seeMoreLink.innerText = seeMoreClicked ? "See Less" : "See More";
                profilesTeaserOverflow.style.overflow = seeMoreClicked  ? 'visible' : 'hidden';
                profilesTeaserShadow.style.display = seeMoreClicked  ? 'none' : 'block';
                trimGrid();
            };
        seeMoreDiv.appendChild(seeMoreLink);
        

        let boxHeight = document.getElementsByClassName('profilesTeaserDiv')[0].offsetHeight;
        let parentWidth = profilesTeaserContainer.parentElement.offsetWidth;

        if (overflow === true) {
            profilesTeaserOverflow.style.overflow = 'hidden';
            profilesTeaserOverflow.style.maxHeight = `${Math.min(boxHeight + overflowHeight, profilesTeaserContainer.offsetHeight)}px`;
            profilesTeaserOverflow.style.borderBottom = '1px solid #eeeeee';
            profilesTeaserShadow.style.height = `${boxHeight + overflowHeight + 20}px`;
            seeMoreDiv.style.position = 'absolute';
            seeMoreDiv.style.top = `${Math.min(boxHeight + overflowHeight + 10, profilesTeaserContainer.offsetHeight)}px`;
            seeMoreDiv.style.zIndex = '2';
            seeMoreDiv.style.margin = '2px auto 0';
        } else {
            profilesTeaserOverflow.style.borderBottom = 'none';
            seeMoreDiv.style.display = 'none';
            profilesTeaserShadow.style.display = 'none';
        }
    }
}


//If four boxes would normally fit, switch from auto-fit to three (avoid 4-1 imbalance)
function trimGrid() {
    parentWidth = profilesTeaserContainer.parentElement.offsetWidth;
    if (parentWidth < (minBoxWidth*5+padding*6) && parentWidth > minBoxWidth*3+padding*4) {
        profilesTeaserContainer.style.gridTemplateColumns = `1fr 1fr 1fr`;
    } else {
        profilesTeaserContainer.style.gridTemplateColumns = `repeat(auto-fit, minmax(${minBoxWidth}px, 1fr))`;
    }
    if (seeMoreVisible === true) {
    if (overflow === true) {
        if (parentWidth < (minBoxWidth*5+padding*6) && seeMoreClicked === false) {
            profilesTeaserShadow.style.display = 'block';
            profilesTeaserOverflow.style.borderBottom = '1px solid #eeeeee';
        } else {
            profilesTeaserShadow.style.display = 'none';
            profilesTeaserOverflow.style.borderBottom = 'none';
        }
        

            seeMoreDiv.style.display = parentWidth < (minBoxWidth*5+padding*6) ? 'block' : 'none';
            //This adds an overflow, so we can potentially cut off the number of rows and add a 'see more' button
            boxHeight = document.getElementsByClassName('profilesTeaserDiv')[0].offsetHeight;
            //how far below the bottom of the top row is shown
            profilesTeaserOverflow.style.maxHeight = seeMoreClicked ? `${profilesTeaserContainer.offsetHeight}px` : `${boxHeight + overflowHeight}px`;
            //positions the 'see more' button 
            seeMoreDiv.style.top = seeMoreClicked ? (profilesTeaserContainer.offsetHeight - 12) + 'px' : `${Math.min(boxHeight + overflowHeight + 10, profilesTeaserContainer.offsetHeight)}px`;
            profilesTeaserShadow.style.bottom = `0`;
        }
    }
}

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

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