<!-- The output container contains raw code for copying/pasting -->
<div id="output">
    <div class="style"></div>
    <div class="html"></div>
    <div class="script"></div>
</div>

<!-- The preview container contains the same code, but rendered -->
<div id="preview">
    <style id="listGenStyle"></style>
    <div id="listGenHTML"></div>
    <script id="listGenScript"></script>
</div>

<table id="mblParentContainer">
    <tbody>
        <tr>
            <td>
                <div class="mblWrpr">
                    <!-- I'm omitting the rest of the markup for the sake of saving space. But here would be the header, nav, mobile nav, slideshow, listing title, content boxes, footer -->
                </div>
            </td>
        </tr>
    </tbody>
</table>

iq.show(iq.sel("#mblSlide img:first-child"));
    iq.show(iq.sel(".mblHide.one"));
    iq.sel(".mblNav ul li:first-child").style.background = "#000";
    iq.sel(".mblNav ul li:first-child .triangle").style.display = "block";
    iq.sel(".mblNav ul li:first-child").style.borderBottom = "2px solid #66e2e3";
    iq.sel(".mblNav ul li:first-child a").style.color = "#66e2e3";
    iq.sel(".mblNav ul li:first-child a").style.textTransform = "uppercase";
    iq.click("a", function(){
        if (iq.hasClass(iq.sel("#mblMobile"), "open") && this.parentNode.parentNode.getAttribute("class") === "mblMM") {
            iq.fadeOut(100, iq.sel(".mblFadeWrapper"));
            iq.fadeOut(100, iq.sel("#mblMobile"));
            iq.removeClass(iq.sel("#mblMobile"), "open");
        } else if (!iq.hasClass(iq.sel("#mblMobile"), "open") && this.parentNode.parentNode.getAttribute("class") === "mblMM") {
            iq.fadeIn(100, iq.sel("#mblMobile"));
            iq.fadeIn(100, iq.sel(".mblFadeWrapper"));
            iq.addClass(iq.sel("#mblMobile"), "open");
        }
        var cls = iq.map("a", "class");
        for (var i = 0; i < cls.length; i++) {
            if (this.getAttribute("class") === cls[i]) {
                iq.show(iq.sel(".mblHide." + cls[i]));
                iq.scrollWindow(".mblHide." + cls[i]);
                iq.sel("a."+cls[i]).style.color = "#66e2e3";
                iq.sel("a."+cls[i]).style.textTransform = "uppercase";
                iq.sel("a."+cls[i]).parentNode.style.background = "#000";
                iq.sel("a."+cls[i]).parentNode.style.borderBottom = "2px solid #66e2e3";
                iq.sel("a."+cls[i]).parentNode.children[1].style.display = "block";
                var toHide = iq.selAll(".mblHide:not(." + cls[i] + ")");
                var a = iq.selAll(".mblMainNav a:not(."+cls[i]+")");
                for (var j = 0; j < toHide.length; j++) {
                    iq.hide(toHide[j]);
                    for (var k = 0; k < a.length; k++) {
                        a[k].style.color = "";
                        a[k].style.textTransform = "";
                        a[k].parentNode.style.background = "";
                        a[k].parentNode.style.borderBottom = "";
                        a[k].parentNode.children[1].style.display = "";
                    }
                }
            }
        }
    });
    iq.click(".menu-trigger", function(){
        iq.addOrRemoveClass(iq.sel("#mblMobile"), "open");
        if (iq.hasClass(iq.sel("#mblMobile"), "open")) {
            iq.fadeIn(100, iq.sel(".mblFadeWrapper"));
            iq.fadeIn(100, iq.sel("#mblMobile"));
        } else {
            iq.fadeOut(100, iq.sel("#mblMobile"));
            iq.fadeOut(100, iq.sel(".mblFadeWrapper"));
        }
    });
    iq.click("#mblThumbs img", function(){
        var dn = iq.map("img", "data-name");
        for (var i = 0; i < dn.length; i++) {
            if (this.getAttribute('data-name') === dn[i]) {
                var outs = iq.selAll('#mblSlide img:not([data-name="' + dn[i] + '"])');
                for (var j = 0; j < outs.length; j++) {
                    iq.fadeOut(100, outs[j]);
                }
                iq.fadeIn(200, iq.sel('#mblSlide img[data-name="' + dn[i] + '"]'));
            }
        }
    });
    var num = iq.sel(".mblHOne").nextElementSibling.innerHTML.replace(/.10/g, "");
    var stars = iq.selAll(".star");
    var arr = [];
    for (var i = 0; i < stars.length; i++) {
        arr.push(stars[i]);
    }
    arr.splice(0, num);
    for (var j = 0; j < arr.length; j++) {
        arr[j].style.color = "black";
    }
    var thumbs = iq.selAll("#mblThumbs img");
    for (var k = 0; k < thumbs.length; k++) {
        if (thumbs[k].getAttribute("src") === "") {
            thumbs[k].remove();
        }
    }
    var logo = iq.sel(".mblHdr img");
    if (logo.getAttribute("src") === "undefined") {
        iq.hide(logo);
    } else {
        iq.show(logo);
    }
    iq.click(".back-to-top", function(){
        iq.scrollWindow(".mblWrpr");
    });

$(document).ready(function(){

    // We need the HTML template right away so we populate it
    // with variables declared in this script.
    // We'll grab the external CSS and JS after the HTML
    // template is fully populated.
    $('#listGenHTML').load('listGen.html');
//***********************************************************************************
//                                         OUTPUT GENERATION FUNCTIONS
//***********************************************************************************

    // On form submit, populate code output container and preview container
    $('#form1').on('submit', function(e) {

        e.preventDefault();

        // Set the src attribute for the logo image if it exists
        var logoSrc = $('#company-logo .preview img').attr('src');
        if (logoSrc) {
            logoSrc = logoSrc.replace(//thumbnail/g, '');
        }
        $('.mblHdr img').attr('src', logoSrc);

        // Grab values of menu item inputs and use them to populate
        // the main nav and mobile nav, as well as the corresponding description header
        var menu = [];
        $('.menuItems input').each(function(){
            menu.push($(this).val());
        });

        for (var h = 0; h < menu.length; h++) {
            $('.mblMainNav li').eq(h).find('a').text(menu[h]);
            $('.mblMM li').eq(h).find('a').text(menu[h]);
            $('.mblDescHdr').eq(h).text(menu[h]);
        }


        // Grab the href and src attributes for uploaded images and their links
        // and use them to populate the slideshow
        var fullSizeSrc = [];
        var thumbSrc = [];
        var total = $('#slide-upload tr').length;
        for (var i =1; i <= total; i++){
            var fss = $('#slide-upload tr:nth-child('+i+') td:first a').attr('href');
            var ts = fss.replace(//thumbnail/g, '');
            fullSizeSrc.push(fss);
            thumbSrc.push(ts);
        }

        for (var j = 0; j < fullSizeSrc.length; j++) {
            $('#mblSlide a').eq(j).attr('href', fullSizeSrc[j]);
            $('#mblSlide a').eq(j).find('img').attr('src', fullSizeSrc[j]);
        }

        for (var k = 0; k < thumbSrc.length; k++) {
            $('#mblThumbs img').eq(k).attr('src', thumbSrc[k]);
        }

        // Get the values entered in the item description textareas
        // and populate the description boxes
        var itemDesc = [];
        $('.desc-boxes textarea').each(function(){
            itemDesc.push($(this).val());
        });

        for (var l = 0; l < itemDesc.length; l++) {
            $('.mblParaDesc').eq(l).text(itemDesc[l]);
        }

        // Get the value of the Item Title input field and populate the item title header
        var itemTitle = $('.itemTitle').val();
        $('.mblHOne').text(itemTitle);

        // Get the value of the Item Rating input field and populate the item rating
        var itemRating = $('.itemRating').val();
        $('.rating').text(itemRating+'/10');

        // Get the script and insert as HTML into the proper script tag in #preview
        $('#listGenScript').load('listGen.js');

       // Get the stylesheet and insert as CSS into the proper style tag in #preview
        $('#listGenStyle').load('listGen.css', function(){
            // Populate code container with raw code
            $('#output .style').text('<style>' + $('#listGenStyle').html() + '</style>');
            $('#output .html').text($('#listGenHTML').html());
            $('#output .script').text('<script>' + $('#listGenScript').html() + '</script>');

            // Now we can show the preview container and UI buttons
            $('#preview').fadeIn();
            $('.continue-editing, .get-code, #form-clear').fadeIn();
        });
    });

    // Close the preview but keep all the input values and storage
    $('.continue-editing').click(function(){
        $('.continue-editing, .get-code, #form-clear').fadeOut();
        $('#output').fadeOut().empty();
        $('#preview').fadeOut();

    });

    // Same as above, but clear form and storage
    $('#form-clear').click(function(){
        document.forms.form1.reset();
        $('button[data-type="DELETE"]').each(function(){
            $(this).click();
        });
        $('#output').fadeOut().empty();
        $('#preview').fadeOut().empty();
        $('.continue-editing, .get-code, #form-clear').fadeOut();
        window.location.reload();
    });

    // View the code block output
    $('.get-code').click(function(){
        $('#output').toggle();
    });
});