var viewer = null;
var imageArray = [];
var hotSpotArray = [];
var curDZI = 0;
var curValue = 0;
var hfDeepZoom = null;

//Seadragon.Utils.addEvent(window, "load", initDeepZoom);

$(document).ready(function() {
    if ($('input[name=hfCurDeepZoomImage]').length) {
        hfDeepZoom = $('input[name=hfCurDeepZoomImage]');
    }
    setPods();
    setContent();
    setIcons();
    setFacebook();
    bindEvents();
    if (typeof xmlSource != "undefined") {
        Seadragon.Config.visibilityRatio = 1;
        Seadragon.Config.zoomPerScroll = 1.4;
        Seadragon.Config.zoomPerClick = 1;
        loadDZI();
    } else {
        $('#btnPrev').hide();
        $('#btnNext').hide();
        $('.zoomControls').css('visibility', 'hidden');
    }
    setImageNav();
    addOverlays();
    if ($('div.baseshape').length) {
        setShapes();
    }

    if ($('div.designmodel').length) {
        setModels();
    }

    if ($('ul.colors').length) {
        setColors();
    }

    if ($('.podLeft').find('.hotspot').length) {
        setHotSpots();
    }

    $('.configInfo').click(function(e) {
        $(this).next().show();
        $(this).next().find('.closeHotSpotOverlayBig').unbind().click(function() {
            $(this).parent().hide();
        });
    });

    var intervalFB = window.setInterval(function() {
        if ($('.fb_edge_comment_widget').length) {
            $('.fb_edge_comment_widget').each(function() {
                $(this).css('top', '-' + $(this).height() + 'px');
            });
        }
    }, 100);
    
});

/* Seadragon DeepZoom */

function initButtons() {
    var btnPrev = $('#btnPrev');
    var btnNext = $('#btnNext');

    btnPrev.click(function() {
        if (imageArray.length > 1) {
            if (curDZI > 0) {
                curDZI--;
            } else {
                curDZI = imageArray.length;
            }
            SwitchTo();
            $('.hotspotOverlay').remove();
            count();
        }
    });

    btnNext.click(function() {
        if (imageArray.length > 1) {
            if (curDZI < imageArray.length) {
                curDZI++;
            } else {
                curDZI = 0;
            }
            SwitchTo();
            $('.hotspotOverlay').remove();
            count();
        }
    });
}

function count() {
    var pageid = $('.btnNext').attr('pageid');
    $.ajax({
        url: 'BGClickHandler.axd',
        data: { "pageid": pageid, "nocache": timeStamp() }
    });
}

function timeStamp() {
    var time = new Date();
    return time.getTime();
}

function initSlider() {
    curValue = 0;
    zoomSlider = $('.zoomSlider');
    zoomSlider.slider('destroy');
    zoomSlider.zoom();
    $('.plus').unbind();
    $('.minus').unbind();
    $('.plus').click(function() {
        if (curValue <= 7) {
            zoomSlider.slider('value', (curValue + 1.4));
            curValue = zoomSlider.slider('value');
            viewer.viewport.zoomTo(zoomLevel * 1.4);
        }
        if (curValue == 7) {
            zoomSlider.find('a').css('margin-bottom', '-6px');
        }

        $('.hotspotOverlay').remove();
    });
    $('.minus').click(function () {
        if (curValue >= 1) {
            zoomSlider.slider('value', (curValue - 1.4));
            curValue = zoomSlider.slider('value');
            viewer.viewport.zoomTo(zoomLevel / 1.4);
        }
        if (curValue == 0) {
            zoomSlider.find('a').css('margin-bottom', '0');
        }
        $('.hotspotOverlay').remove();
    });
}

function onMouseWheel(event) {
    var delta = Seadragon.Utils.getMouseScroll(event);
    $('.hotspotOverlay').remove();
    if (delta > 0) {
        zoomSlider.slider('value', (curValue + 1.4));
        curValue = zoomSlider.slider('value');
        if (curValue == 7) {
            zoomSlider.find('a').css('margin-bottom', '-6px');
        }
    }
    else {
        zoomSlider.slider('value', (curValue - 1.4));
        curValue = zoomSlider.slider('value');
        if (curValue == 0) {
            zoomSlider.find('a').css('margin-bottom', '0');
        }
    }
}

$.fn.zoom = function () {
    zoomSlider = $(this);
    zoomSlider.slider({
        orientation: 'vertical',
        min: 0,
        max: 8.4,
        value: 0,
        step: 1.4,
        slide: function(event, ui) {
            $('.hotspotOverlay').remove();
            if (ui.value == 0) {
                zoomSlider.find('a').css('margin-bottom', '0');
            } else if (ui.value == 7) {
                zoomSlider.find('a').css('margin-bottom', '-6px');
            }
            if (curValue < ui.value && ui.value <= 7) {
                viewer.viewport.zoomTo(zoomLevel * 1.4);
            } else if (curValue > ui.value) {
                viewer.viewport.zoomTo(zoomLevel / 1.4);
            } else if (ui.value == 8.4) {
                viewer.viewport.zoomTo(6.275);
            }
            curValue = ui.value;
        }
    });
}

function initDeepZoom() {
    var bgImage = $('#bgImage');
    hfDeepZoom.val(imageArray[curDZI].axid);
    viewer = new Seadragon.Viewer("bgImage");
    viewer.openDzi(imageArray[curDZI].source);
    viewer.clearControls();
    addSeadragonEvents(); 
}

function addSeadragonEvents() {
    viewer.addEventListener("open", Resize);
    viewer.addEventListener("open", addHotSpots);
    viewer.addEventListener("animation", resetZoom);
    viewer.addEventListener("open", initSlider);
    Seadragon.Utils.addEvent(viewer.elmt, "mousewheel", onMouseWheel); 
}

function Resize() {
    var sizePixels = viewer.viewport.getContainerSize();
    viewer.viewport.zoomTo(1, sizePixels.y);
}

function resetZoom() { zoomLevel = viewer.viewport.getZoom(); if (zoomLevel < 1) { Resize(); } }

function loadDZI() {
    $.ajax({
        type: "GET",
        url: xmlSource,
        dataType: ($.browser.msie) ? "text" : "xml",
        timeout: 1000,
        success: function(xml) {
            var data;
            if ($.browser.msie) {
                data = new ActiveXObject("Microsoft.XMLDOM");
                data.async = false;
                data.loadXML(xml);
            } else {
                data = xml;
            }

            $(data).find('Image').each(function() {
                var source = $(this).attr('src').toString()
                var axid = $(this).attr('axid');

                var Image =
                    { source: source,
                        axid: axid
                    }
                imageArray.push(Image);

                $(this).find('data').each(function() {
                    var data = $(this);
                    var HotSpot =
                    {
                        ImageID: axid,
                        x: data.find('x').text(),
                        y: data.find('y').text(),
                        text: data.find('text').text(),
                        detailImage: data.find('background').text()
                    }
                    hotSpotArray.push(HotSpot);
                });
            });
        }, complete: function() {
            if (hfDeepZoom.val() != "") {
                for (var i = 0; i < imageArray.length; i++) {
                    if (imageArray[i].axid == hfDeepZoom.val()) {
                        curDZI = i;
                    }
                }
            }
            initDeepZoom();
            initButtons();
        }
    });
}

function addHotSpots() {
    for (var i = 0; i < hotSpotArray.length; i++) {
        if (hotSpotArray[i].ImageID == imageArray[curDZI].axid) {
            var x = hotSpotArray[i].x;
            var y = hotSpotArray[i].y;
            var bgImage = $('#bgImage');
            var img = document.createElement("img");
            var ratio = viewer.source.aspectRatio;
            var original_dim = viewer.source.dimensions;
            var height = bgImage.width() / ratio;
            x = (bgImage.width() / original_dim.x) * x;
            y = (height / original_dim.y) * (y);
            y += (bgImage.height() - height) / 2;
            var placement = Seadragon.OverlayPlacement.CENTER;
            var newPoint = viewer.viewport.pointFromPixel(new Seadragon.Point(x, y));
            img.src = "templates/Bilder/SmartDesign/infoBtn.png";
//            img.setAttribute('class', 'openHotSpot');
            img.setAttribute('detailURL', hotSpotArray[i].detailImage);
            img.setAttribute('text', hotSpotArray[i].text);
            viewer.drawer.addOverlay(img, newPoint, placement);

            $(img).bind('click', function(){
                showInfo($(this));
            });
            
            $(img).hover(function () {
                $(this).attr("src", "templates/Bilder/SmartDesign/infoBtnHover.png");
            }, function () {
                $(this).attr("src", "templates/Bilder/SmartDesign/infoBtn.png");
            });
        }
    }
}

function showInfo(obj) {
    var img = obj.attr('detailURL') != "" ? '<img src="' + obj.attr('detailURL') + '" alt="" />' : '';
    $('<div class="hotspotOverlay"></div>')
    .html(
        '<img class="closeHotSpot" src="templates/Bilder/SmartDesign/btnCloseYellowtrans.png" alt="" />' +
        '<div class="hotspotBg">' +
        img +
        '<p>' + obj.attr('text') + '</p>' +
        '</div>' +
        '<div class="hotspotBottom"></div>'
    ).appendTo('.bg').css({
        top: obj.offset().top - 150,
        left: obj.offset().left + 367 > $(window).width() ? obj.offset().left - 320 : obj.offset().left + 40
    });

    $('.closeHotSpot').click(function() {
        $(this).parent().remove();
        return false;
    });
        
}

function SwitchTo() {
    hfDeepZoom.val(imageArray[curDZI].axid);
    viewer.openDzi(imageArray[curDZI].source);
}

/* END Seadragon DeepZoom */

/* Positionierung */
function setIcons() {
    var icons = $('div.icons');
    icons.css({
        top: $('div.content').height() - icons.height(),
        left: $(window).width() > 960 ? $(window).width() - 36 : 924
    });

    $(window).resize(function () {
        icons.css({
            top: $('div.content').height() - icons.height(),
            left: $(window).width() > 960 ? $(window).width() - 36 : 924
        });
    });
}

function setImageNav() {
    var btnPrev = $('#btnPrev');
    var btnNext = $('#btnNext');

    btnPrev.css({
        left: 0,
        top: ($(window).height() + 9) / 2
    }).fadeIn();

    btnNext.css({
        left: $(window).width() - 25,
        top: ($(window).height() + 9) / 2
    }).fadeIn();

    $(window).resize(function () {
        btnPrev.css({
            left: 0,
            top: ($(window).height() + 9) / 2
        });

        btnNext.css({
            left: $(window).width() - 25,
            top: ($(window).height() + 9) / 2
        });
    });

}

function setContent() {
    var content = $('div.content');
    var bgImage = $('#bgImage');
    var height = 0;
    var offset = 0;

    if ($('.navi').length) {
        offset = 130;
    } else {
        offset = 130;
        $('.icons').hide();
        $('.header').height(100);
    }
    
    content.children('div').each(function () {
        var div = $(this);
        if (!div.hasClass('bgimg')) {
            if (div.height() > height) {
                height = div.height()+90;
            }
        }
    });

    content.css({
        height: $(window).height() - offset > height ? $(window).height() - offset: height
    });

    bgImage.height(content.height());

    $(window).resize(function() {
        content.css({
            height: $(window).height() - offset > height ? $(window).height() - offset : height,
            width: $(window).width() < 960 ? 960 : '100%'
        });

        bgImage.height(content.height());
        bgImage.width(content.width());
    });
}

function setFacebook() {
    var box = $('.facebook');
    $('.fbIcon').click(function() {
        var left = ($(window).width() - 960) / 2;
        box.animate({
            right: (left)
        }, 1000);
    });
    box.find('.closeIcon').click(function() {
        var left = ($(window).width() - 960) / 2;
        box.animate({
            right: -450
        }, 1000);
    });
}

function setPods(){
    var podleft = $('div.podLeft');
    var podright = $('div.podRight');
    var podcenter = $('div.pod960');
    podleft.css({
        display: 'none',
        left: $(window).width() > 960 ? ($(window).width() - 960) / 2 : 0
    }).show();
    podleft.setSlider();

    podright.css({
        display: 'none',
        left: $(window).width() > 960 ? (($(window).width() - 960) / 2) + 670 : 670
    }).show();

    podcenter.css({
        display: 'none',
        left: $(window).width() > 960 ? (($(window).width() - 960) / 2) : 0,
        height: podcenter.height() > $(window).height() - 220 ? $(window).height() - 220 : 'auto',
        'overflow': podcenter.height() > $(window).height() - 220 ? 'hidden' : 'auto'
    }).show();

    podcenter.setSlider();

    $(window).resize(function () {
        podleft.css({
            left: $(window).width() > 960 ? ($(window).width() - 960) / 2 : 0
        });

        podright.css({
            left: $(window).width() > 960 ? (($(window).width() - 960) / 2) + 670 : 670
        });

        podcenter.css({
            left: $(window).width() > 960 ? (($(window).width() - 960) / 2) : 0
        });
    });
}

/* END Positionierung */

/* Eventhandling */

function bindEvents(){
    $('img.closePod').click(function () {
        if ($(this).parent().hasClass('pod960')) {
            animate(true, $('.pod960'));
        } else if ($(this).parent().hasClass('noBorder')) {
            animate(false,$('.noBorder'));
        }
    });

    $('img.closePods').click(function () {
        animateBoth();
    });

    $('.tooltip').each(function () {
        $(this).tooltip();
    });

    $('img.tellIcon', '.icons').hover(function () {
        $(this).attr('src', 'templates/Bilder/SmartDesign/bubbleHover.png');
    }, function () {
        $(this).attr('src', 'templates/Bilder/SmartDesign/bubble.png');
    });

    $('img.favBtn', '.icons').hover(function () {
        $(this).attr('src', 'templates/Bilder/SmartDesign/favHover.png');
    }, function () {
        $(this).attr('src', 'templates/Bilder/SmartDesign/fav.png');
    });

    $('img.fbIcon', '.icons').hover(function () {
        $(this).attr('src', 'templates/Bilder/SmartDesign/facebookHover.png');
    }, function () {
        $(this).attr('src', 'templates/Bilder/SmartDesign/facebook.png');
    });
}

/* END Eventhandling */

/* Pods */

function animateBoth() {
    
    var podLeft = $('.podLeft');
    var podRight = $('.podRight');
    var offsetLeft = podLeft.offset().left;
    var offsetRight = podRight.offset().left;
    podLeft.animate({
        left: -podLeft.width() - 6
    }, 1000, function() {
        podLeft.css({ overflow: 'hidden' });
    });

    podRight.animate({
        left: (podRight.offset().left) + ($(window).width() - podRight.offset().left)
    }, 1000, function() {
        $('img.openPod', podRight).show();
    });

    $('img.openPod', podRight).click(function() {
        $(this).hide();
        podRight.animate({
            left: offsetRight
        }, 1000);
        podLeft.css({ overflow: podLeft.find('.kitchenprice').length ? 'visible' : 'hidden' }).animate({
            left: offsetLeft
        }, 1000);
    });
}

function animate(left, pod) {
    var offset = 0;
    if (left) {
        offset = pod.offset().left;
        pod.animate({
            left: -pod.width() - 6
        }, 1000, function () {
            pod.css({ overflow: 'visible' });
            $('img.openPod', pod).show()
        });

        $('img.openPod', pod).unbind().click(function() {
            $(this).hide();
            pod.css({ overflow: 'hidden' });
            pod.animate({
                left: offset
            }, 1000);
        });
    } else {
        offset = pod.offset().left;
        pod.animate({
            left: (pod.offset().left) + ($(window).width() - pod.offset().left)
        }, 1000, function () {
        $('img.openPod', pod).show().click(function() {
                $(this).hide();
                pod.animate({
                    left: offset
                }, 1000);
            });
        });

        
    }
}

/* END Pods */

/* Overlays */

function addOverlays() {
    OverlayFav();
    OverlayTell();
    OverlayLang();
    OverlaySearch();
    OverlayDeleteFav();
}

function OverlayDeleteFav() {



    $('.delete').each(function () {
        var overlay = $(this).next();
        $(this).click(function () {
            overlay.fadeIn()
            return false;
        });
        $('.no', overlay).click(function () {
            overlay.fadeOut();
            return false;
        });
    });

    
}

function OverlaySearch() {
    var overlay = $('.dealersearch');
    var left = ($(window).width() - 800) / 2;
    var top = ($(window).height() - overlay.height()) / 2;

    overlay.css(
    {
        'left': left,
        'top': top
    });

    if (overlay.hasClass('open')) {
        overlay.fadeIn();
        $('<div id="overlay">').css({
            'position': 'absolute',
            'top': 0,
            'left': 0,
            'width': $(window).width(),
            'height': $(window).height(),
            'background': '#000',
            'opacity': 0.5,
            'z-index': 99,
            'display': 'none'
        }).appendTo('body').fadeIn();
    }

    $('.closedealer').click(function () {
        overlay.fadeOut();
        overlay.removeClass('open');
        $('#overlay').fadeOut(function () {
            $(this).remove();
        });
    });
}

function OverlayTell() {
    var overlay = $('.tellOverlay');
    var left = ($(window).width() - 530) / 2;
    var top = ($(window).height() - 410) / 2;

    overlay.css(
    {
        'left': left,
        'top': top
    });

    if (overlay.hasClass('open')) {
        overlay.css('display', 'block');
        $('<div id="overlay">').css({
            'position': 'absolute',
            'top': 0,
            'left': 0,
            'width': $(window).width(),
            'height': $(window).height(),
            'background': '#000',
            'opacity': 0.5,
            'z-index': 99,
            'display': 'none'
        }).appendTo('body').css('display', 'block');
    }

    $('.tellIcon').click(function () {
        overlay.css('display', 'block');
        $('<div id="overlay">').css({
            'position': 'absolute',
            'top': 0,
            'left': 0,
            'width': $(window).width(),
            'height': $(window).height(),
            'background': '#000',
            'opacity': 0.5,
            'z-index': 99,
            'display': 'none'
        }).appendTo('body').css('display', 'block');
        return false;
    });

    $('.closeTellOverlay').click(function () {
        overlay.css('display', 'none');
        $('.error', overlay).remove();
        overlay.removeClass('open');
        $('#overlay').remove();
    });
}

function OverlayFav() {
    var overlay = $('.favOverlay');
    var left = ($(window).width() - 530) / 2;
    var top = ($(window).height() - 410) / 2;

    overlay.css(
    {
        'left': left,
        'top': top
    });

    if (overlay.hasClass('open')) {
        overlay.css('display', 'block');
        $('<div id="overlay">').css({
            'position': 'absolute',
            'top': 0,
            'left': 0,
            'width': $(window).width(),
            'height': $(window).height(),
            'background': '#000',
            'opacity': 0.5,
            'z-index': 99,
            'display': 'none'
        }).appendTo('body').css('display', 'block');
        overlay.find('.scroll-pane-overlay').setSliderOverlay();
    }
                

    var loadImgs = 0;
    $('img', overlay).each(function () {
        var img = new Image();
        var soc = $(this).attr('src');
        $(img).load(function () {
            loadImgs++;
        }).attr('src', soc);
    });
    var intVal = window.setInterval(function () {
        if (loadImgs == $("img", overlay).length) {
            window.clearInterval(intVal);
            
        }
    });

    $('.favIcon').click(function () {
        overlay.css('display', 'block');
        $('<div id="overlay">').css({
            'position': 'absolute',
            'top': 0,
            'left': 0,
            'width': $(window).width(),
            'height': $(window).height(),
            'background': '#000',
            'opacity': 0.5,
            'z-index': 99,
            'display': 'none'
        }).appendTo('body').css('display', 'block');
        overlay.find('.scroll-pane-overlay').setSliderOverlay();
        return false;
    });

    $('.closeOverlay').click(function () {
        $(this).parent().find('.slider-wrap').remove();
        $(this).parent().find('.scroll-content-overlay').css('top', '0px').unbind();
        overlay.css('display', 'none');
        $('#overlay').remove();
    });
}

function OverlayLang() {

    var overlay = $('.boxOverlay');
    var left = ($(window).width() - 530) / 2;
    var top = ($(window).height() - overlay.height()) / 2;

    $('.switch').click(function () {
        var url = $(this).attr('href');
        $('.left', overlay).slideUp(function () {
            $('.oView').slideDown();
        });
        $('.btnOK').click(function () {
            window.location.href = url;
            return false;
        });
        $('.btnAbort').click(function () {
            $('.oView').slideUp(function () {
                $('.left', overlay).slideDown();
            });
            return false;
        });
        return false;
    });

    overlay.css(
    {
        'left': left,
        'top': top
    });

    $('.lang').click(function () {
        overlay.css('display', 'block');
        $('<div id="overlay">').css({
            'position': 'absolute',
            'top': 0,
            'left': 0,
            'width': $(window).width(),
            'height': $(window).height(),
            'background': '#000',
            'opacity': 0.3,
            'z-index': 99,
            'display': 'none'
        }).appendTo('body').css('display', 'block');
        return false;
    });

    $('.closeBoxOverlay').click(function () {
        overlay.css('display', 'none');
        $('#overlay').remove();
    });
}

/* END Overlays */

/* Grundformen */

function setShapes() {
    var baseshape = $('div.baseshape');
    var ul = $('ul', baseshape);
    var li = $('li', ul);

    baseshape.css({ 'margin-top': ($('div.content').height() - 370) / 2 });
    $(window).resize(function () {
        baseshape.css({ 'margin-top': ($('div.content').height() - 370) / 2 });
    });

    li.each(function (index) {
        $(this).attr('class', index);
    });

    ul.css({ width: cloneLi(li, 510) }).show().rotate();
}

function cloneLi(li, width) {
    var width = li.length * width;
    if (width < $(window).width()) {
        li.clone().appendTo(li.parent());
    }
    
    return li.parent().find('li').length * 510;
}

/* END Grundformen */

/* Planungsvariante */
var designhtml = null;

function setModels() {
    var designmodel = $('div.designmodel');
    var ul = $('ul', designmodel);
    var li = $('li', ul);
    designhtml = ul.html();
    designmodel.css({ 'margin-top': ($('div.content').height() - 370) / 2 });
    $(window).resize(function () {
        designmodel.css({ 'margin-top': ($('div.content').height() - 370) / 2 });
    });

    li.each(function (index) {
        $(this).attr('class', index);
    });

    ul.css({ width: cloneLi(li, 480) }).show().rotate({ direction: 'left', width: 480, switchimage: false, overlay: 'designOverlay' });

    initLengthSlider();
    initWidthSlider();
}

function initLengthSlider() {
    var lengthslider = $('.lengthSlider');
    lengthslider.slider('destroy');
    lengthslider.lengthSlider();
    $('.pluslength').unbind();
    $('.minuslength').unbind();
    $('.pluslength').click(function () {
        var slideValue = lengthslider.slider("value");
        lengthslider.slider("value", (slideValue + 0.1));
        $('div.designmodel').loadModels({ value: parseFloat(slideValue) });
    });
    $('.minuslength').click(function () {
        var slideValue = lengthslider.slider("value");
        lengthslider.slider("value", (slideValue - 0.1));
        $('div.designmodel').loadModels({ value: parseFloat(slideValue) });
    });
}

$.fn.lengthSlider = function () {
    $(this).slider({
        orientation: 'horizontal',
        min: 3,
        max: 7,
        value: 7,
        step: 0.1,
        slide: function (event, ui) {
            var slideValue = ui.value + "";
            if (slideValue.indexOf(".") != -1) {
                slideValue += '0';
            } else {
                slideValue += '.00';
            }
            if (slideValue == "6.80") {
                $('.ui-slider-handle', $(this)).css('margin-left', '-6px');
            } else if (slideValue == "3.20") {
                $('.ui-slider-handle', $(this)).css('margin-left', '0px');
            }
            $('.lengthValue').html(slideValue);


        }, change: function (event, ui) {
            var slideValue = ui.value + "";
            if (slideValue.indexOf(".") != -1) {
                slideValue += '0';
            } else {
                slideValue += '.00';
            }
            if (slideValue == "6.80") {
                $('.ui-slider-handle', $(this)).css('margin-left', '-6px');
            } else if (slideValue == "3.20") {
                $('.ui-slider-handle', $(this)).css('margin-left', '0px');
            }
            $('.lengthValue').html(slideValue);
        }, stop: function (event, ui) {
            var slideValue = ui.value + "";
            if (slideValue.indexOf(".") != -1) {
                slideValue += '0';
            } else {
                slideValue += '.00';
            }

            $('div.designmodel').loadModels({ value: parseFloat(slideValue) });
        }
    });
}

function initWidthSlider() {
    var widthslider = $('.widthSlider');
    widthslider.slider('destroy');
    widthslider.widthSlider();
    $('.pluswidth').unbind();
    $('.minuswidth').unbind();
    $('.pluswidth').click(function () {
        var slideValue = widthslider.slider("value");
        widthslider.slider("value", (slideValue + 0.1));
        $('div.designmodel').loadModels({ value: parseFloat(slideValue), length: false });
    });
    $('.minuswidth').click(function () {
        var slideValue = widthslider.slider("value");
        widthslider.slider("value", (slideValue - 0.1));
        $('div.designmodel').loadModels({ value: parseFloat(slideValue), length: false });
    });
}

$.fn.widthSlider = function () {
    $(this).slider({
        orientation: 'horizontal',
        min: 3,
        max: 7,
        value: 7,
        step: 0.1,
        slide: function (event, ui) {
            var slideValue = ui.value + "";
            if (slideValue.indexOf(".") != -1) {
                slideValue += '0';
            } else {
                slideValue += '.00';
            }
            if (slideValue == "6.80") {
                $('.ui-slider-handle', $(this)).css('margin-left', '-6px');
            } else if (slideValue == "3.20") {
                $('.ui-slider-handle', $(this)).css('margin-left', '0px');
            }
            $('.widthValue').html(slideValue);
        }, change: function (event, ui) {
            var slideValue = ui.value + "";
            if (slideValue.indexOf(".") != -1) {
                slideValue += '0';
            } else {
                slideValue += '.00';
            }
            if (slideValue == "6.80") {
                $('.ui-slider-handle', $(this)).css('margin-left', '-6px');
            } else if (slideValue == "3.20") {
                $('.ui-slider-handle', $(this)).css('margin-left', '0px');
            }
            $('.widthValue').html(slideValue);
        }, stop: function (event, ui) {
            var slideValue = ui.value + "";
            if (slideValue.indexOf(".") != -1) {
                slideValue += '0';
            } else {
                slideValue += '.00';
            }

            $('div.designmodel').loadModels({ value: parseFloat(slideValue), length: false });
        }
    });
}


$.fn.loadModels = function(options) {
    options = $.extend({
        value: 3.00,
        length: true
    }, options);
    var model = $(this);
    var ul = $('ul', $(this));

    ul.fadeOut(function() {
        ul.html(designhtml);
        if (options.length == true) {
            $('li', ul).each(function() {
                var lengthHF = $('input:first', $(this));
                var designLength = parseFloat(lengthHF.val());
                var designWidth = parseFloat(lengthHF.next().val());

                var currentWidth = parseFloat($('.widthValue').html());
                if (designLength > options.value || designWidth > currentWidth) {
                    $(this).remove();
                }
            });
        } else {
            $('li', ul).each(function() {
            var lengthHF = $('input:first', $(this));
            var designLength = parseFloat(lengthHF.val());
            var designWidth = parseFloat(lengthHF.next().val());
                var currentLength = parseFloat($('.lengthValue').html());
                if (designWidth > options.value || designLength > currentLength) {
                    $(this).remove();
                }
            });
        }

        clearInterval(interval);
        if ($('li', ul).length * 480 < $(window).width()) {
            $('li', ul).clone().appendTo(ul);
        }

        var width = $('li', ul).length * 480;

        $('li', ul).each(function(index) {
            $(this).attr('class', index);
        });

        setTimeout(function() {
            ul.css({ width: width, left: 0 }).fadeIn(function() {
                ul.rotate({ direction: 'left', width: 480, switchimage: false, overlay: 'designOverlay' });
            });
        }, 1000);

    });



}

/* END Planungsvariante */

/* Farben, Ausstattung */

function setColors() {
    var colors = $('ul.colors');
    $('li', colors).each(function () {
        $(this).colorHover();
    });

    var worktop = $('ul.worktop');
    $('li', worktop).each(function() {
        $(this).colorHover();
    });
    
}

function setHotSpots() {
    $('div.hotspot').each(function () {
        var hotspot = $(this);
        $('img:first', hotspot).click(function () {
            $(this).next().show();
        });

        $('.closeHotSpotOverlayBig', hotspot).click(function () {
            $(this).parent().hide();
        });

        $('.closeHotSpotOverlaySmall', hotspot).click(function () {
            $(this).parent().hide();
        });

        $('.galleryPrev', hotspot).click(function () {
            $('.slideshow', hotspot).slideBack();
        });

        $('.galleryNext', hotspot).click(function () {
            $('.slideshow', hotspot).slideNext();
        });
    }); 
}

$.fn.slideNext = function () {
    var active = $('.active', $(this));
    if (active.length == 0) active = $('img:last', $(this));
    var next = active.next().length ? active.next() : $('img:first', $(this));
    active.addClass('last-active');
    next.css({ opacity: 0.0, display: 'block' })
    .addClass('active')
    .animate({ opacity: 1.0 }, 500, function () {
        active.removeClass('active last-active').css({ display: 'none' });
    });
}

$.fn.slideBack = function () {
    var active = $('.active', $(this));
    if (active.length == 0) active = $('img:first', $(this));
    var next = active.prev().length ? active.prev() : $('img:last', $(this));
    active.addClass('last-active');
    next.css({ opacity: 0.0, display: 'block' })
        .addClass('active')
        .animate({ opacity: 1.0 }, 500, function () {
            active.removeClass('active last-active').css({ display: 'none' });
        });
}

$.fn.colorHover = function () {
    $(this).mouseenter(function (e) {
        var background = $('img', $(this)).attr('src');
        var name = $('img', $(this)).attr('alt');

        $('<div class="colorOverlay"></div>').css({
            background: 'url(' + background + ')',
            top: e.pageY - 164,
            left: e.pageX + 334 > $(window).width() ? e.pageX - 314 : e.pageX + 20
        }).html('<span>' + name + '</span>')
        .appendTo('.bg');
    });

    $(this).mousemove(function (e) {
        $('div.colorOverlay').css({
            top: e.pageY - 164,
            left: e.pageX + 334 > $(window).width() ? e.pageX - 314 : e.pageX + 20
        });
    });

    $(this).mouseleave(function () {
        $('div.colorOverlay').remove();
    });
}

/* END Farben */

/* Bilderkarussel */
var interval = null;
$.fn.rotate = function(options) {
    options = $.extend({
        direction: 'left',
        width: 510,
        switchimage: true,
        overlay: 'shapeOverlay'
    }, options);

    var ul = $(this);
    var li = $('li', $(this));
    ul.unbind();
    li.unbind();
    clearInterval(interval);
    if (options.direction == 'left' && li.length) {
        interval = setInterval(function() {
            var first = $('li:first', ul);
            var last = $('li:last', ul);
            var lastleft = last.offset().left;
            var width = options.width;
            var firstleft = first.offset().left;

            if ((lastleft + width) <= $(window).width() && firstleft + width <= 0) {
                if (!first.hasClass(last.attr('class'))) {
                    first.clone().appendTo(ul);
                    ul.css({
                        'left': (ul.offset().left + width)
                    });
                    first.remove();
                } else {
                    first.next().clone().appendTo(ul);
                    ul.css({
                        'left': (ul.offset().left + width),
                        'width': ul.width()
                    });
                    first.remove();
                }
            } else if ((lastleft + width) <= $(window).width()) {
                if (!first.hasClass(last.attr('class'))) {
                    first.clone().appendTo(ul);
                    ul.css({
                        'width': ul.width() + width
                    });
                } else {
                    first.next().clone().appendTo(ul);
                    ul.css({
                        'width': ul.width() + width
                    });
                }
            }
            ul.css({ left: ul.offset().left - 1 });
        }, 20);
    } else if (options.direction == 'right' && li.length){
        interval = setInterval(function() {
            var first = $('li:first', ul);
            var last = $('li:last', ul);
            var lastleft = last.offset().left;
            var width = options.width;
            var firstleft = first.offset().left;
            if (firstleft >= 0 && lastleft >= $(window).width()) {
                if (!last.hasClass(first.attr('class'))) {
                    last.clone().prependTo(ul);
                    ul.css({
                        'left': (ul.offset().left - width)
                    });
                    last.remove();
                } else {
                    last.prev().clone().prependTo(ul);
                    ul.css({
                        'left': (ul.offset().left - width)
                    });
                    last.remove();
                }
            } else if ((lastleft + width) >= $(window).width() && firstleft > 0) {
                if (!last.hasClass(first.attr('class'))) {
                    last.clone().prependTo(ul);
                    ul.css({
                        'left': (ul.offset().left - width),
                        'width': ul.width() + width
                    });
                } else {
                    last.prev().clone().prependTo(ul);
                    ul.css({
                        'left': (ul.offset().left - width),
                        'width': ul.width() + width
                    });
                }
            }
            ul.css({ left: ul.offset().left + 1 });
        }, 20);
    }

    li.mouseenter(function(e) {
        clearInterval(interval);
        var overlaywidth = $('div.' + options.overlay).width() + 20;
        if (options.switchimage == true) {
            var imgFirst = $(this).find('img:first');
            imgFirst.hide().next().show();
        }

        $('<div class="' + options.overlay + '"></div>').html(
                '<div class="' + options.overlay + 'Bg">' +
                $(this).find('p').html() +
                '</div>' +
                '<div class="' + options.overlay + 'Bottom"></div>'
            ).css({
                top: e.pageY - 15,
                left: e.pageX + overlaywidth > $(window).width() ? e.pageX - overlaywidth : e.pageX + 20,
                display: 'block'
            }).appendTo('body');

    });

    li.mousemove(function(e) {
        clearInterval(interval);
        var overlaywidth = $('div.' + options.overlay).width() + 20;
        $('div.' + options.overlay).css({
            top: e.pageY - 15,
            left: e.pageX + overlaywidth > $(window).width() ? e.pageX - overlaywidth : e.pageX + 20,
            display: 'block'
        });
    });

    li.mouseleave(function() {
        clearInterval(interval);
        ul.rotate({ direction: options.direction, width: options.width, switchimage: options.switchimage, overlay: options.overlay });
        $('div.' + options.overlay).remove();
        if (options.switchimage == true) {
            var imgFirst = $(this).find('img:first').next();
            imgFirst.hide().prev().show();
        }
    });

    $('#btnNext').show().unbind().click(function() {
        clearInterval(interval);
        ul.animate({ left: ul.offset().left + 510 }, 500, function() {
            ul.rotate({ direction: 'right', width: options.width, switchimage: options.switchimage, overlay: options.overlay });
        });
    });

    $('#btnPrev').show().unbind().click(function() {
        clearInterval(interval);
        ul.animate({ left: ul.offset().left - 510 }, 500, function() {
            ul.rotate({ direction: 'left', width: options.width, switchimage: options.switchimage, overlay: options.overlay });
        });
    });
}

/* END Bilderkarussel */