﻿$('document').ready(function() {
    init_slider();
    init_thumbs();
    init_accordeon();
    check();  
    init_carousel();
    init_tabs();
    $('body').supersleight();
});
//einde pageready

function pageLoad() {
    fix_layout();
    init_validation(); 
    init_bullets();
    check();
    init_tooltip();
    soldOutOverlay();
}
// einde pageload

function init_validation() {
    /*** validatie ***/
    $('.validatie_pointer').each(function() {
            active = ($(this).css('display'));
            if (active == "inline") { $(this).parents('p.row').find('.textbox').addClass('error'); }
        });    
        $('input').blur(function() {
            $('.validatie-pointer:hidden').parents('p.row').find('.textbox').removeClass('error');
            $('.validatie-pointer:visible').parents('p.row').find('.textbox').addClass('error');
            $(this).removeClass('has-focus');
        });
        $('input').focus(function() {
            $('.validatie-pointer:hidden').parents('p.row').find('.textbox').removeClass('error');
            $('.validatie-pointer:visible').parents('p.row').find('.textbox').addClass('error');
            $(this).addClass('has-focus');
        });
        $('.do-validate').click(function() {
            $('.validatie-pointer:hidden').parents('p.row').find('.textbox').removeClass('error');
            $('.validatie-pointer:visible').parents('p.row').find('.textbox').addClass('error');
            setTimeout(check, 100);
        });
}

function check() {
    $('.validatie-pointer:hidden').parents('p.row').find('.textbox').removeClass('error');
    $('.validatie-pointer:visible').parents('p.row').find('.textbox').addClass('error');
    if ($('.textbox').hasClass('error')) { $('.errorlist').show(); }
    //is er een inhoud in een errorlist laat deze dan ook zien
    if ($('.errorlist ul').length != 0) { 
        $(this).parents('.errorlist').show(); 
        $('.popup-home, .popup').center();
       }
}

function init_tooltip() {
    $('.log-out').hover(
      function () {
        var text = $(this).html();
        var pos = $(this).offset();
        $('form').after('<div class="tooltip" style="display:none;left:'+pos.left+'px;top:'+pos.top+'px">'+text+'</div>');
        $('.tooltip').fadeIn();
      },
      function () {
         $('.tooltip').remove();
      });
}


function init_bullets() {
   //zet verplichte bullets aan
    $('[rel="required"]').each(function() {
        //breedte van de textbox
        width = $(this).css('width');
        //linkpadding van de .row
        padding = $(this).css('left');

        //de 'px' eraf halen
        width = width.replace("px", ""); 
        padding = padding.replace("px", ""); 

        //positie van de 'required' bullet
        afstand = parseInt(width) + parseInt(padding) + 12;

        //de required bullet goed neerzetten
        $(this).after('<div class="required-bullet" style="left:' + afstand + 'px">&nbsp;</div>');
    });
}

function fix_layout() {
    //buttons 'mooi' maken
    $('.btn,.btn-grey,.btn-black').each(function() {
        $(this).append('<div class="btn-right">&nbsp;</div>');
    });
    
    
    //watermerk extender voor IE goedmaken
    $('.searchbar input').focus(function() {
        $(this).css({'color':'#000'});
    });
    $('.searchbar input').blur(function() {
        $(this).css({'color':'#999'});
    });    

}


 function soldOutOverlay() {
    $('.soldout').each(function() {
    $(this).append('<div class="soldout-overlay">&nbsp</div>');
    });
 }


function surfto(url) {
window.location = url;
}

function init_slider() {
    var start_value = $('#input-min-price input').val();
    var end_value = $('#input-max-price input').val();
    $("#slider-range").slider({
        range: true,
        min: 0,
        max: 150,
        values: [start_value, end_value],
        step: 30,
        stop: function(event, ui) {
            SliderCallback();
        },
        slide: function(event, ui) {
            $('#input-min-price input').val(ui.values[0]);
            $('#input-max-price input').val(ui.values[1]);
            $("#amounts").html(ui.values[0] + ' - ' + ui.values[1] + ' euro');
        }
    });
	    $('#input-min-price input').val($("#slider-range").slider("values", 0));
		$('#input-max-price input').val($("#slider-range").slider("values", 1));
		$("#amounts").html($("#slider-range").slider("values", 0) + ' - ' + $("#slider-range").slider("values", 1) + ' euro');
}



function reset_slider() {
    init_slider();
    SliderCallback();
}

/* accordeon */
function init_accordeon() {
    $('.acc-head').click(function() {
        $(this).next('.acc-body').slideToggle();
        $(this).toggleClass('active');
        $(this).blur();
    });
}






/**** detailpagina overlays ****/

function init_thumbs() {
    $('.thumb-container .thumb img').click(function() {
        $(this).blur();
        var mainImage = $(this).parents('.thumb').find('a').attr('href');
        var zoomImage = $(this).parents('.thumb').find('a').attr('zoom');
        $(this).parents('.thumb-container').find('.thumb.active').removeClass('active');
        $(this).parents('.thumb').addClass('active');
        
        $('.main-image').css('opacity', '0');
        $('.main-image').attr('src',mainImage);
        $('.main-image').load(function() { $('.main-image').css('opacity', '1');  });
        
        $('.icon-magnifie').attr('href',zoomImage);
        return false;
    });
    
    $('a.icon-magnifie').click(function() {
        startOverlay_image();       
        return false;
    });
    
    $('a.youtube').click(function() {
        startOverlay_youtube();  
        return false;
    });    
    



    //open demofilmpjes graden in popuyp

    $('.openflash').click(function() {
        var location = $(this).attr('href');
        $('#zoom-image-container').html('');
        $('#zoom-image-container').append('<div id="flashholder"></div>');
        $('#zoom-image-container.flashcontent #flashholder').html('<div class="noflash"><p>Om de demonstratie video te kunnen bekijken dient uw internetbrowser te beschikken over een recente versie van de Flash-plugin.<br/><a target="_blank" href="http://get.adobe.com/nl/flashplayer/">Download de gratis plugin</a>.</p></div>');
        startOverlay_demo(location);  
        return false;
    });  
    
    
    
    //open 360 graden in popuyp
    $('a.icon-360').click(function() {
        var location = $(this).attr('href');
        $('#zoom-image-container').html('');
        $('#zoom-image-container').addClass('flashcontent');
        $('#zoom-image-container').append('<div id="flashholder"></div>');
        $('#zoom-image-container.flashcontent #flashholder').html('<div class="noflash"><p>Om dit product in 360 graden te kunnen bekijken dient uw internetbrowser te beschikken over een recente versie van de Flash-plugin.<br/><a target="_blank" href="http://get.adobe.com/nl/flashplayer/">Download de gratis plugin</a>.</p></div>');
        swfobject.embedSWF(location, "flashholder", "400", "312", "9");     
        startOverlay_360();  
        return false;
    });  
}


function startOverlay_image() {
        //start lightbox
        $('form').after("<div id=\"overlay\">&nbsp;</div>");
        $('#overlay').css('opacity', '0.5');
        $('#overlay').fadeIn(500, overlay_ingeladen_image);
        return false;
}

function overlay_ingeladen_image() {    
        $('#zoom-image-container').html('');
       var imageToZoom = $('a.icon-magnifie').attr('href');
       $('#overlay-content table tr td #zoom-image-container').append('<img id="zoom-image" />');
       $('#overlay-content table tr td #zoom-image-container img#zoom-image').attr('src',imageToZoom);
       
       enableNextPrev(imageToZoom);
       
       $('#overlay').click(close_overlay);
       $('#overlay-content .close').click(function() {close_overlay();});
       
        $('#overlay-content img#zoom-image').load(function() {             
            $('#overlay-content').center();
            $('#overlay-content').css({'z-index':'4000'})
            $('#overlay-content').show();
        });
}

function enableNextPrev(imageToZoom) {   
   $('.prev-zoom, .next-zoom').hide();
   //welke buttons laten zien
   
   //vorig plaatje bestaat
   if ($('.thumb-container .thumb a[zoom="'+imageToZoom+'"]').parents('.thumb').prev('.thumb').length > 0) {
      var prevImage = $('.thumb-container .thumb').find('a[zoom="'+imageToZoom+'"]').parents('.thumb').prev('.thumb').find('a[zoom]').attr('zoom');    
      $('.prev-zoom').attr('href','javascript:ZoomButtonClick("'+prevImage+'")');
      $('.prev-zoom').show();
   }

   //volgende plaatje bestaat
   if ($('.thumb-container .thumb a[zoom="'+imageToZoom+'"]').parents('.thumb').next('.thumb').length > 0) {
       var nextImage = $('.thumb-container .thumb').find('a[zoom="'+imageToZoom+'"]').parents('.thumb').next('.thumb').find('a[zoom]').attr('zoom');
       $('.next-zoom').attr('href','javascript:$(this).blur();ZoomButtonClick("'+nextImage+'")');
       $('.next-zoom').show();
    }
}

function ZoomButtonClick(image) {
        $('#overlay-content table tr td #zoom-image-container img#zoom-image').attr('src',image);
         $('#overlay-content table tr td #zoom-image-container img#zoom-image').load(function() {
            enableNextPrev(image);  
         });
}





function startOverlay_youtube() {
        //start lightbox
        $('form').after("<div id=\"overlay\">&nbsp;</div>");
        $('#overlay').css('opacity', '0.5');
        $('#overlay').fadeIn(500, overlay_ingeladen_youtube);
        return false;
}

function overlay_ingeladen_youtube() {
        var youtubeContent = $('#youtube').html();
        $('#overlay-youtube-content table td #youtubeContent').html('<div>'+youtubeContent+'</div>');
        $('#overlay-youtube-content').center();
        $('#overlay-youtube-content').css({'z-index':'4000'})
        $('#overlay-youtube-content').show();
        $('#overlay').click(close_overlay_youtube);
        $('#overlay-youtube-content .close').click(function() {close_overlay_youtube();});
}



function startOverlay_div(element) {
        //start lightbox
        $('form').after("<div id=\"overlay\">&nbsp;</div>");
        $('#overlay').css('opacity', '0.5');
        $('#overlay').fadeIn(500, overlay_ingeladen(element));
        return false;
}

function overlay_ingeladen(element) {
       $('#overlay').click(close_overlay);
       $('#'+element+' .close').click(function() {close_overlay();});
       $('#'+ element).center();
       $('#'+ element).css({'z-index':'4000'})
       $('#'+ element).show();
}


function startOverlay_360() {
        $('.prev-zoom, .next-zoom').hide();
        //start lightbox
        $('form').after("<div id=\"overlay\">&nbsp;</div>");
        $('#overlay').css('opacity', '0.5');
        $('#overlay').fadeIn(500, overlay_ingeladen_360);
        
        return false;
}

function startOverlay_demo(location) {
        $('.prev-zoom, .next-zoom').hide();
        //start lightbox
        $('form').after("<div id=\"overlay\">&nbsp;</div>");
        $('#overlay').css('opacity', '0.5');
        $('#overlay').fadeIn(500, overlay_ingeladen_demo(location));
        return false;
}


function overlay_ingeladen_demo(location) {
       $('#overlay').click(close_overlay);
       $('#overlay-content .close').click(function() {close_overlay();});
       swfobject.embedSWF(location, "flashholder", "780", "460", "9"); 
       $('#overlay-content').center();
       $('#overlay-content').css({'z-index':'4000'})
       $('#overlay-content').show();
}

function overlay_ingeladen_360() {
       $('#overlay').click(close_overlay);
       $('#overlay-content .close').click(function() {close_overlay();});
       $('#overlay-content').center();
       $('#overlay-content').css({'z-index':'4000'})
       $('#overlay-content').show();
}

function close_overlay_youtube() {  $('#overlay-youtube-content #youtubeContent div').remove(); $('#overlay-youtube-content').hide();   overlay_gesloten(); }
function close_overlay() {  $('.popup, .popup-home').hide(); $('#overlay-content').hide(); $('#overlay-content img#zoom-image').remove();   $('#zoom-image-container').removeClass('flashcontent'); overlay_gesloten(); }

function overlay_gesloten() {
        $('#overlay').fadeOut(500);
        setTimeout("$('#overlay').remove()", 500);
}

$(window).resize(function() {
        centreer();
});

jQuery.fn.center = function() {
        this.css("position", "absolute");
        this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px");
        this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px");
        return this;
}

function centreer() {
        $('#overlay-content').center();
}


/**** einde detailpagina overlays***/


function init_carousel() {
 $(".carousel").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev",
        circular: true,
        speed: 300
    });
}




function init_tabs() {
    //startpositie bepalen
    if ($('.tabs').length > 0) {
        //er staan tabs op de pagina, zet voor elke instance de juiste tab op actief
        $('.tabs').each(function() {
            var welkeactive = '.'+$(this).find('ul.options li a.active').attr('rel');
            $(this).find(welkeactive).css({'left':'0', 'position':'relative'});
        });
    }
    $('.tabs ul.options a').click(function() {
        if ($(this).attr('rel') != '') {
            //klikje op tab, zorg dat alles goedkomt =)
            $(this).parents('ul.options').find('a.active').removeClass('active');
            $(this).addClass('active');
            var welkeactive = '.' + $(this).attr('rel')
            $(this).blur();
            $(this).parents('.tabs').find('.tab-content').css({'left':'-9999999px', 'position':'absolute'});
            $(this).parents('.tabs').find(welkeactive).css({'left':'0', 'position':'relative'});
        }
    });
}


