/** 
 * fading animatie van smallcontrols uitgeschakeld, zie hootsmans-projects-old-05-11-08.js
 * aangepast bs 20081106
 * positie en breedte prevbig en nextbig op basis van breedte huidige slide, zie ook jquery.cycle.lite-hootsmans.js
 * sluiten van bigslides ook bij klikken buiten de grote afbeeldingen
 */
    $(document).ready(function () {

       //$("#content").bind('click', function(){ return false});


        ///// kleine afbeeldingen activeren, gebruikt jcarousellite_1.0.1-hootsmans.js
        $("#slides").jCarouselLite({
            btnNext: "#next",
            btnPrev: "#prev",
            visible: 4,
            speed: 800
        }); // end slides jCarouselLite


        ///// controls voor de kleine afbeeldingen

        $("#slides ul li").mouseover(function(){
            //$(this).attr("class","highlight");
            $(this).addClass("highlight");
            
            $("#slidesinfo").html($(this).find(".meta").html());
        }); // end slides mouseover
        
    
        function slidemouseout() {
            $(this).attr("class","");
            $("#slidesinfo").html('');
        }

        $("#slides ul li").mouseout(slidemouseout);

        $("#slides ul li img").click(function(event){
            projecturl = $(this).attr("id");
            $("#slides ul li").unbind('mouseout');
            $(".controlsmall").fadeOut(500);
            updatebigslides(projecturl);
        }); // end slides a click


        //// controls voor de grote afbeeldingen

        function closebigslideshow() {
            //alert('closebigslideshow');
            $("body").unbind('click');
            $(".highlight").attr("class","");
            $("#slidesinfo").empty();
            $("#slides ul li").mouseout(slidemouseout);
            $(".itemsbig").fadeOut(500);
            $("#slidescover").fadeOut(500);
            $(".controlsmall").fadeIn(500);
        }


        $("#nextbig").bind("mouseenter",function(){
            $("#nextbig img").fadeIn(500);
        }); // end nextbig mouseenter

        $("#nextbig").bind("mouseleave",function(){
            $("#nextbig img").fadeOut(500);
        }); // end nextbig mouseleave

        $("#nextbig").click(function(){
        
            //alert($("#bigslides div img").attr("style"));
            //setbignavwidths();
        
            updatecounter(1);
        }); // end nextbig click


        $("#prevbig").bind("mouseenter",function(){
            $("#prevbig img").fadeIn(500);
        }); // end prevbig mouseenter
    
        $("#prevbig").bind("mouseleave",function(){
            $("#prevbig img").fadeOut(500);
        }); // end prevbig mouseleave
    
        $("#prevbig").click(function(){
            updatecounter(-1);
        }); // end prevbig click


        $("#closebig").bind("mouseenter",function(){
            $("#closebig img").fadeIn(500);
        }); // end prev mouseenter
    
        $("#closebig").bind("mouseleave",function(){
            $("#closebig img").fadeOut(500);
        }); // end prev mouseleave

        $("#closebig").click(function(){
        
            closebigslideshow();

        }); // end closebig click


        //// teller bijhouden bij het klikken door de grote afbeeldingen
        function updatecounter(amount) {
            currentbigslide = currentbigslide + amount;
            if(currentbigslide<1) {
                currentbigslide = totalslides;
            }
            if(currentbigslide>totalslides) {
                currentbigslide = 1;
            }
            $("#currentslide").text(currentbigslide);
        }; // end updatecounter



        //// grote afbeeldingen van een project laden met ajax, daarna teller goedzetten en grote afbeeldingen tonen
        var totalslides = 1;

        function updatebigslides(projecturl) {
            $.ajax({
              //url: "/static/global/mytest.json",
              url: "/projecten/" + projecturl,
              dataType: "json",
              cache: false,
              //error: function(XMLHttpRequest, textStatus, errorThrown){ alert("errors: " + "XMLHttpRequest:" + XMLHttpRequest + "textStatus: " + textStatus + "errorThrown: " + errorThrown); },
              success: function(data){
                  $("#bigslidesinfo").empty().html("<h3>" + data.titel + "</h3>");
                  $("#info").empty();
                  $("<dl>").appendTo("#info");

                  $.each(data.eigenschappen, function(key, value) {
                    $("<dt>").html(key).appendTo("#info dl");
                    $("<dd>").html(value).appendTo("#info dl");
                  });

                  $("#bigslides").empty();

                  $.each(data.afbeeldingen, function(i,afbeelding){
                  $("<div></div>").attr("class", "loading").appendTo("#bigslides");
                  });

                  // projectafbeeldingen laden
                  $("#bigslides div").each(function(index,el){
                          // new image object
                          var img = new Image();
                          // image onload
                          $(img).load(function () {
                          //$(this).css('display','none'); // set in global/css
                          $(el).removeClass('loading').append(this);
                          $(this).fadeIn();
                          $(this).bind('click', function(){ return false;});
                          // bigcontrols positioneren
                          if (index==0) {
                            newprevbigleft = 576 - img.width +'px';
                            newbigwidth = img.width/2-10+'px';
                            $("#prevbig").css({left:newprevbigleft,width:newbigwidth});
                            $("#nextbig").css({width:newbigwidth});
                          }; // end if
                          }).error(function () {
                              $(el).remove();
                          }).attr('src', data.afbeeldingen[index]); // end img load
                  }); // end bigslides div each



                // grote afbeeldingen activeren, gebruikt jquery.cycle.lite-hootsmans.js
                $('#bigslides').cycle({
                    prev:   '#prevbig',
                    next:   '#nextbig',
                    timeout: 0
                }); // end bigslides cycle
                
                // close aan click event body activeren
                $("body").bind('click', function(){ closebigslideshow();});

                // teller goedzetten en grote afbeeldingen tonen
                totalslides = $("#bigslides div").length;
                
                // afvangen nextbig en prevbig tekenen
                $("#nextbig").show(); 
                $("#prevbig").show();
                if (totalslides<2) { 
                    $("#nextbig").hide(); 
                    $("#prevbig").hide();
                };
                
                $("#totalslides").text(totalslides);
                currentbigslide = 1;
                $("#currentslide").text(currentbigslide);

                $("#slidescover").css({opacity: 0});
                $("#slidescover").show();
                $("#slidescover").animate({ opacity: 0.8 }, 500 );

                $(".itemsbig").fadeIn(500);


                ///// user interaction blokkeren vanwege animatie controls
                jQuery.blockUI({ 
                    message: null, 
                    overlayCSS: { backgroundColor: '#FFF', opacity: '0.0', cursor: 'progress' },
                    baseZ: 3000
                    }); 

                $(".blockUI").bind('click', function(){ return false;});

                // navigatie grote afbeeldingen even laten zien
                setTimeout('$(".controlbig").fadeIn(500);', 500); 
                setTimeout('$(".controlbig").fadeOut(1000);', 2500); 

                ///// user interaction vrijgeven
                setTimeout(jQuery.unblockUI, 2500);
                  

              } // end success
            }); // end ajax
        }; // end updatebigslides
        
    }); // end document ready