$(document).ready(function(){
	$('.media').media({width: 700, height: 400, autoplay: true});
	$('.audio').media({width: 700, height: 24});

	$('.reflection img').click(function(e){
		e.preventDefault();
	});

	$('.interactable a').click(function(){
		if($(this).attr('href').match('#')){
			var width = $(window).width()*.893;
			var height = Math.min(width/1.8202502, $(window).height()-100);

			$($(this).attr('href')).css('width', width+'px');
			$($(this).attr('href')).css('height', height+'px');
			
			var top = (height-400)/2;
			var left = (width-700)/2;
			if(top < 0) top = 0;
			if(left < 0 ) left = 0;
			var aud_top = (height-24)/2;
			$('.media').css('padding-top', top);
			$('.media').css('padding-left', left);
			$('.audio').css('padding-top', aud_top);
			$('.audio').css('padding-left', left);


		};
	});
	
	function addVideoPadding(selector){
		
	}
	
	$('.interactable a').fancybox({
//		'width'		: '1100',
//		'height'	: '700',
//		'autoDimensions'	: false,
		'onClosed'	: function(){
			$('#comp_navi').html('');	
			$('.campaign_name').hide();
		},
		'onComplete'	: function(){
			$('#comp_navi_container').css('width', $('#fancybox-content').css('width'));
			$('#comp_navi_container').css('left', $('#fancybox-wrap').css('left'));
		},
		'padding'		: 0,
		'scrolling'		: 'no',
	});
	$('.interactable a[rel="gallery"]').fancybox({
		'transitionIn'		: 'none',
		'transitionOut'		: 'none',
		'titlePosition' 	: 'over',		
		'onClosed'	: function(){
			$('#comp_navi').html('');	
			$('.campaign_name').hide();
		},
		'onComplete'	: function(){
			$('#comp_navi_container').css('width', $('#fancybox-content').css('width'));
			$('#comp_navi_container').css('left', $('#fancybox-wrap').css('left'));
		},
		'padding'		: 0,		
		'scrolling'		: 'no',
	});

	$('.interactable a[rel="gallery2"]').fancybox({
		'transitionIn'		: 'none',
		'transitionOut'		: 'none',
		'titlePosition' 	: 'over',		
		'onClosed'	: function(){
			$('#comp_navi').html('');	
			$('.campaign_name').hide();
		},
		'onComplete'	: function(){
			$('#comp_navi_container').css('width', $('#fancybox-content').css('width'));
			$('#comp_navi_container').css('left', $('#fancybox-wrap').css('left'));
		},
		'padding'		: 0,
		'scrolling'		: 'no',
	});

	$('.interactable a[rel="twoswf"]').fancybox({
		'transitionIn'		: 'none',
		'transitionOut'		: 'none',
		'titlePosition' 	: 'over',		
		'onClosed'	: function(){
			$('#comp_navi').html('');	
			$('.campaign_name').hide();
		},
		'padding'		: 0,		
		'scrolling'		: 'no',
	});

	$('#mantra').innerfade({
		speed: 2000,
		timeout: 7000,
		type: 'sequence',
		containerheight: '287px'
	});
	
	$('#portfolio_filter li').click(function(){
		$('.portfolio_grid.orig').css('opacity', '.3');
		$('.portfolio_grid.orig').css('filter', 'progid:DXImageTransform.Microsoft.Alpha(Opacity=30)');
		$('.portfolio_grid.orig').css('-MS-filter', '"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"');
		
		if(!$(this).hasClass('current')){
			$('.overflow').show();
			$('.portfolio_grid.hidden').hide('slow');
			$(this).siblings().removeClass('current');
			$('.portfolio_grid.orig').show('slow');
		}
		
		$('.scrollWrapper').scrollLeft(0);
//		clearInterval($('.scrollWrapper').data('autoScrollInterval'));
//		$('.scrollWrapper').data('autoScrollInterval', null);
	});
	
	$('#filter_tv').click(function(){
		if(!$(this).hasClass('current')){
			$('.tv.overflow').hide('slow');
			$('.portfolio_grid.orig.tv').hide('slow');
			$('.hidden.tv').delay(400).fadeIn('slow');
			$('.tv.extra').delay(400).fadeIn('slow');
			$('#filter_tv').addClass('current');

		};
	});

	$('#filter_print').click(function(){
		if(!$(this).hasClass('current')){
			$('.print.overflow').hide('slow');
			$('.portfolio_grid.orig.print').hide('slow');
			$('.hidden.print').delay(400).fadeIn('slow');
			$('.print.extra').delay(400).fadeIn('slow');
			$('#filter_print').addClass('current');
		};
	});

	$('#filter_radio').click(function(){
		if(!$(this).hasClass('current')){
			$('.radio.overflow').hide('slow');
			$('.portfolio_grid.orig.radio').hide('slow');
			$('.hidden.radio').delay(400).fadeIn('slow');
			$('.radio.extra').delay(400).fadeIn('slow');
			$('#filter_radio').addClass('current');
		};
	});

	$('#filter_digital').click(function(){
		if(!$(this).hasClass('current')){
			$('.digital.overflow').hide('slow');
			$('.portfolio_grid.orig.digital').hide('slow');
			$('.hidden.digital').delay(400).fadeIn('slow');
			$('.digital.extra').delay(400).fadeIn('slow');
			$('#filter_digital').addClass('current');
		};
	});

	$('#filter_outofhome').click(function(){
		if(!$(this).hasClass('current')){
			$('.outofhome.overflow').hide('slow');
			$('.portfolio_grid.orig.outofhome').hide('slow');
			$('.hidden.outofhome').delay(400).fadeIn('slow');
			$('.outofhome.extra').delay(400).fadeIn('slow');
			$('#filter_outofhome').addClass('current');
		};
	});

	function generateCompNavi(campaignName){
	//	$('#comp_navi_container').css('width',$("#fancybox-content").css('width'));
		var urls_tv = [];
		var urls_print = [];
		var urls_radio = []
		var urls_digital = [];
		var urls_ooh = []

		var imgs_tv = [];
		var imgs_print = [];
		var imgs_radio = [];
		var imgs_digital = [];
		var imgs_ooh = [];

		var count_tv = 0;
		var count_print = 0;		
		var count_radio = 0;		
		var count_digital = 0;		
		var count_ooh = 0;

		var html = "";
		var temp = "";

		$('.interactable .'+campaignName+'.orig').each(function(){
			if($(this).hasClass('tv')){
				urls_tv[count_tv] = $(this).find('a').attr("href");
				imgs_tv[count_tv] = $(this).find('a').find('img').attr("src");				
				count_tv++;
			}else if($(this).hasClass('print')){
				urls_print[count_print] = $(this).find('a').attr("href");
				imgs_print[count_print] = $(this).find('a').find('img').attr("src");				
				count_print++;
			}else if($(this).hasClass('radio')){
				urls_radio[count_radio] = $(this).find('a').attr("href");
				imgs_radio[count_radio] = $(this).find('a').find('img').attr("src");				
				count_radio++;
			}else if($(this).hasClass('digital')){
				urls_digital[count_digital] = $(this).find('a').attr("href");
				imgs_digital[count_digital] = $(this).find('a').find('img').attr("src");				
				count_digital++;
			}else if($(this).hasClass('outofhome')){
				urls_ooh[count_ooh] = $(this).find('a').attr("href");
				imgs_ooh[count_ooh] = $(this).find('a').find('img').attr("src");				
				count_ooh++;
			}
		});

		if(urls_tv.length > 0){
			html += '<ul class=\"tv\">';
			for(var i=0; i<urls_tv.length; i++){
				html += "<li><a href=\""+urls_tv[i]+"\"><img src=\""+imgs_tv[i]+"\"/></a></li>";
			}
			html += '<label>tv:</label>';
			html += '</ul>';			
		}
		
		if(urls_print.length > 0){
			html += '<ul class=\"print\">';
			for(var i=0; i<urls_print.length; i++){
				html += "<li><a href=\""+urls_print[i]+"\"><img src=\""+imgs_print[i]+"\"/></a></li>";
			}
			html += '<label>print:</label>';
			html += '</ul>';
		}
		
		if(urls_radio.length > 0){
			html += '<ul class=\"radio\">';
			for(var i=0; i<urls_radio.length; i++){
				html += "<li><a href=\""+urls_radio[i]+"\"><img src=\""+imgs_radio[i]+"\"/></a></li>";
			}
	 		html += '<label>radio:</label>';
			html += '</ul>';
		}
		
		if(urls_digital.length > 0){
			html += '<ul class=\"digital\">';
			for(var i=0; i<urls_digital.length; i++){
				html += "<li><a href=\""+urls_digital[i]+"\"><img src=\""+imgs_digital[i]+"\"/></a></li>";
			}
			html += '<label>digital:</label>';
			html += '</ul>';
		}
		
		if(urls_ooh.length > 0){
			html += '<ul class=\"outofhome\">';
			for(var i=0; i<urls_ooh.length; i++){
				html += "<li><a href=\""+urls_ooh[i]+"\"><img src=\""+imgs_ooh[i]+"\"/></a></li>";
			}
			html += '<label>promo:</label>';
			html += '</ul>';
		}
			
		$('#comp_navi').html(html);	

		$('#comp_navi a[href='+$(this).attr("href")+']').addClass('active');


		$('#comp_navi a').click(function(){
			$('#comp_navi a').removeClass('active');
			$(this).addClass('active');
			
			
			if($(this).attr('href').match('#')){
				var width = $(window).width()*.893;
				var height = Math.min(width/1.8202502, $(window).height()-100);

				$($(this).attr('href')).css('width', width+'px');
				$($(this).attr('href')).css('height', height+'px');

				var top = (height-400)/2;
				var left = (width-700)/2;
				if(top < 0) top = 0;
				if(left < 0 ) left = 0;
				var aud_top = (height-24)/2;
				$('.media').css('padding-top', top);
				$('.media').css('padding-left', left);
				$('.audio').css('padding-top', aud_top);
				$('.audio').css('padding-left', left);
			};
		});

		$('#comp_navi a').fancybox({
			'onClosed'	: function(){
				$('#comp_navi').html('');	
				$('.campaign_name').hide();				
			},
			'transitionIn'	: 'none',
			'transitionOut'	: 'none',
			'padding'		: 0,
			'onComplete'	: function(){
				$('#comp_navi_container').css('width', $('#fancybox-content').css('width'));
				$('#comp_navi_container').css('left', $('#fancybox-wrap').css('left'));
			},
			'scrolling'		: 'no',

		});


		
	}

	$('.interactable a').click(function(){
		$('.campaign_name').hide();
	});

	$('.interactable .emergenc a').click(function(){
		generateCompNavi('emergenc');
		$('.emergenc.campaign_name').show();
	});
	
	$('.interactable .emergencS a').click(function(){
		generateCompNavi('emergencS');
		$('.emergencS.campaign_name').show();
	});
	
	$('.interactable .emergencV a').click(function(){
		generateCompNavi('emergencV');
		$('.emergencV.campaign_name').show();
	});

	$('.interactable .emergencO a').click(function(){
		generateCompNavi('emergencO');
		$('.emergencO.campaign_name').show();
	});

	$('.interactable .emergencD a').click(function(){
		generateCompNavi('emergencD');
		$('.emergencD.campaign_name').show();
	});
	
	$('.interactable .rembrant a').click(function(){
		generateCompNavi('rembrant');
		$('.rembrant.campaign_name').show();
	});
	
	$('.interactable .northlandDF a').click(function(){
		generateCompNavi('northlandDF');
		$('.northlandDF.campaign_name').show();
	});
	
	$('.interactable .lycomato a').click(function(){
		generateCompNavi('lycomato');
		$('.lycomato.campaign_name').show();
	});
	
	$('.interactable .bullfrog a').click(function(){
		generateCompNavi('bullfrog');
		$('.bullfrog.campaign_name').show();
	});
	
	$('.interactable .lucypeters a').click(function(){
		generateCompNavi('lucypeters');
		$('.lucypeters.campaign_name').show();		
	});
	
	$(window).load(function() {
		var x = Math.floor(Math.random()*24);
		$('#main_display .scrollableArea li:nth-child('+x+')').attr('id', 'startHere');
		
		$("#main_display #scrollableIndex").smoothDivScroll({ 
			autoScroll: "onstart" , 
			autoScrollDirection: "endlessloopright", 
			autoScrollStep: 1, 
			autoScrollInterval: 14,	
			visibleHotSpots: "onstart",
//			hotSpotsVisibleTime: "3",
			startAtElementId: "startHere"
		});
		
		$("#portfolio_display #scrollableIndex").smoothDivScroll({ 
//			autoScroll: "onstart" , 
//			autoScrollDirection: "endlessloopright", 
			autoScrollStep: 1, 
			autoScrollInterval: 14,	
			visibleHotSpots: "onstart",
			hotSpotsVisibleTime: "3",
		});
		
		$('#cover').fadeOut('slow');
	
	});
	
	if($(window).height() > 750){
		$('#main_display ul li').hover(function(){
			$('.boxcaption.threeline', this).stop().animate({top:'0px'},{queue:false,duration:160});
			$('.boxcaptionr.threeline', this).stop().animate({bottom:'50px'},{queue:false,duration:160});
			$('.white_overlay', this).stop().animate({top:'-72px'},{queue:false,duration:160});
			$('.prod_logo', this).stop().animate({top:'0px'},{queue:false,duration:160});
		}, function(){
			$('.boxcaption.threeline', this).stop().animate({top:'72px'},{queue:false,duration:160});	
			$('.boxcaptionr.threeline', this).stop().animate({bottom:'122px'},{queue:false,duration:160});	
			$('.white_overlay', this).stop().animate({top:'-360px'},{queue:false,duration:160});
			$('.prod_logo', this).stop().animate({top:'-288px'},{queue:false,duration:160});
		});
		$('#main_display ul li').hover(function(){
			$('.boxcaption.fourline', this).stop().animate({top:'-17px'},{queue:false,duration:160});
			$('.boxcaptionr.fourline', this).stop().animate({bottom:'33px'},{queue:false,duration:160});
			$('.white_overlay4', this).stop().animate({top:'-89px'},{queue:false,duration:160});
			$('.prod_logo4', this).stop().animate({top:'0px'},{queue:false,duration:160});
		}, function(){
			$('.boxcaption.fourline', this).stop().animate({top:'89px'},{queue:false,duration:160});	
			$('.boxcaptionr.fourline', this).stop().animate({bottom:'122px'},{queue:false,duration:160});	
			$('.white_overlay4', this).stop().animate({top:'-360px'},{queue:false,duration:160});
			$('.prod_logo4', this).stop().animate({top:'-288px'},{queue:false,duration:160});
		});
		
		$('.body_content').css('padding-top','240px');
		$('#portfolio_filter').css('top', '240px');
	}else{
		$('#main_display ul.scrollableArea').css('width', '7200px');
//		$('div.scrollingHotSpotLeft').css('height', '360px;');
//		$('div.scrollingHotSpotLeftVisible').css('height', '288px');
//		$('div.scrollingHotSpotRight').css('height', '360px');		
//		$('div.scrollingHotSpotRightVisible').css('height', '288px');
		
		$('.boxgrid img').css('width', '288px');

		$('.boxgrid').css('width', '288px');
		$('.boxgrid').css('height', '288px');
		$('.gridreflection').css('width', '288px');
		$('.gridreflection img').css('width', '288px');
		
		$('.fixed_w').css('width', '360px');
		
		$('#main_display ul li').hover(function(){
			$('.boxcaption.threeline', this).stop().animate({top:'-72px'},{queue:false,duration:160});
			$('.boxcaptionr.threeline', this).stop().animate({bottom:'50px'},{queue:false,duration:160});
			$('.white_overlay', this).stop().animate({top:'-144px'},{queue:false,duration:160});
			$('.prod_logo', this).stop().animate({top:'0px'},{queue:false,duration:160});
		}, function(){
			$('.boxcaption.threeline', this).stop().animate({top:'72px'},{queue:false,duration:160});	
			$('.boxcaptionr.threeline', this).stop().animate({bottom:'122px'},{queue:false,duration:160});	
			$('.white_overlay', this).stop().animate({top:'-360px'},{queue:false,duration:160});
			$('.prod_logo', this).stop().animate({top:'-288px'},{queue:false,duration:160});
		});

		$('#main_display ul li').hover(function(){
			$('.boxcaption.fourline', this).stop().animate({top:'-89px'},{queue:false,duration:160});
			$('.boxcaptionr.fourline', this).stop().animate({bottom:'33px'},{queue:false,duration:160});
			$('.white_overlay4', this).stop().animate({top:'-160px'},{queue:false,duration:160});
			$('.prod_logo4', this).stop().animate({top:'0px'},{queue:false,duration:160});
		}, function(){
			$('.boxcaption.fourline', this).stop().animate({top:'89px'},{queue:false,duration:160});	
			$('.boxcaptionr.fourline', this).stop().animate({bottom:'122px'},{queue:false,duration:160});	
			$('.white_overlay4', this).stop().animate({top:'-360px'},{queue:false,duration:160});
			$('.prod_logo4', this).stop().animate({top:'-288px'},{queue:false,duration:160});
		});
		
	}
	
	$(window).resize(function() {
	  	if($(window).height() > 750){
			$('#main_display ul.scrollableArea').css('width', '8940px');
//			$('div.scrollingHotSpotLeft').css('height', '480px');
//			$('div.scrollingHotSpotLeftVisible').css('height', '360px');
//			$('div.scrollingHotSpotRight').css('height', '480px');		
//			$('div.scrollingHotSpotRightVisible').css('height', '360px');
			
			$('.boxgrid img').css('width', '360px');
			$('.boxgrid').css('width', '360px');
			$('.boxgrid').css('height', '360px');
			$('.gridreflection').css('width', '360px');
			$('.gridreflection img').css('width', '360px');


			$('#main_display ul li').hover(function(){
				$('.boxcaption.threeline', this).stop().animate({top:'0px'},{queue:false,duration:160});
				$('.boxcaptionr.threeline', this).stop().animate({bottom:'50px'},{queue:false,duration:160});
				$('.white_overlay', this).stop().animate({top:'-72px'},{queue:false,duration:160});
				$('.prod_logo', this).stop().animate({top:'0px'},{queue:false,duration:160});
			}, function(){
				$('.boxcaption.threeline', this).stop().animate({top:'72px'},{queue:false,duration:160});	
				$('.boxcaptionr.threeline', this).stop().animate({bottom:'122px'},{queue:false,duration:160});	
				$('.white_overlay', this).stop().animate({top:'-360px'},{queue:false,duration:160});
				$('.prod_logo', this).stop().animate({top:'-288px'},{queue:false,duration:160});
			});

			$('#main_display ul li').hover(function(){
				$('.boxcaption.fourline', this).stop().animate({top:'-17px'},{queue:false,duration:160});
				$('.boxcaptionr.fourline', this).stop().animate({bottom:'33px'},{queue:false,duration:160});
				$('.white_overlay4', this).stop().animate({top:'-89px'},{queue:false,duration:160});
				$('.prod_logo4', this).stop().animate({top:'0px'},{queue:false,duration:160});
			}, function(){
				$('.boxcaption.fourline', this).stop().animate({top:'89px'},{queue:false,duration:160});	
				$('.boxcaptionr.fourline', this).stop().animate({bottom:'122px'},{queue:false,duration:160});	
				$('.white_overlay4', this).stop().animate({top:'-360px'},{queue:false,duration:160});
				$('.prod_logo4', this).stop().animate({top:'-288px'},{queue:false,duration:160});
			});
			
			$('.body_content').css('padding-top','240px');
			$('#portfolio_filter').css('top', '240px');
		}else{
			$('#main_display ul.scrollableArea').css('width', '7200px');
//			$('div.scrollingHotSpotLeft').css('height', '360px');
//			$('div.scrollingHotSpotLeftVisible').css('height', '288px');
//			$('div.scrollingHotSpotRight').css('height', '360px');		
//			$('div.scrollingHotSpotRightVisible').css('height', '288px');
			
			
			$('.boxgrid img').css('width', '288px');

			$('.boxgrid').css('width', '288px');
			$('.boxgrid').css('height', '288px');
			$('.gridreflection').css('width', '288px');
			$('.gridreflection img').css('width', '288px');

			$('.fixed_w').css('width', '360px');

			$('#main_display ul li').hover(function(){
				$('.boxcaption.threeline', this).stop().animate({top:'-72px'},{queue:false,duration:160});
				$('.boxcaptionr.threeline', this).stop().animate({bottom:'50px'},{queue:false,duration:160});
				$('.white_overlay', this).stop().animate({top:'-144px'},{queue:false,duration:160});
				$('.prod_logo', this).stop().animate({top:'0px'},{queue:false,duration:160});
			}, function(){
				$('.boxcaption.threeline', this).stop().animate({top:'72px'},{queue:false,duration:160});	
				$('.boxcaptionr.threeline', this).stop().animate({bottom:'122px'},{queue:false,duration:160});	
				$('.white_overlay', this).stop().animate({top:'-360px'},{queue:false,duration:160});
				$('.prod_logo', this).stop().animate({top:'-288px'},{queue:false,duration:160});
			});

			$('#main_display ul li').hover(function(){
				$('.boxcaption.fourline', this).stop().animate({top:'-89px'},{queue:false,duration:160});
				$('.boxcaptionr.fourline', this).stop().animate({bottom:'33px'},{queue:false,duration:160});
				$('.white_overlay4', this).stop().animate({top:'-160px'},{queue:false,duration:160});
				$('.prod_logo4', this).stop().animate({top:'0px'},{queue:false,duration:160});
			}, function(){
				$('.white_overlay4', this).stop().animate({top:'-360px'},{queue:false,duration:160});
				$('.prod_logo4', this).stop().animate({top:'-288px'},{queue:false,duration:160});
				$('.boxcaption.fourline', this).stop().animate({top:'89px'},{queue:false,duration:160});	
				$('.boxcaptionr.fourline', this).stop().animate({bottom:'122px'},{queue:false,duration:160});	
			});

			$('.body_content').css('padding-top','170px');
			$('#portfolio_filter').css('top', '170px');
		}
	});

});