//initialiseer
move = false;
sy = -325;
sx = -305;
mx = 0;
my = 0;

$(document).ready( function() {
  //fix png on background containers
  $( "#right-content, #header" ).pngfix();
  

  //leg de mouse positie vast
  $().mousemove(function(e){
     mx = e.pageX;
     my = e.pageY;
  }); 
  
  $('#content-container').corner();
  $('#right-bottom').corner();

  $('.scrollpane').jScrollPane();
  
  document.getElementById( 'container' ).style.backgroundPosition = sx + 'px ' + sy + 'px';
  
  //bond hover functions on container 
  $( '#container' ).hover( 
    function() {
      //start bewegen
      move = true;
      
      //eerst smooth naar de huidige mouse bewegen
      var x = Math.round( ( mx - $('#container').offset().left ) / 3 + sx );
      var y = Math.round( ( my - $('#container').offset().top ) / 3 + sy );
          
      $('#container').animate( 
       {backgroundPosition: '(' + x + 'px ' + y + 'px)' },
       150,
       function() { window.setTimeout( function() { moveBG() }, 10 ) }
      );
    },
    function() {
      //stop bewegen
      move = false;
      
      //herstel de achtergrond (smoothly) na een kleine timeout
      //om 'flikkeren' te voorkomen bij de rand van de container
      window.setTimeout( function() {
        if( !move ) { $('#container').animate( {backgroundPosition: '(-305px -325px)'} ); }
      }, 10 );
    }
  );
  
  //start de ticker
  $("ul#ticker01").liScroll({travelocity: 0.02}); 
});

function moveBG() {
  if( move ) {
    //corrigeer met container margin en center van background image
    var x = Math.round( ( mx - $('#container').offset().left ) / 3 + sx );
    var y = Math.round( ( my - $('#container').offset().top ) / 3 + sy );
    
    //verplaats de achtergrond
    $('#container').css({backgroundPosition: x + 'px ' + y + 'px'});       
    
    //en doe het nog een keer
    window.setTimeout( function() { moveBG() }, 10 );
  }
}

(function($) {
	$.extend($.fx.step,{
	  backgroundPosition: function(fx) {
      if (fx.state == 0 && typeof fx.end == 'string') {
          var start = $.curCSS(fx.elem,'backgroundPosition');
          start = toArray(start);
          fx.start = [start[0],start[2]];
          
          var end = toArray(fx.end);
          fx.end = [end[0],end[2]];
          fx.unit = [end[1],end[3]];
	    }
      var nowPosX = [];
      nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
      nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];           
      fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];
      
      function toArray(strg){
          strg = strg.replace(/left|top/g,'0px');
          strg = strg.replace(/right|bottom/g,'100%');
          strg = strg.replace(/(\d+)(\s|\)|$)/g,"$1px$2");
          var res = strg.match(/(-{0,1}\d+)(px|\%|em|pt)\s(-{0,1}\d+)(px|\%|em|pt)/);
          return [parseFloat(res[1]),res[2],parseFloat(res[3]),res[4]];
      }
    }
	});  
})(jQuery);

jQuery.fn.liScroll = function(settings) {
		settings = jQuery.extend({
		travelocity: 0.07
		}, settings);		
		return this.each(function(){
				var $strip = jQuery(this);
				$strip.addClass("ticker")
				var stripWidth = 0;
				
				var $tickercontainer = $('#ticker' );//$strip.parent().wrap("<div class='tickercontainer'></div>");								
				var containerWidth = $tickercontainer.width();
				
				var $mask = $strip.wrap( '<div class="mask"></div>' );
				
				//var containerWidth = $strip.parent().parent().width();	//a.k.a. 'mask' width 	
				
				$strip.find("li").each(function(i){
				  stripWidth += jQuery(this, i).width();
				});
				$strip.width(stripWidth);			
				var defTiming = stripWidth/settings.travelocity;
				var totalTravel = stripWidth+containerWidth;								
				function scrollnews(spazio, tempo){
				$strip.animate({left: '-='+ spazio}, tempo, "linear", function(){$strip.css("left", containerWidth); scrollnews(totalTravel, defTiming);});
				}
				scrollnews(totalTravel, defTiming);				
				$strip.hover(function(){
				jQuery(this).stop();
				},
				function(){
				var offset = jQuery(this).offset();
				var residualSpace = offset.left + stripWidth;
				var residualTime = residualSpace/settings.travelocity;
				scrollnews(residualSpace, residualTime);
				});			
		});	
};