$(function() {
  //$.ajaxSetup({cache:false}); // Only debug
  
  //$.easing.def = "easeOutCubic";

  //$('#twitter_div').hover(
	//	function() {
      $('#twitter_wrapper').jScrollPane();
	//	}, function() {
	//	  $('#twitter_wrapper').jScrollPaneRemove();
	//	}
	//);

  // old ie fix
  $('.mainarea:empty').css('height', 0);
  // Default mouse on empty links
  $('a[href=""]').css('cursor', 'default');

  $('.mainmenu > a, .reference > a, #home > a').hover(
		function() {
      $('> .blockoverlay', this).stop().fadeTo('fast', 0.9);
      $('> .blockoverlay p', this).stop().fadeTo('fast', 1);
		}, function() {
		  $('> .blockoverlay', this).stop().fadeTo('slow', 0);
		  $('> .blockoverlay p', this).stop().fadeTo('slow', 0);
		}
	);

  for (var h = 152; h < 1824; h += 152)
    $('#home > a').prepend('<span style="background-position:0px ' + h + 'px"></span>');
  $('#home > a').hover(slideLogo, defaultLogo);

  $('.reference > a, .mainmenu > a, #impressum > a, #home > a').click(function() {
    return openMainArea($(this).parent().attr('id'));
  });

  $(window).bind('hashchange', toggleHash);

  if (location.hash.length > 0 && location.hash != '#home')
    toggleHash();
  //else
  //location.hash = 'home';
  //closeMainArea();  
});

function slideLogo() {
  $('#home span:first').stop().css('opacity', 0).appendTo('#home > a').fadeTo('slow', 1, slideLogo);
}

function defaultLogo() {
  $('#home span').stop();
  $('#home .blockcontent').stop().css('opacity', 0).appendTo('#home > a').fadeTo('slow', 1);
}

function openMainArea(id) {
  if (id == "")
    return false;
  if (location.hash == '#' + id)
    closeMainArea();
  else
    location.hash = id;
  return false;
}

function closeMainArea() {
  location.hash = "home";
}

function toggleHash() {
  var hash = location.hash;
  if (hash == '#')
    hash = '#home';
  //if (hash.length > 0) {
  var id = $(hash).attr('id');
  var dest = $(hash).attr('dest');
  var src = $(hash).attr('src');
  if (src == null)
    src = id;
  toggleMainArea(id, '#' + dest, '#' + src);
  return false;
  //}
}

function toggleMainArea(content, mainArea, source) {
  if ($(mainArea + ' .blockcontent').hasClass(content)) {
    hideMainArea(mainArea);
    return;
  }
  var openMainAreas = $('.mainarea .blockcontent');
  if ($(openMainAreas).length > 0)    
    hideMainArea('.mainarea', function() {
      loadMainArea(content, mainArea, source);
    });
  else
    loadMainArea(content, mainArea, source);
}

function loadMainArea(content, mainArea, source) {
  $(mainArea).css('opacity', '0').hide().empty().height('auto');
  if (content != 'home')
    $(mainArea).append('<a class="close" href="" onclick="closeMainArea(\'' + mainArea + '\'); return false;"></a>');
  $(mainArea).append('<div class="blockcontent ' + content + '"></div>');
  $(source).append('<div class="loading"></div>');
  $('.loading', source).fadeTo('slow', 1);
  var title = "screenflavor Kommunikationsdesign";
  if (content != "home") {
    var display = content.replace('_logo', '-Logo');
		if (display.substr(0, 4) == "ref_")
		  display = display.substr(4) + " - Referenz";
		title = display.charAt(0).toUpperCase() + display.substr(1) + " - " + title;
  }
  document.title = title;
  $(mainArea + ' .blockcontent').load('./includes/' + content + '.inc.html', function() {
    var firstImage = $('img:first', this);
    if (firstImage.length) {
      var image = new Image();
      image.src = firstImage.attr('src');
      if (image.complete)
        imageLoaded(content, mainArea, source);
      else
        addListener(image, 'load', function() { imageLoaded(content, mainArea, source); });
    }
    else
      imageLoaded(content, mainArea, source);
  });
}

function imageLoaded(content, mainArea, source) {
  $('.loading', source).remove();
  if (location.hash == '#' + content)
    showMainArea(mainArea, source);
}

function addListener(element, type, expression, bubbling) {
  bubbling = bubbling || false;
  if (window.addEventListener) { // Standard
    element.addEventListener(type, expression, bubbling);
    return true;
  } else if (window.attachEvent) { // IE
    element.attachEvent('on' + type, expression);
    return true;
  }
  return false;
}

function showMainArea(mainArea, source) {
  //var h = $(mainArea + ' .blockcontent').height();
  $(mainArea).animate({
    opacity: 1,
    height: 'toggle'
  }, 500, function() {
    initSlider(this);
    $('html, body').animate({ scrollTop: $(source).offset().top }, 500);
  });
  /*
  $(mainArea).fadeSliderToggle({ callback:
    function() {
      initSlider(this);
      $('html, body').animate({ scrollTop: $(source).offset().top }, 500);
    }
  });
  */
}

function hideMainArea(mainArea, callback) {
  $(mainArea + ' .blockcontent').parent().animate({
    opacity: 0,
    height: 'toggle'
  }, 500, function() {
    $(this).empty();
    if (callback)
      callback();
  });
  /*
  $(mainArea + ' .blockcontent').parent().fadeSliderToggle({
    callback: function() {
      $(this).empty();
      if (callback)
        callback();
    }
  });
  */
}

function initSlider(source) {
  $('.featureGroupSlider', source).each(function() {
    var featureGroupSlider = $(this);
    featureGroupSlider.bxSlider({
      //mode: 'fade',
      //auto: true,
      infiniteLoop: false,
      hideControlOnEnd: true
    });
    $('.featureGroup', this).each(function() {
      var featureGroup = $(this);
      var featureSlider = $('.featureSlider', featureGroup).bxSlider({
        mode: 'fade',
        controls: false,
        captions: false,
        infiniteLoop: false,
        auto: false
      });
      var accordion = $('.featureList', featureGroup).accordion({
        autoHeight: false,
        navigation: false,
        collapsible: false,
        changestart: function(event, ui) {
          $('.featureDot', featureGroup).removeClass("featureDotSelected");
          $('.featureDot[slideid="' + ui.options.active + '"]', featureGroup).addClass("featureDotSelected");
          featureSlider.fadeIn().goToSlide(ui.options.active);
        }
      });
      //$('.featureDot', featureGroup).click(function() {
      //  accordion.activate($(this).attr('slideid'));
      //});
    });
  });
  
  $('.slider', source).each(function() {
    //$('> li > img', this).addClass('puzzle').puzzle();
    $(this).bxSlider({
      //mode: 'fade',
      //auto: true,
      infiniteLoop: false,
      hideControlOnEnd: true
    });
  });
}

$.fn.addFeatureGroup = function(header, imageUrl) {
  var number = $('> li', this).length;
  $(this).append(
    '<li id="featureGroup' + number + '" class="featureGroup">' +
			'<div class="featureSelection"><h1>' + header + '</h1><div class="featureList"></div></div>' +
			'<div class="featureContent"><img src="' + imageUrl + '" />' +
			  '<div class="featureDots"></div><ul class="featureSlider"></ul>' +
			'</div><div class="clearboth"></div>' +
		'</li>');
  return $('> li:last', this);
}

$.fn.addFeature = function(header, text, dotLeft, dotTop, imageUrl, imageWidth, imageLeft, imageTop) {
  var number = $('.featureDots > div', this).length;
  $('.featureList', this).append('<h3><a href="#">' + header + '</a></h3>');
  var displayText = (number > 0) ? ' style="display:none"' : '';
  if (text != '')
    text = '<p>' + text + '</p>';
  $('.featureList', this).append(
    '<div' + displayText + '>' + text + '</div>');
  var dotSelected = (number > 0) ? '' : ' featureDotSelected';
  $('.featureDots', this).append(
    '<div slideid="' + number + '" class="featureDot' + dotSelected + '" style="margin:' + dotTop + 'px 0px 0px ' + dotLeft + 'px;" />');
  $('.featureSlider', this).append(
    '<li><div style="margin:' + imageTop + 'px 0px 0px ' + imageLeft + 'px;">' +
		  '<img src="' + imageUrl + '" width="' + imageWidth + '" title="' + header + '" />' +
	  '</div></li>');
}