$(document).ready(function() {
  // create slider effects
  $('a.ajax_link').unbind("click").bind("click", initAjaxRequest);
  
  function afterAjaxLoad() {
    initSliderEffect();
    $('.scrollContainer li a').click(showImage);
  }
  
  function showImage() {
    /*var img_string = '<img src="' + this.href + '" alt="blablabla" />';
    $('.foto_preview').empty();
    $('.foto_preview').append(img_string);
    return false;*/
  }
  
  function initSliderEffect() {
	  var horizontal = true;
	  var $panels = $('.scrollContainer li');
	  var $container = $('.scrollContainer');
	  var $scroll = $('.scroll').css('overflow', 'hidden');
	  var scrollOptions = {
	    target: $scroll, // the element that has the overflow
	    
	    // can be a selector which will be relative to the target
	    items: $panels,
	    
	    navigation: '.navigation a',
	    
	    // selectors are NOT relative to document, i.e. make sure they're unique
	    prev: 'img.left', 
	    next: 'img.right',
	    
	    // allow the scroll effect to run both directions
	    axis: 'xy',
	    
	    //onAfter: trigger, // our final callback
	    
	    //offset: offset,
	    
	    // duration of the sliding effect
	    duration: 800,
	    
	    // easing - can be used with the easing plugin: 
	    // http://gsgd.co.uk/sandbox/jquery/easing/
	    easing: 'swing'
	  };
	  
	  if (horizontal) {
	    $panels.css({
	      'float' : 'left',
	      'position' : 'relative' // IE fix to ensure overflow is hidden
	    });
	    
	    // calculate a new width for the container (so it holds all panels)
	    // 32 is a sum of left and right margin (todo) 
	    $container.css('width', ($panels[0].offsetWidth + 32) * $panels.length);
	  }
	  
  
    $('.slider').serialScroll(scrollOptions);
    $.localScroll(scrollOptions);
  }
  
  function initAjaxRequest(event) {
    request_obj = parseRequest(this.href);
    if(!$('#modal_wrap').length){
      $('<div id="modal_wrap"><div id="modal_overlay"></div><div id="' + request_obj['params'].target + '"></div></div>').appendTo("body");
      $("#modal_overlay").css({'width': $(window).width(), 'height': $(document).height(), 'opacity': '0.7'});
    }
 //   setTargetStyles(request_obj['params'].target);
    beginRequest(request_obj);
    return false;
  }  
  
  function setTargetStyles(target) {
    $('#' + target).css({
      'position': 'absolute',
      'top': '0',
      'left': '0',
      'z-index': '90'
    });
  }
  
  function parseQuery (query) {
     var Params = new Object();
     if (! query) return Params; // return empty object
     var Pairs = query.split(/[;&]/);
     for (var i = 0; i < Pairs.length; i++ ) {
        var KeyVal = Pairs[i].split('=');
        if (! KeyVal || KeyVal.length != 2) continue;
        var key = unescape(KeyVal[0]);
        var val = unescape(KeyVal[1]);
        val = val.replace(/\+/g, ' ');
        Params[key] = val;
     }
     return Params;
  }
  
  function parseRequest(request_url) {
    var request_obj = new Object();
    if(!request_url) {
      return request_obj;            // return empty object
    }
    var action_data = request_url.split("?")[0].split("/");
    var queryString = request_url.split("?")[1];
    var params = parseQuery(queryString); 
    
    request_obj['controller'] = action_data[3];
    request_obj['action'] = action_data[4];
    request_obj['params'] = params;
    
    return request_obj;
  }
  
  function beginRequest(request_obj) {
    var load_url = '/' + request_obj.controller + '/' + request_obj.action;
    $('#' + request_obj['params'].target).prepend('<img class="loading" src="/images/loading.gif" />');
    $('#' + request_obj['params'].target).load(load_url, afterAjaxLoad);
    return false;
  }
  
});