$(document).ready(function () {

      if($(window).height()<700) { $('html').addClass('lowScreen'); }
      
      var scrollSpeed = 1500;
      var currentDirection = 1;
      // fill the imgCurrent with the width from umbraco as this jquery does not always work in chrome
      var imgCurrent = $("div.scrollable").find("img:not(.cloned)").eq(0);
      var showLength = $("div.scrollable").find("img:not(.cloned)").length;
      
      var imgContainer = $("div.scrollable");
      var imgWidth = imgCurrent.width();

      // nico: workaround to fix the issue that imgWidth is sometimes filled with 0, take the width from umbraco
      if (imgWidth == 0) 
      {
        if (firstImageWidth)
          imgWidth = firstImageWidth;
        else
          imgWidth = 1200; // hmmm, asume 1200
      }
      var imgMarginLeft = Math.floor((imgContainer.width()-imgWidth));
      imgContainer.css({ "margin-left" : imgMarginLeft},500);
      
     
      $("#scrollableContainer").
        append($("<a />").addClass("prev").attr("href","#").html("&nbsp;")).
        append($("<a />").addClass("next").attr("href","#").html("&nbsp;"));  

      $(".prev").click(
        function () { currentDirection = -1; return false; });
      $(".next").click(
        function () { currentDirection = 1; return false; });

      if(Modernizr.touch) {
        $.getScript('/scripts/jquery.jswipe-0.1.2.js', function() {
        
          $('.scrollable img').swipe({
             swipeLeft: function() { $(".next").trigger("click") ; return false;},
             swipeRight: function() { $(".prev").trigger("click") ; return false;},
             threshold: { x: 90, y: 40 }         
          })
        });
      }
      
      
      $("div.scrollable").
        scrollable({
          clickable : false,
          prev : ".prev",
          loop : true,
          next : ".next",
          touch: false,
          speed : scrollSpeed,
          size: $("div.scrollable .items img").length-1,
          circular : true,
          onBeforeSeek : function( ) { 

            indexTmp = this.getIndex()+currentDirection+1;
            
            if(!(indexTmp==0 && currentDirection==-1)) { 
              
              if(indexTmp<0 && currentDirection==-1) { indexTmp = indexTmp + showLength+1;}
            
              imgCurrent = $("div.scrollable").find("img").eq(indexTmp);
              
              imgContainer = $("div.scrollable");
              imgWidth = imgCurrent.width();
              
              imgMarginLeft = Math.floor((imgContainer.width()-imgWidth)/2);

              imgContainer.animate({ "margin-left" : imgMarginLeft},scrollSpeed);
              
              currentDirection = 1;
            }

          }
      });

       
     var colHeight = $('#content').height();
     $(".col").each(function() {
        if(($(this).height())>colHeight) colHeight = $(this).height();
        $(".col").css({ "min-height" : colHeight+"px" });
      });
        
     $(".col").each(function() {
        if(($(this).height())>colHeight) colHeight = $(this).height();
        $(".col").css({ "min-height" : colHeight+"px" });
      });
      
    });