$(function(){

	$('a').click(function() {
			  this.blur();
		});

 var speed = 150,   // animation speed
        $wall = $('#output').find('.wrap'),

        masonryOptions = {         // initial masonry options
          columnWidth: 100, 
          itemSelector: '.box:not(.invis)',
          animate: true,
          animationOptions: {
            duration: speed,
            queue: false
          }
        }
      ;

      // run on window.load so we can capture any incoming hashes
      $(window).load(function(){
        // run masonry on start-up to capture all the boxes we'll need
        $wall.masonry(masonryOptions);
        if ( window.location.hash ) {
          // get rid of the '#' from the hash
          var possibleFilterClass = window.location.hash.replace('#', '');
          switch (possibleFilterClass) {
          // if the hash matches the following words
          case 'red' : case 'gray' : case 'black' : 
            // set masonry options animate to false
            masonryOptions.animate = false;
            // hide boxes that don't match the filter class
            $wall.children().not('.'+possibleFilterClass)
              .toggleClass('invis').hide();
            // run masonry again, this time with the necessary stuff hidden
            $wall.masonry(masonryOptions);
            break;
          }
        }

      });

      $('#filtering-nav a').click(function(){
        var color = $(this).attr('class'), filterClass = '.' + color;
        
		var idcolor=$(this).attr('id');
		$('#header').css("background-color",idcolor);

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

        }
        $wall.masonry({ animate: true });
        // set hash in URL
        window.location.hash = color;
        return false;
      });
	  


		$(".box").click(function() {
			
			var boxID = $(this).attr('id'); 
			
			if (boxID!="") {
			
				$.ajax({
							  type: "POST",
							  url: "ajax/__getbox.php",
							  data: "boxID="+escape(boxID),
							  success: function(msg){
									
									if (msg!="") {
									
																		
										$.fancybox(
										msg,
										{
											'autoDimensions'	: true,
											'width'         		: 650,
											'height'        		: '75%',
											'overlayColor'		: '#000',
											'overlayOpacity'	: 0.7,
											'transitionIn'	: 'elastic',
											'transitionOut'	: 'elastic'
											
											
										}
										);
									}
									
						}
					  
					});
			
			}
		
			
		});
		
		

	 

});