$(document).ready(function(){
$('#container').isotope({ filter: '.news' });
$('#filters').vmenu();
$('#smenu, #smenu2').activeMenu();

    $('#filters a').click(function(){
  var selector = $(this).attr('data-option-value');
  $('#container').isotope({ filter: selector });
  $(this).blur(); 
  return false;
});

$("a#galerie1").click(function() {
		$.fancybox([
			'http://www.studio-magellan.com/galeries-little-dancer/images/large/1.jpg',
			'http://www.studio-magellan.com/galeries-little-dancer/images/large/2.jpg',
			'http://www.studio-magellan.com/galeries-little-dancer/images/large/3.jpg',
			{
				'href'	: '',
				'title'	: 'Little Dancer'
			}
		], {
			'padding'			: 0,
			'transitionIn'		: 'none',
			'transitionOut'		: 'none',
			'type'              : 'image',
			'changeFade'        : 0
		});
	});

  $('a#obscur').click(function () {
      $('.headerfull, .block, .block h2, .block h1, #mybox').css("background-color","#010101");
      $('body, .header').css("background-color","#353030");
      $('.news h2').css("background-image", "url(../images/new3.png)");
      $('.separator, .mail').css("background-color","transparent");
      $('body, #contactsm, li a, .header, a.more_link, .headerfull, .block h2, .block h1, .contact, .mail').css("color","#ffffff");
      $('a.more_link:hover').css("background-color","#353030");
      $('a.more_link:hover').css("color","#010101");
      $('body').css("background-image", "url(../images/line_obscur.png)");
      $('#logo').css("background-image", "url(../images/logo_260_noir.jpg)");
      
          $('a#contactsm').mouseenter(function () {
              $('div.contact').css("background-color","#A0A0A0");
              $('div.contact').css("color","#010101");
          });
          $('a#contactsm').mouseleave(function () {
              $('div.contact').css("background-color","transparent");
              $('div.contact').css("color","#ffffff");
          });
    });
  
  $('a#defaut').click(function () {
      $('body, .header, .headerfull, .block, .block h2, .block h1, #mybox, .separator, .mail').css("background-color","#ffffff");
      $('body').css("background-image", "url(../images/line.png)");
      $('.news h2').css("background-image", "url(../images/new.png)");
      $('#logo').css("background-image", "url(../images/logo_260.jpg)");
      $('body, li a, #contactsm, a.more_link, .header, .headerfull, .contact, .block h2, .block h1, .mail ').css("color","#010101"); 
  
          $('a#contactsm').mouseenter(function () {
              $('div.contact').css("background-color","#A0A0A0");
              $('div.contact').css("color","#010101");
          });
          $('a#contactsm').mouseleave(function () {
              $('div.contact').css("background-color","transparent");
              $('div.contact').css("color","#010101");
          });

  });


 $('a#contactsm').mouseenter(function () {
          $('div.contact').css("background-color","#A0A0A0");
          $('div.contact').css("color","#010101");
          });
          $('a#contactsm').mouseleave(function () {
          $('div.contact').css("background-color","transparent");
          $('div.contact').css("color","#010101");
          });



$("a#contactsm").fancybox({
				'width'				: 480,
				'height'			: 480,
        'padding'     : 0,
        'margin'      : 0,
        'overlayColor'     : '#FFFFFF',
				'autoScale'			: false,
				'transitionIn'		: 'elastic',
        'easingIn'		: 'swing',
				'transitionOut'		: 'elastic',        
        'easingOut'		: 'swing',
				'type'				: 'iframe',
        
			});
   
				var $GPContainer	= $('#container'),
					$articles		= $GPContainer.children('div.block'),
					totalArticles	= $articles.length,
					$fullview		= $('<div id="fullview" class="full-view-elements"></div>').prependTo( $('body') ),
					$overlay		= $('<div class="overlay"></div>').prependTo( $('body') ),
					GridPortfolio	= (function() {
						var animspeed				= 500,
							animeasing				= 'jswing', // try easeOutExpo
							current					= -1,
							animrun					= false,
							init 					= function() {
								initPlugins();
								initEventsHandler();
							},
							initPlugins				= function() {
								$articles.find('div.thumbs-wrapper').gpCarousel();
                $GPContainer.isotope({
        itemSelector : '.element',
         layoutMode : 'masonry'
      });
      var $optionSets = $('#options .option-set'),
          $optionLinks = $optionSets.find('a');
      $optionLinks.click(function(){
        var $this = $(this);
        $(this).blur(); 
        if ( $this.hasClass('selected') ) {
          return false;
        }
        var $optionSet = $this.parents('.option-set');
        $optionSet.find('.selected').removeClass('selected');
        $this.addClass('selected');
        var options = {},
            key = $optionSet.attr('data-option-key'),
            value = $this.attr('data-option-value');
        value = value === 'false' ? false : value;
        options[ key ] = value;
        if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
          changeLayoutMode( $this, options )
        } else {
          $GPContainer.isotope( options );
        }
        return false;
      });
							},
							initEventsHandler		= function() {
								$articles.each( function(i) {
									$(this).find('a.more_link').bind('click.GridPortfolio', function(e) {
										if( animrun ) return false;
										animrun			= true;
										var $article	= $(this).closest('div.block');
										current	= $article.index('.block');
										$('body').css( 'overflow', 'hidden' );
										var $intro		= $article.find('div.intro');
										$intro.addClass('intro-loading');
										$('<img/>').load(function() {
											$intro.removeClass('intro-loading');
											showArticle( $article, true );
											animrun	= false;
										}).attr('src', $article.data('bgimage'));
                    $(this).blur(); 
										return false;
									});
								});
								$('#fullview').find('span.full-nav-next').live('click.GridPortfolio', function(e) { $(this).blur(); 
									if( animrun ) return false;
									animrun	= true;
									if( current === totalArticles - 1 )
										current = 0
									else
										++current;
									$fullview.find('span.full-nav-current').html( current + 1 );
									showFullviewArticle();
								});
								$('#fullview').find('span.full-nav-prev').live('click.GridPortfolio', function(e) { $(this).blur(); 
									if( animrun ) return false;
									animrun	= true;
									if( current === 0 )
										current = totalArticles - 1
									else	
										--current;	
									$fullview.find('span.full-nav-current').html( current + 1 );
									showFullviewArticle();
								});
								$('#fullview').find('span.full-view-exit').live('click.GridPortfolio', function(e) { $(this).blur(); 
									var $article	= $articles.eq( current );
									hideArticle( $article );
								});
								$(window).bind('resize.GridPortfolio', function(e) {
									var $bgimage	= $fullview.find('img.bg-img');
									if( $bgimage.length )
										centerBgImage( $bgimage );
									$fullview.find('div.project-descr-full-wrapper').jScrollPane('reinitialise');
								});
							},
							showArticle				= function( $article, anim ) {
								var	$clone	= $article.clone().css({
									left	: $article.offset().left + 'px',
									top		: $article.offset().top + 'px',
									zIndex	: 1001,
									margin	: '0px',
									height	: $article.height() + 'px'
								}).attr( 'id', 'article-clone' );
								var $thumbsWrapper	= $clone.find('div.thumbs-wrapper');
								$clone.children().not($thumbsWrapper).remove();
								$clone.find('div.thumbs-nav').remove();
								var padding	= 20 + 20;
								$.fn.applyStyle = ( anim ) ? $.fn.animate : $.fn.css;
								var clonestyle 	= {
									width	: $(window).width() - padding + 'px',
									height	: $(window).height() - padding + 'px',
									left	: '0px',
									top		: $(window).scrollTop() + 'px'
								};
								$clone.appendTo( $('body') ).stop().applyStyle( clonestyle, $.extend( true, [], { duration : animspeed, easing : animeasing, complete : function() {
									$fullview.show()
									var articleFullviewData		= getArticleFullviewData($article);
									articleFullviewData.current	= current + 1;
									articleFullviewData.total	= totalArticles;
									var $fullview_content	= $('#fullviewTmpl').tmpl( articleFullviewData );
									$fullview_content.appendTo( $fullview );
									$fullview_content.find('div.thumbs-wrapper').gpCarousel({
										start	: $article.find('div.thumbs-wrapper').data('currentImage')
									});
                  
                  
                $("a#galerie1").fancybox({
				'width'				: 720,
				'height'			: 600,
				'autoScale'			: false,
				'transitionIn'		: 'none',
				'transitionOut'		: 'none',
				'type'				: 'iframe',
        
			});
      $("a#galerie1").click(function(){
      $(this).blur(); 
      hideArticle( $article );
      });
      
      
  
                  
		$("#mybox").draggable({ axis: "x", revert: true });
									$fullview_content.find('div.project-descr-full-wrapper').jScrollPane('destroy').jScrollPane({
										verticalDragMinHeight: 40,
										verticalDragMaxHeight: 40
									});
									centerBgImage( $fullview.find('img.bg-img') );
									$overlay.stop().css( 'opacity', 0 );
									$clone.fadeOut( 300, function() { $clone.remove(); } );
								}}));
								var thumbsstyle 	= {
									left	: $(window).width() - $thumbsWrapper.width() - 25 + 'px',  // 25 is the margin left / right of the fullview thumbs-wrapper
									top		: ($(window).height() / 2) - ($thumbsWrapper.height() / 2) - 22 + 'px' // 10 is the margin top / bottom of the fullview thumbs-wrapper
								};
								$thumbsWrapper.stop().applyStyle( thumbsstyle, $.extend( true, [], { duration : animspeed, easing : animeasing} ) );
								( anim ) ? $overlay.show().fadeTo( animspeed, 0.7, animeasing ) : $overlay.show().css( 'opacity', 0.7 );
							},
							hideArticle				= function( $article ) {
								showArticle( $article, false );
								$overlay.hide();
								var $clone			= $('#article-clone'),
									$thumbsWrapper	= $clone.find('div.thumbs-wrapper');
								$clone.hide().fadeIn( 200, function() {
									$fullview.empty();
									$(this).animate({
										left	: $article.offset().left + 'px',
										top		: $article.offset().top + 'px',
										width	: $article.width() + 'px',
										height	: $article.height() + 'px'
									}, animspeed, animeasing, function() {
										$clone.remove();
										$('body').css( 'overflow', 'visible' );
									});
									$thumbsWrapper.animate({
										left	: '0px',
										top		: '0px'
									}, animspeed, animeasing);
									$overlay.show().fadeTo( animspeed, 0, animeasing, function() { $overlay.hide() } );
								});
							},
							getArticleFullviewData	= function( $article ) {
								return {
									bgimage			: '<img src="' + $article.data('bgimage') + '" class="bg-img"></img>',
									title 			: $article.find('h2.title').text(),
									thumbs			: $article.find('div.thumbs').html(),
									subline			: $article.find('p.subline').text(),
									description		: $article.find('div.project-descr').html()
								}
							},
							showFullviewArticle		= function() {
								var $article					= $articles.eq( current ),
									articleFullviewData			= getArticleFullviewData($article),
									$loading					= $fullview.find('span.loading-small'),
									$fullviewImage				= $fullview.find('img.bg-img'),
									$fullviewTitle				= $fullview.find('h2.title'),
									$fullviewSubline			= $fullview.find('p.subline'),
									$fullviewDescriptionWrapper	= $fullview.find('div.project-descr-full-wrapper'),
									$fullviewDescription		= $fullviewDescriptionWrapper.find('div.project-descr-full-content'),
									$fullviewProjectDescrFull	= $fullview.find('div.project-descr-full'),
									$fullviewThumbsWrapper		= $fullviewProjectDescrFull.find('div.thumbs-wrapper'),
									$newFullviewThumbsWrapper	= $('<div class="thumbs-wrapper"><div class="thumbs">' + articleFullviewData.thumbs + '</div></div>');
								$loading.show();
								$( articleFullviewData.bgimage ).load(function() {
									$loading.hide();
									var $bgImage	= $(this);
									$bgImage.insertBefore( $fullviewImage );
									centerBgImage( $bgImage );
									$fullviewImage.remove(); 
									$fullviewTitle.html( articleFullviewData.title );
									$fullviewSubline.html( articleFullviewData.subline );
									$fullviewDescriptionWrapper.jScrollPane('destroy');
									$fullviewDescription.html( articleFullviewData.description );
									$fullviewDescriptionWrapper.jScrollPane('destroy').jScrollPane({
										verticalDragMinHeight: 40,
										verticalDragMaxHeight: 40
									});
									$fullviewThumbsWrapper.remove();
									$fullviewProjectDescrFull.prepend( $newFullviewThumbsWrapper );	
									$newFullviewThumbsWrapper.gpCarousel();
									animrun	= false;
								}).attr('src', $article.data('bgimage'));
							},
							centerBgImage			= function( $img ) {
								var dim	= getImageDim($img);
								$img.css({
									width	: dim.width + 'px',
									height	: dim.height + 'px',
									left	: dim.left + 'px',
									top		: dim.top + 'px'
								});
							},
							getImageDim				= function($i) {
								var $img     = new Image();
								$img.src     = $i.attr('src');
								var w_w	= $(window).width(),
								w_h	= $(window).height(),
								r_w	= w_h / w_w,
								i_w	= $img.width,
								i_h	= $img.height,
								r_i	= i_h / i_w,
								new_w,new_h,
								new_left,new_top;
								if(r_w > r_i){new_h	= w_h;new_w	= w_h / r_i;}
								else{new_h	= w_w * r_i;new_w	= w_w;}
								return {width	: new_w,height	: new_h,left	: (w_w - new_w) / 2,top		: (w_h - new_h) / 2								};
							};
						return { init	: init };
					})()
				GridPortfolio.init();
			});