jQuery(document).ready(function($){

$(window).load(function(e){
        var columnW = 210;
        var primaryW = Math.floor( $(window).width() / columnW ) * columnW;
        $("#outer").css({width: primaryW});
    });
    
    
$(window).resize(function(){
        var columnW = 210;
        var primaryW = Math.floor( $(window).width() / columnW ) * columnW;
        $("#outer").css({width: primaryW});
    });

 

$(document).ready(function(){
	$(".article-over").stop().animate({"filter": "alpha(opacity=0)"}, "500"); // setzt die roten flächen für ie auf transparent

$(".article").hover(
	function() {
		$(this).children("div.article-over").stop().animate({"opacity": "0.8"}, "500");
	},
	function() {
		$(this).children("div.article-over").stop().animate({"opacity": "0"}, "500");
	});
});


$(document).ready(function(){
	$(".nav-over").stop().animate({"filter": "alpha(opacity=0)"}, "500"); // setzt die roten flächen für ie auf transparent

$(".next-nav").hover(
	function() {
		$(this).children("div.nav-over").stop().animate({"opacity": "1"}, "500");
	},
	function() {
		$(this).children("div.nav-over").stop().animate({"opacity": "0"}, "500");
	});
$(".prev-nav").hover(
	function() {
		$(this).children("div.nav-over").stop().animate({"opacity": "1"}, "500");
	},
	function() {
		$(this).children("div.nav-over").stop().animate({"opacity": "0"}, "500");
	});
});


var
  speed = 1000,  // animation speed
 $wall = $('#content').find('.mcol');

$wall.masonry({
  columnWidth: 210, 
  // only apply masonry layout to visible elements
  itemSelector: '.article:not(.invis)',
  animate: true,
  animationOptions: {
    duration: speed,
    queue: false
  }
});


$('#filter .mcol2 a').click(function(){
  var colorClass = '.' + $(this).attr('class');

if(colorClass=='.all') {
    // show all hidden boxes
    $wall.children('.invis')
      .toggleClass('invis').fadeIn(speed);
  } else {  
    // hide visible boxes 
    $wall.children().not(colorClass).not('.invis')
      .toggleClass('invis').fadeOut(speed);
    // show hidden boxes
    $wall.children(colorClass+'.invis')
      .toggleClass('invis').fadeIn(speed);
  }
  $wall.masonry();

  return false;
});


/*
Floating Sidebar DIV
*/

$(function () {
  $("div.singleside").stickySidebar({
      timer: 400, 
      easing: "easeOutBack"
  });
});

$(function () {
  $("div.prev-nav").stickySidebar({
      timer: 400, 
      easing: "easeOutBack"
  });
});

$(function () {
  $("div.next-nav").stickySidebar({
      timer: 400, 
      easing: "easeOutBack"
  });
});

/*
Tooltip
*/

//Select all anchor tag with rel set to tooltip
    $('a[rel=tooltip]').mouseover(function(e) {
         
        //Grab the title attribute's value and assign it to a variable
        var tip = $(this).attr('title');    
         
        //Remove the title attribute's to avoid the native tooltip from the browser
        $(this).attr('title','');
         
        //Append the tooltip template and its value
        $(this).append('<div id="tooltip"><div class="tipHeader"></div><div class="tipBody">' + tip + '</div><div class="tipFooter"></div></div>');     
         
        //Set the X and Y axis of the tooltip
        $('#tooltip').css('top', e.pageY + 10 );
        $('#tooltip').css('left', e.pageX + 20 );
         
        //Show the tooltip with faceIn effect
        $('#tooltip').fadeIn('500');
        $('#tooltip').fadeTo('10',0.8);
         
    }).mousemove(function(e) {
     
        //Keep changing the X and Y axis for the tooltip, thus, the tooltip move along with the mouse
        $('#tooltip').css('top', e.pageY + 10 );
        $('#tooltip').css('left', e.pageX + 20 );
         
    }).mouseout(function() {
     
        //Put back the title attribute's value
        $(this).attr('title',$('.tipBody').html());
     
        //Remove the appended tooltip template
        $(this).children('div#tooltip').remove();
         
    });
	
});