//page variables
var capgownfabric;
var capgowncolor;
var capgownfabricurl;
var tasselcolor;
var charmstyle;
var tasselurl;
var tasselselected = false;
var tasselinit = true;

var ActiveSection = "ColorSize";
var ColorSizeSectionElement;
var AddonsSectionElement;

var HomeschoolDiplomaLivePreview;
var ThumbnailCap;
var ThumbnailTassel;

var NextPrevLoop = true;
var imageswitchcase = 0;

var capchanging = false;
var capchanged = false;
var tasselchanging = false;
var tasselchanged = false;

function MyDocumentReadyFunction(){

    console.log("Mortarboard.js loaded");
    idsimagecall = "MortarboardPreviewB";
    thumbnaildisplay = "ColorSize";
    capgownfabric = "Matte Fabric";
    capgowncolor = "Matte Black";
    tassel = "";
    tasselcolor = "Gold (Gold Band)";
    charmstyle = "2-Digit 23 Gold";
    thumbnaildisplayid = "HomeschoolDiplomaThumbnail1";

    callproductlevelrefreshimage = true;

//    capgownfabricurl = imagesdirectory + "mortarboard_initial_preview.jpg";
//    tasselurl = imagesdirectory + "tassel_initial_preview.jpg";
    HomeschoolDiplomaLivePreview = document.getElementById('HomeschoolDiplomaLivePreview')
    HomeschoolDiplomaLivePreview.removeAttribute("data-src");
//    HomeschoolDiplomaLivePreview.src = capgownfabricurl;

    ThumbnailCap = document.getElementById('HomeschoolDiplomaThumbnail1');
    ThumbnailCap.style.display = "block";
    ThumbnailCap.addEventListener('click', ThumbnailManagement);
    ThumbnailTassel = document.getElementById('HomeschoolDiplomaThumbnail2');
    ThumbnailTassel.style.display = "none";
    ThumbnailTassel.addEventListener('click', ThumbnailManagement);

    //section management
    const sections = document.querySelectorAll('[class*="hd_Section_"]');
    sections.forEach(function(section){
        var classname = section.className;
        var child = section.firstChild;
        child = child.nextSibling;
        child = child.firstChild;
        child = child.firstChild;
        child = child.nextSibling;
        child = child.firstChild;
        if(classname.includes('hd_Section_ColorSize'))
            ColorSizeSectionElement = section;
        if(classname.includes('hd_Section_Addons'))
            AddonsSectionElement = section;
        child.addEventListener('click', SectionManagement);
    });

            //next and prev buttons on each section
    //common mutation observer
    let observer_nextprev = new MutationObserver(mutations => {
        if(NextPrevLoop)
        {
            NextPrevLoop = false;
            mutations.forEach(function(mutation){
                mutation.target.classList.remove("disabled");
            });
            //enable all the next and prev buttons
            NextPrevButtonsRemoveDisabled();
        }
        else
            NextPrevLoop = true;
    });
    //next    
    const nextbuttons = document.querySelectorAll('[class*="owl-next"]');
    var buttonindex = 1;
    nextbuttons.forEach(function(nextbutton){
        if(buttonindex == 1)
        {
            //first section, show next, and show parent
            nextbutton.classList.remove("disabled");
            nextbutton.parentElement.classList.remove("disabled");
            nextbutton.addEventListener('click', TabNextManagement);
            observer_nextprev.observe(nextbutton.parentElement, { attributes : true, attributeFilter : ['class'] });
            if(buttonindex == 2)
            {
                artworknextbuttonelement = nextbutton;
                nextbutton.classList.add("disabled");
            }
            buttonindex += 1;
        }
    });
    //prev
    const prevbuttons = document.querySelectorAll('[class*="owl-prev"]');
    buttonindex = 1;
    prevbuttons.forEach(function(prevbutton){
        if(buttonindex == 1)
        {
            prevbutton.parentElement.removeChild(prevbutton);
        }
        if(buttonindex == 2)
        {
            //prevbutton.classList.remove("disabled");
            //prevbutton.parentElement.classList.remove("disabled");
            //prevbutton.addEventListener('click', TabPrevManagement);
            //observer_nextprev.observe(prevbutton.parentElement, { attributes : true, attributeFilter : ['class'] });
            prevbutton.parentElement.removeChild(prevbutton);
        }
        if(buttonindex == 3)
        {
            prevbutton.parentElement.removeChild(prevbutton);
        }
        buttonindex += 1;
    });

    //if coming from cart:
    if(ReloadVariables())
    {
        ProductLevelRefreshImages();
    }
    else
    {
        //get thumbnail src
        capgownfabricurl = ThumbnailCap.src
        tasselurl = ThumbnailTassel.src;
        HomeschoolDiplomaLivePreview.src = ThumbnailCap.src;
    }
};

function NextPrevButtonsRemoveDisabled(){
    const nextbuttons = document.querySelectorAll('[class*="owl-next"]');
    nextbuttons.forEach(function(nextbutton){
        nextbutton.classList.remove("disabled");
    });
    
    const prevbuttons = document.querySelectorAll('[class*="owl-prev"]');
    prevbuttons.forEach(function(prevbutton){
        prevbutton.classList.remove("disabled");
    });

};

function ThumbnailManagement(){
    thumbnaildisplayid = this.id;
    if(this.id == 'HomeschoolDiplomaThumbnail1')
    {
        DisplayColorSize();
    }
    if(this.id == 'HomeschoolDiplomaThumbnail2')
    {
        DisplayTassel();
    }
};
function DisplayColorSize(){
    if(thumbnaildisplay == "ColorSize")
        return;
    else
        thumbnaildisplay = "ColorSize";
    idsimagecall = 'MortarboardPreviewB';
    timer = Date.now() - 1000*(60*5);
    ProductLevelRefreshImages();
}
function DisplayTassel(){
    if(!tasselselected)
        return;
    if(thumbnaildisplay == "Tassel")
        return;
    else
        thumbnaildisplay = "Tassel";
    idsimagecall = 'TasselsPreviewB';
    timer = Date.now() - 1000*(60*5);
    ProductLevelRefreshImages();
}

function SectionManagement(){
    //capture all the sections and next buttons
//    if(debugmode) console.log("Section Management");
    var classname = this.className;
    if(classname.includes('-closed')){
        //closing tab, set activepage to nothing and return
        ActiveSection = "";
        return;
    };
    //navigate up 
    var parent = this.parentNode;
    parent = parent.parentNode;
    parent = parent.parentNode;
    parent = parent.parentNode;
    var sectionclassname = parent.className;
    var start = sectionclassname.indexOf(" hd_Section_");
    var end = sectionclassname.indexOf(" ", start+12);
    if(end < 0)
        sectionclassname = sectionclassname.substring(start+12);
    else
        sectionclassname = sectionclassname.substring(start+12, end);

//    console.log("Section className: " + sectionclassname);
    ActiveSection = sectionclassname;
    //const sections = document.querySelectorAll('[class*="hd_Section_' + sectionclassname + '"]');
    //sections[0].scrollIntoView();

    switch(ActiveSection){
        //scroll into view the section above, display the appropriate thumbnail
        case "ColorSize":
            //CardDesignSectionElement.scrollIntoView();
            DisplayColorSize();
            break;
        case "Addons":
            //CardDesignSectionElement.scrollIntoView();
            DisplayTassel();
            break;
    };
    //scroll to the top
    window.scrollTo({ top: 0, behavior: 'smooth' });
};

function TabNextManagement(){
    switch (ActiveSection){
        case "ColorSize":
            var child = AddonsSectionElement.firstChild;
            child = child.nextSibling;
            child = child.firstChild;
            child = child.firstChild;
            child = child.nextSibling;
            child = child.firstChild;
            child.click();
            ColorSizeSectionElement.scrollIntoView();        
            break;
    };
    //add any custom code for each individual tab
};

function ProductInputListener(elementid)
{
    console.log(elementid);
}

function BuildJSON(jsonstringtype) {
    var jsonstring = "";
    switch(jsonstringtype)
    {
        case "Cap":
            jsonstring = '{"Cap and Gown Fabric": "' + capgowncolor + '"}';
            break;
        case "Tassel":
            jsonstring = '{"Tassel Color": "' + tasselcolor + '",';
            jsonstring += '"Charm Style": "' + charmstyle + '"}';
            break;
        default:
            break;
    }
    
    return jsonstring;
};

function FixApostrophes(){
};

function FixEmptyStrings(){
};

function MapVariables(className, value, hd_element)
{
    if(busyreloadingvars)
        return false;
    var returnbool = true;
//	console.log("***********************");
//	console.log("ClassName: " + className);
//	console.log("Value: " + value);

    imageswitchcase = 0;

	var hd_ClassName = className;
	var hd_Value = value;
    var hd_Number = value;
	var start = hd_ClassName.indexOf(" hd_");
	var end = hd_ClassName.indexOf(" ", start+4);
	hd_ClassName = hd_ClassName.substring(start+4, end);
    var hd_Number = value;
    if(hd_element.type != "text" && hd_element.type != "textarea")
    {
        if(hd_Value.includes("_"))
        {
            hd_Value = hd_Value.substring(0, hd_Value.lastIndexOf("_"));
            hd_Number = hd_Number.substring(hd_Number.lastIndexOf("_")+1);
        }
    }
//    console.log("hd_ClassName:  " + hd_ClassName);
//    console.log("hd_Value:  " + hd_Value);
//    console.log("hd_Number:  " + hd_Number);

    if(hd_ClassName == "GownSize")
        return false;

    hd_Value = FixVariables(hd_Value);

    if(hd_ClassName == "FabricFinish")
    {
        capgownfabric = hd_Value;
        CorrectColor();
        imageswitchcase = 1;
    }
    if(hd_ClassName == "FabricColor")
    {
        capgowncolor = hd_Value;
        imageswitchcase = 1;
    }
    if(hd_ClassName == "TasselCheckbox")
    {
        if(hd_Value == "Yes Please")
        {
            tasselselected = true;
        }
        else
        {
            tasselselected = false;
        }
        returnbool = ShowOrHideTasselThumbnail();
    }
    if(hd_ClassName == "TasselColor")
    {
        //if the band color changes, update the charm color
        var oldbandcolor = tasselcolor;
        var newbandcolor = hd_Value;
        var theymatch = false;
        if(oldbandcolor.includes("(Gold"))
        {
            if(newbandcolor.includes("(Gold"))
            {
                theymatch = true;
            }
            else
            {
                charmstyle = charmstyle.replace("Gold", "Silver");
                SelectCorrectCharm();
            }
        }
        if(oldbandcolor.includes("(Silver"))
        {
            if(newbandcolor.includes("(Silver"))
            {
                theymatch = true;
            }
            else
            {
                charmstyle = charmstyle.replace("Silver", "Gold");
                SelectCorrectCharm();
            }
        }
        if(!theymatch)
        {

        }
		tasselcolor = hd_Value;
        imageswitchcase = 3;
    }
    if(hd_ClassName == "CharmStyle")
    {
        charmstyle = hd_Value;
        imageswitchcase = 3;
    }

//	console.log("***********************");
    return returnbool;
};

function SelectCorrectCharm(){
    if(!ClickOnElement("hd_CharmStyle", charmstyle, false))
    {
        var firstavailableelement = document.getElementsByClassName("hd_CharmStyle tcdisabled")[0];
        charmstyle = firstavailableelement.value.substring(0, firstavailableelement.value.length-2);
        ClickOnElement("hd_CharmStyle", firstavailableelement.value);
    }
}

function ShowOrHideTasselThumbnail()
{
    if(tasselselected)
    {
        if(tasselinit)
        {
            var selectedtassel = document.querySelectorAll('[class*="hd_TasselColor"][type="radio"]');
            selectedtassel.forEach(function(tassel){
                                        if(tassel.disabled = true)
                                        {
                                            tassel.disabled = false;
                                        }
            });
            var selectedcharm = document.querySelectorAll('[class*="hd_CharmStyle"][type="radio"]');
            selectedcharm.forEach(function(charm){
                                        if(charm.disabled = true)
                                        {
                                            charm.disabled = false;
                                        }
            });
            tasselinit = false;
        }
        ThumbnailTassel.style.display = "block";
        thumbnaildisplayid = "HomeschoolDiplomaThumbnail2";
        thumbnaildisplay = "Tassel";
        RefreshMainImage(tasselurl);
        return false;
    }
    else
    {
        ThumbnailTassel.style.display = "none";
        thumbnaildisplayid = "HomeschoolDiplomaThumbnail1";
        thumbnaildisplay = "ColorSize";
        RefreshMainImage(capgownfabricurl);
        return false;
    }
}

function CorrectColor()
{
    var colorwords = capgowncolor.split(' ');
    var fabricwords = capgownfabric.split(' ');
    capgowncolor = fabricwords[0] + " " + colorwords[1];
    ClickOnElement("hd_FabricColor", colorwords[1], false);
}

function DisplayVariables(){
    console.log("cardcolor: " + cardcolor);
    console.log("papercolor: " + papercolor);
    console.log("foilcolor: " + foilcolor);
    console.log("gradname: " + gradname);
    console.log("secondline: " + secondline);
    console.log("letterstyle: " + letterstyle);
    console.log("borderstyle: " + borderstyle);
    console.log("gradyear: " + gradyear);
    console.log("versefront: " + versefront);
};

/*
		var jsonstring = '{"Graduate Name":"' + response + '","Seal Design":"\'Soli Deo Gloria\' embossed foil","Diploma Paper":"Ivory Parchment","Optional Honors Seal (+$2.95)":"No Honors Seal","Hand Calligraphy for Student Name":"No Thanks","Your School Name":"","Gilded School Name":"No Thanks","Optional City and State of School":"","Wording Upgrade":"No Thanks","Select Month":"January","Select Day":"No Specific Day","Select Year":"2021","Cover Color":"Navy","Cover Design":"\'Diploma of Graduation\'","Personalize w/ Student\'s Name":"No Thanks","Diploma and Cover Size":"8.5 x 11 (top fold)","Wallet Diploma":"No Thanks","Archive Copy":"No Thanks","PDF Copy":"No Thanks","Please Verify":"Please enter your name."}';

*/
async function RefreshCap(localthumbnailtimestamp)
{
    capgownfabricurl = await GetJSONImageURL("Cap", "MortarboardPreviewB");
    if(globalthumbnailtimestamp != localthumbnailtimestamp)
        return false;
    else
        return true;
}

async function RefreshTassel(localthumbnailtimestamp)
{
    tasselurl = await GetJSONImageURL("Tassel", "TasselsPreviewB");

    if(globalthumbnailtimestamp != localthumbnailtimestamp)
        return false;
    else
        return true;
}

async function ProductLevelRefreshImages(){

    var localthumbnailtimestamp;

    if(globalthumbnailtimestamp == null)
    {
    }
    else
    {
    }
    globalthumbnailtimestamp = Date.now();
    localthumbnailtimestamp = globalthumbnailtimestamp;
    var originalthumbnaildisplay = thumbnaildisplay;

    switch(imageswitchcase)
    {
        case 0:
            //none
            return;
            break;
        case 1: //just cap
            ThumbnailCap.classList.add("hd_blurimg");
            capchanging = true;
            capchanged = false;
            switch(thumbnaildisplay)
            {
                case "ColorSize":
                    HomeschoolDiplomaLivePreview.classList.add("hd_blurimg");
                    if(await(RefreshCap(localthumbnailtimestamp)))
                    {
                        RefreshMainImage(capgownfabricurl);
                        RefreshThumbnailImageURL(capgownfabricurl, "HomeschoolDiplomaThumbnail1");
                        capchanged = true;
                    }
                    else
                        return;
                    break;
                default:
                    if(await(RefreshCap(localthumbnailtimestamp)))
                    {
                        RefreshThumbnailImageURL(capgownfabricurl, "HomeschoolDiplomaThumbnail1");
                        capchanged = true;
                    }
                    else
                        return;
                    break;
            }
            break;
        case 2:  //both
            HomeschoolDiplomaLivePreview.classList.add("hd_blurimg");
            ThumbnailCap.classList.add("hd_blurimg");
            ThumbnailTassel.classList.add("hd_blurimg");
            capchanging = true;
            capchanged = false;
            tasselchanging = true;
            tasselchanged = false;
            if(thumbnaildisplay == "ColorSize")
            {
                if(await(RefreshCap(localthumbnailtimestamp)))
                {
                    RefreshMainImage(capgownfabricurl);
                    RefreshThumbnailImageURL(capgownfabricurl, "HomeschoolDiplomaThumbnail1");
                    capchanged = true;
                    if(await(RefreshTassel(localthumbnailtimestamp)))
                    {
                        RefreshThumbnailImageURL(tasselurl, "HomeschoolDiplomaThumbnail2");
                        tasselchanged = true;
                    }
                    else
                        return;
                }
                else
                    return;
            }
            else //tassel
            {
                if(await(RefreshTassel(localthumbnailtimestamp)))
                {
                    RefreshMainImage(tasselurl);
                    RefreshThumbnailImageURL(tasselurl, "HomeschoolDiplomathumbnail2");
                    tasselchanged = true;
                    if(await(RefreshCapAndGown(localthumbnailtimestamp)))
                    {
                        RefreshThumbnailImageURL(capgownfabricurl, "HomeschoolDiplomaThumbnail1");
                        capchanged= true;
                    }
                    else
                        return;
                }
                else
                    return;
            }
            break;
        case 3: // just tassel
            ThumbnailTassel.classList.add("hd_blurimg");
            tasselchanging = true;
            tasselchanged = false;
            switch(thumbnaildisplay)
            {
                case "Tassel":
                    HomeschoolDiplomaLivePreview.classList.add("hd_blurimg");
                    if(await(RefreshTassel(localthumbnailtimestamp)))
                    {
                        RefreshMainImage(tasselurl);
                        RefreshThumbnailImageURL(tasselurl, "HomeschoolDiplomaThumbnail2");
                        tasselchanged = true;
                    }
                    else
                        return;
                    break;
                default:
                    if(await(RefreshTassel(localthumbnailtimestamp)))
                    {
                        RefreshThumbnailImageURL(tasselurl, "HomeschoolDiplomaThumbnail2");
                        tasselchanged = true;
                    }
                    else
                        return;
                    break;
            }
            break;
    }

    //cleanup
    globalthumbnailtimestamp = null;
    HomeschoolDiplomaLivePreview.classList.remove("hd_blurimg");
    if(capchanged)
        ThumbnailCap.classList.remove("hd_blurimg");
    if(tasselchanged)
        ThumbnailTassel.classList.remove("hd_blurimg");

    //check the everything changed that should have changed
    if(capchanging && !capchanged)
    {
        if(await(RefreshCap(localthumbnailtimestamp)))
        {
            if(thumbnaildisplay == "ColorSize")
                RefreshMainImage(capgownfabricurl);
            RefreshThumbnailImageURL(capgownfabricurl, "HomeschoolThumbnail1");
        }
    }
    if(tasselchanging && !tasselchanged)
    {
        if(await(RefreshTassel(localthumbnailtimestamp)))
        {
            if(thumbnaildisplay == "Tassels")
                RefreshMainImage(tasselurl);
            RefreshThumbnailImageURL(tasselurl, "HomeschoolThumbnail2");
        }
    }

    if(originalthumbnaildisplay != thumbnaildisplay)
    {
        if(thumbnaildisplay == "ColorSize")
        {
            RefreshMainImage(capgownfabricurl);
        }
        if(thumbnaildisplay == "Tassels")
        {
            RefreshMainImage(tasselurl);
        }
    }
}
    
function ReloadVariables()
{
    //check to see if "have been added to your cart" is present

    var woocommercemessage = document.getElementsByClassName("woocommerce-message");

    var proceed = false;

    for(var i=0; i<woocommercemessage.length; i++)

    {

        if(woocommercemessage[i].innerHTML.includes("been added to your cart."))
        {
            proceed = true;
            pagenavigationcontrol = true;
        }
    }

    if(document.URL.includes("cart_item_key"))

        proceed = true;

    if(document.URL.includes("design_nickname"))

        proceed = true;

    if(document.URL.includes("umeta_id"))

        proceed = true;

    if(!proceed)

        return false;

    busyreloadingvars = true;

    var hd_umetadata_element = document.getElementById("hd_umetadata");
    var hd_umetadata = "";
    if(hd_umetadata_element)
        hd_umetadata = hd_umetadata_element.innerHTML;

    //check the name first
    capgownfabric = SearchUmeta("hd_FabricFinish", hd_umetadata);
    if(capgownfabric == "")
        capgownfabric = GetCheckedHDVariable("hd_FabricFinish");

    capgowncolor = SearchUmeta("hd_FabricColor", hd_umetadata);
    if(capgowncolor == "")
        capgowncolor = GetCheckedHDVariable("hd_FabricColor");

    //look for the tassel checkbox
    var tasselcheckbox;
    tasselcheckbox = SearchUmeta("hd_TasselCheckbox", hd_umetadata);
    if(tasselcheckbox == "")
        tasselcheckbox = GetCleanHDVariable("hd_TasselChechbox");
    tasselcolor = SearchUmeta("hd_TasselColor", hd_umetadata);
    if(tasselcolor == "")
        tasselcolor = GetCheckedHDVariable("hd_TasselColor");
    charmstyle = SearchUmeta("hd_CharmStyle", hd_umetadata);
    if(charmstyle == "")
        charmstyle = GetCheckedHDVariable("hd_CharmStyle");
    if(tasselcheckbox == "No Thanks")
    {
        tasselselected = false;
        imageswitchcase = 1;
    }
    else
    {
        tasselselected = true;
        imageswitchcase = 2;
    }
    ShowOrHideTasselThumbnail();
    thumbnaildisplayid = "HomeschoolDiplomaThumbnail1";
    
    busyreloadingvars = false;

    return true;
};