function setupcoverflipwide(sliderMultiplier) {

    // Calculate image height/width ratio
    function get_ratio(height, width) {
        if (height == 6) { height = width / get_ratio(200, 300); }
        return parseFloat(Math.round((width / height) * Math.pow(10, 2)) / Math.pow(10, 2));
    }

    var numberOfImages = $("#flip li").length;
    var sliderMultiplier = Math.round(100 / numberOfImages);
    var imgWidth = 300;
    var imgHeight = 200;
    var imgHeight, bottom, ratio, new_width, new_height, left;
    var halfImgWidth = imgWidth / 2;
    var padding = 7;
    var imgWidthPadded = imgWidth + padding;
    var halfImgWidthPadded = halfImgWidth + padding;
    var base = 0;

    $("#flip").jcoverflip({
        current: 2,
        beforeCss: function (el, container, offset) {
            ratio = get_ratio(el.height(), el.width());
            new_width = Math.max(10, halfImgWidth / (offset + 1 * 1.7) - padding * 2 * offset);
            bottom = parseInt(((imgHeight) - (new_width / ratio)) / 2 + base);

            // Keep ease speeds even
            if (offset == 1) offset = 0.12;
            if (offset == 2) offset = 0.18;

            var left = container.width() / 2 - imgWidthPadded - halfImgWidthPadded / (offset + 1 / 1.7) * offset + ((new_width + padding) / 2) + padding * 2 + 1;
            return [
						$.jcoverflip.animationElement(el, { left: left + "px", bottom: bottom }, {}),
						$.jcoverflip.animationElement(el.find("img"), { width: new_width + "px" }, {})
					];
        },
        afterCss: function (el, container, offset) {
            ratio = get_ratio(el.height(), el.width());
            new_width = Math.max(10, halfImgWidth / (offset + 1 * 1.7) - padding * 2 * offset);
            bottom = parseInt(((imgHeight) - (new_width / ratio)) / 2 + base);

            // Keep ease speeds even
            if (offset == 1) offset = 2.7;
		if(offset >= 3) offset = 100;
            if (offset == 2) offset = 20;

            return [
						$.jcoverflip.animationElement(el, { left: (container.width() / 2 + halfImgWidthPadded + halfImgWidthPadded / (offset + 1 * 1.7) * offset), bottom: bottom }, {}),
						$.jcoverflip.animationElement(el.find("img"), { width: new_width + "px" }, {})
					];
        },
        currentCss: function (el, container) {
            if (el.find('img').attr('complete')) {
                ratio = get_ratio(el.height(), el.width());
            }
            else {
                ratio = 1.5;  // assume image has correct width and height
            }
            new_width = imgWidth;
            if (ratio < 1) new_width = new_width * (ratio / 1.5); // 1.5 = target ratio i.e. 300/200

            left = (container.width() / 2) - (new_width / 2);
            return [
						$.jcoverflip.animationElement(el, { left: left, bottom: base }, {}),
						$.jcoverflip.animationElement(el.find("img"), { width: new_width }, {})
					];
        },
        change: function (event, ui) {
            $("#scrollbar").slider("value", ui.to * sliderMultiplier);
        }
    });
    setupscroller(sliderMultiplier);
}


function setupcoverflip(sliderMultiplier) {

    // Calculate image height/width ratio
    function get_ratio(height, width) {
        if (height == 6) { height = width / get_ratio(200, 300); }
        return parseFloat(Math.round((width / height) * Math.pow(10, 2)) / Math.pow(10, 2));
    }

    var numberOfImages = $("#flip li").length;
    var sliderMultiplier = Math.round(100 / numberOfImages);
    var imgWidth = 250;
    var imgHeight, bottom, ratio, new_width;
    var halfImgWidth = imgWidth / 2;
    var padding = 15;
    var imgWidthPadded = imgWidth + padding;
    var halfImgWidthPadded = halfImgWidth + padding;

    imgHeight = 167;

    $("#flip").jcoverflip({
        current: 1,
        beforeCss: function (el, container, offset) {

            ratio = get_ratio(el.height(), el.width());
            new_width = Math.max(10, halfImgWidth - padding * 2);
            bottom = parseInt((imgHeight + (new_width / ratio)) / 2);

            // Keep ease speeds even
            if (offset == 1) offset = 0.9;

            return [
					$.jcoverflip.animationElement(el, { left: (container.width() / 2 - imgWidthPadded - halfImgWidthPadded * offset * offset + (padding * 2)) + "px", bottom: bottom }, {}),
					$.jcoverflip.animationElement(el.find("img"), { width: new_width + "px" }, {})
				];
        },
        afterCss: function (el, container, offset) {

            ratio = get_ratio(el.height(), el.width());
            new_width = Math.max(10, halfImgWidth - padding * 2);
            bottom = parseInt((imgHeight + (new_width / ratio)) / 2);

            // Keep ease speeds even
            if (offset == 1) offset = 0.75;

            return [
					$.jcoverflip.animationElement(el, { left: (container.width() / 2 + halfImgWidthPadded + halfImgWidthPadded * offset) + "px", bottom: bottom }, {}),
					$.jcoverflip.animationElement(el.find("img"), { width: new_width + "px" }, {})
				];
        },
        currentCss: function (el, container) {
            if (el.find('img').attr('complete')) {
                ratio = get_ratio(el.height(), el.width());
            }
            else {
                ratio = 1.5;  // assume image has correct width and height
            }
            new_width = imgWidth;
            if (ratio < 1) new_width = new_width * (ratio / 1.5); // 1.5 = target ratio i.e. 300/200

            left = (container.width() / 2) - (new_width / 2);

            return [
					$.jcoverflip.animationElement(el, { left: left + "px", bottom: "65px" }, {}),
					$.jcoverflip.animationElement(el.find("img"), { width: new_width }, {})
				];
        },
        change: function (event, ui) {
            $("#scrollbar").slider("value", ui.to * sliderMultiplier);
        }
    });

    setupscroller(sliderMultiplier);
}


function setupscroller(sliderMultiplier) {

    $("#scrollbar").slider({
        value: 0,
        stop: function (event, ui) {
            if (event.originalEvent) {
                var newVal = Math.round(ui.value / sliderMultiplier);
                $("#flip").jcoverflip('current', newVal);
                $("#scrollbar").slider('value', newVal * sliderMultiplier);
            }
        }
    });

    $(".scrollPrevious").click(function () {
        $("#flip").jcoverflip("previous", 1, false);
        return false;
    });

    $(".scrollNext").click(function () {
        $("#flip").jcoverflip("next", 1, false);
        return false;
    });



    //?????? todo wd // why is this here?????
    //$("#optionsPanel").hide();

    //    $("#showOptions").toggle(function () {
    //        $("#optionsPanel").show();
    //        $(this).addClass("open").find("span").text("Hide distance and currency options");
    //    }, function () {
    //        $("#optionsPanel").hide();
    //        $(this).removeClass("open").find("span").text("Show distance and currency options");
    //    });
}