jQuery(document).ready(function() {
  if ($("#content").hasClass('scrollable') && ($("#content_wide").get(0).offsetWidth - $("#content").width()) > 0) {   
//    $("#scrollbutton").css({'display': 'block'});
    $("#scrollbar").css({'cursor': 'pointer'});
    scrollbar_intent = 10;
    scrollbar_max = $("#border_bottom").width() - 2*scrollbar_intent - $("#scrollbutton").width();
    scrollbar_wheelsteps = 30;
    get_mousemove = function(offsetX) {
      return function(e) {
        $("#content").stop(true);
        scrollbar_val = Math.min(Math.max(0, e.pageX - offsetX - scrollbar_intent - 
                            $("#border_bottom").offset().left), 
                            scrollbar_max)
        $("#scrollbutton").css('left', scrollbar_val + scrollbar_intent);
        $("#content").get(0).scrollLeft = ($("#content_wide").get(0).offsetWidth - $("#content").width()) / 
                                          scrollbar_max * scrollbar_val;
        return false;
      };
    };
    $("#scrollbutton").mousedown(function(e) {
      $("#scrollbar").addClass('scrolling');
      $().mousemove(get_mousemove(e.pageX - $(this).offset().left));
      return false;
    });
    $().mouseup(function(e) {
      $("#scrollbar").removeClass('scrolling');
      $().unbind('mousemove');
    });
    remote_scroll = function(e, delta) {
      $("#content").stop(true, true);
      $("#content").get(0).scrollLeft -= delta * scrollbar_wheelsteps;
      scrollbar_val = scrollbar_max * $("#content").get(0).scrollLeft / 
                      ($("#content_wide").get(0).offsetWidth - $("#content").width());
      $("#scrollbutton").css('left', scrollbar_val + scrollbar_intent);
      return false;
    }
    $("#content").mousewheel(remote_scroll);
    $("#scrollbar").mousewheel(remote_scroll);
    remote_scroll(0, 0);
    $("#scrollbar").mousedown(function(e) {
      $("#scrollbar").addClass('scrolling');
      scrollbar_val = Math.min(Math.max(0, e.pageX - scrollbar_intent - 
                              ($("#scrollbutton").width()/2) -$("#border_bottom").offset().left), 
                          scrollbar_max);
      $("#scrollbutton").css('left', scrollbar_val + scrollbar_intent);
      $("#content").scrollTo({left: ($("#content_wide").get(0).offsetWidth - $("#content").width()) / 
                                        scrollbar_max * scrollbar_val, top: 0}, 500);
      $().mousemove(get_mousemove($("#scrollbutton").width()/2));
      return false;
    });
    setTimeout(function(){
      scrollbutton_top = $("#scrollbutton").css('top');
      scrollbutton_left = $("#scrollbutton").css('left');
      scrollbutton_width = $("#scrollbutton").css('width');
      scrollbutton_height = $("#scrollbutton").css('height');
      $("#scrollbutton").css({'width': '0px', 'height': '0px', 'display': 'block', 
                              'left': parseInt(scrollbutton_left) + parseInt(scrollbutton_width)/2,
                              'top': parseInt(scrollbutton_top) + parseInt(scrollbutton_height)/2,
                              'background-color': $("#border_bottom").css('background-color')});
      $("#scrollbutton").animate({'left': parseInt(scrollbutton_left)-5, 'top': parseInt(scrollbutton_top)-8, 
                                  'width': parseInt(scrollbutton_width)+11, 'height': parseInt(scrollbutton_height)+17}, 300, function() {
        $("#scrollbutton").css('background-color', '');
        $("#scrollbutton").animate({'left': scrollbutton_left, 'top': scrollbutton_top, 
                                    'width': scrollbutton_width, 'height': scrollbutton_height}, 300);                                
      });
    }, 1000);
  }
  else {
    $("#content").removeClass('scrollable');
  }
});

function start_animation() {
  jQuery(document).ready(function() {
    $("#second_col").append('<img id="anim_logo1" src="fileadmin/templates/anim_logo1.jpg" style="display: none; width: 249px; height: 36px;" />' +
                            '<img id="anim_logo2" src="fileadmin/templates/anim_logo2.jpg" style="display: none; width: 169px; height: 42px;" />');
    $("#anim_logo1").load(function() {
      $("#anim_logo2").load(function() {
        $("#anim_logo1, #anim_logo2").css({'position': 'absolute'});
        $("#anim_logo1").css({'top': '210px', 'left': '110px'});
        $("#anim_logo2").css({'top': '255px', 'left': '380px'});

        $("#second_col").append('<div id="anim_border1" /><div id="anim_border2" />');
        $("#anim_border1, #anim_border2").css({'display': 'none', 'width': '0px', 'height': '0px', 
                                               'background-color': '#cc0033', 'position': 'absolute'});
        $("#anim_border1").css({'top': '250px', 'left': '370px'});
        $("#anim_border2").css({'top': '250px', 'left': '310px'});
        $("#anim_border1").fadeIn(1900).animate({'width': '1px'}, 600).animate({'top': '240px', 'height': '20px'}, 1100).fadeOut(200);
        $("#anim_border2").fadeIn(700).animate({'height': '1px'}, 700).animate({'left': '300px', 'width': '60px'}, 700).animate({'left': '350px', 'width': '70px'}, 1500).fadeOut(200);
        //$("#anim_border2").fadeIn(700).animate({'height': '1px'}, 400).animate({'left': '320px', 'width': '100px'}, 2500).fadeOut(300);
       
        $("#first_col, #content, #bottomnav").hide();
        $("#scrollbar").css({'position': 'static'});            
       
        $("#border_bottom").hide();
        $("#border_top, #border_left, #border_bottom").css({'position': 'absolute'});
        $("#border_top").css({'top': '250px', 'left': '345px', 'width': '0px'});
        $("#border_left").css({'top': '226px', 'left': '370px', 'height': '0px'});
        
        $("#border_top").animate({'top': '250px', 'left': '100px', 'width': '410px'}, 4000, function() {
          $("#border_bottom").css({'top': '250px', 'left': '80px', 'width': '420px', 'display': 'block'});
        });

        $("#anim_logo1").fadeIn(3000).fadeOut(1500);
        $("#anim_logo2").fadeIn(3000).fadeOut(1500);
        
        $("#border_left").animate({'top': '200px', 'left': '370px', 'height': '51px'}, 4000, function() {
          $("#anim_border1, #anim_border2").stop(true, true);
          $("#anim_border1, #anim_border2").css({'display': 'none'});
          $("#border_bottom").animate({'top': '651px', 'left': '0px', 'width': '900px'}, 1000);
          $("#border_top").animate({'top': '50px', 'left': '0px', 'width': '900px'}, 1000);
          $("#border_left").animate({'top': '50px', 'left': '0px', 'height': '550px'}, 1000, function() {
            $("#border_top, #border_left, #border_bottom").css({'position': 'relative', 'top': '0px', 'left': '0px'});
            $("#scrollbar").css({'position': 'relative'});       
            $("#first_col, #content, #bottomnav").fadeIn(1000);
          });
        });
      });
    });
  });
}