var refreshIntervalId = null;
// Prefer same-origin relative paths so HTTPS doesn't break due to mixed-content / upgrade rules.
var imgurl = "img/";

function getApiUrl() {
    // Use scheme-relative URL so it matches http/https of the current page.
    // NOTE: if the API does not support https, consider proxying it via Apache and pointing to a same-origin endpoint.
    return "//api.martn.ncue.net/dreamgirl.ncue";
}

function getRandomIndex(n) {
    var arr = new Array();
    var temp;
    var rnum;

    for(var i=0; i<n; i++) {
        arr.push(i);
    }
    for(var i=0; i<arr.length; i++) {
        rnum = Math.floor(Math.random()*n);
        temp = arr[i];
        arr[i] = arr[rnum];
        arr[rnum] = temp;
    }
    return arr;
}

function onLoad() {

    function initGallery() {
        // We only want these styles applied when javascript is enabled
        // Layout is now handled by CSS (flex). Keep JS from forcing a fixed width.
        $('div.navigation').css({'width' : '', 'float' : ''});
        $('div.content').css('display', 'block');

        // Initially set opacity on thumbs and add additional styling for hover effect on thumbs
        var onMouseOutOpacity = 0.67;
        $('#thumbs ul.thumbs li').opacityrollover({
            mouseOutOpacity:   onMouseOutOpacity,
            mouseOverOpacity:  1.0,
            fadeSpeed:         'fast',
            exemptionSelector: '.selected'
        });

        // Initialize Advanced Galleriffic Gallery
        $('#thumbs').galleriffic({
            delay:                     2500,
            numThumbs:                 15,
            preloadAhead:              10,
            enableTopPager:            true,
            enableBottomPager:         true,
            maxPagesToShow:            7,
            imageContainerSel:         '#slideshow',
            controlsContainerSel:      '#controls',
            captionContainerSel:       '#caption',
            loadingContainerSel:       '#loading',
            renderSSControls:          true,
            renderNavControls:         true,
            playLinkText:              'Play Slideshow',
            pauseLinkText:             'Pause Slideshow',
            prevLinkText:              '&lsaquo; Previous Photo',
            nextLinkText:              'Next Photo &rsaquo;',
            nextPageLinkText:          'Next &rsaquo;',
            prevPageLinkText:          '&lsaquo; Prev',
            enableHistory:             false,
            autoStart:                 true,
            syncTransitions:           true,
            defaultTransitionDuration: 900,
            onSlideChange:             function(prevIndex, nextIndex) {
                // 'this' refers to the gallery, which is an extension of $('#thumbs')
                this.find('ul.thumbs').children()
                    .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
                    .eq(nextIndex).fadeTo('fast', 1.0);
            },
            onPageTransitionOut:       function(callback) {
                this.fadeTo('fast', 0.0, callback);
            },
            onPageTransitionIn:        function() {
                this.fadeTo('fast', 1.0);
            }
        });
    }

    function buildThumbsFromList(fileNames) {
        var text = "<ul class='thumbs noscript'>";
        var rid = getRandomIndex(fileNames.length);

        for (var i=0; i<rid.length; i++) {
            var fname = fileNames[rid[i]];
            var imgfile = imgurl + encodeURIComponent(fname);
            text += "<li>";
            text += "  <a class='thumb' name='leaf' href='" + imgfile + "' title='girl" + (i+1) + "'>";
            text += "    <img src='" + imgfile + "' alt='girl" + (i+1) + "' width='75' height='75'/>";
            text += "  </a>";
            text += "  <div class='caption'></div>";
            text += "</li>";
        }
        text += "</ul>";
        $("#thumbs").html(text);
        initGallery();
    }

    function fallbackToLocalManifest() {
        if (window.DREAMGIRL_IMAGES && window.DREAMGIRL_IMAGES.length) {
            buildThumbsFromList(window.DREAMGIRL_IMAGES);
            return true;
        }
        // Minimal fallback if manifest is missing for some reason
        buildThumbsFromList(['0.jpg','1.jpg','2.jpg','3.jpg','20.jpg','24.jpg','25.jpg','26.jpg','28.jpg','36.jpg','66.jpg']);
        return true;
    }

    $.ajax({
        url : getApiUrl(),
        type: 'GET',
        data : "id=user",
        dataType : "jsonp",
        jsonp : "callback",
        cache : false,
        timeout: 15000,
        success: function(data) {
            try {
                var filelist = data && data.filelist ? data.filelist : null;
                if (!filelist || !filelist.length) return fallbackToLocalManifest();
                var names = [];
                for (var i=0; i<filelist.length; i++) {
                    if (filelist[i] && filelist[i]["img"]) names.push(filelist[i]["img"]);
                }
                if (!names.length) return fallbackToLocalManifest();
                buildThumbsFromList(names);
            } catch (e) {
                fallbackToLocalManifest();
            }
        },
        error: function () {
            // If remote API fails (common on HTTPS if api host doesn't support it), fall back to local images.
            fallbackToLocalManifest();
        }
    });

    return true;
}


function toggle() {
	if (!document.getElementById('betoven').muted) {
		document.getElementById('betoven').muted = true;
		clearInterval(refreshIntervalId);
		$("#toggle").html("start");
	} else {
		document.getElementById('betoven').muted = false;
		/*
		refreshIntervalId = setInterval(function() {		
			var index = Math.floor(Math.random()*278) + 1;
			$("#thumbs").html("<img src='"+pictures[index]+"' width='100%' onerror=\"this.src='"+imgurl+"z7jP92.jpg'\"/>");
		}, 3000);
		*/
		$("#toggle").html("stop");
	}
}