// Effect. (this includes prototype for effects)

var MW = {
	init: function(){
		if(!document.body.hasClassName('mobile')) {
			i72.multicol.equalize();
		}
		
		$$('img.mediaworks-gif', 'img.mediaworks-gif-footer').each(function(gif) {
		    gif.observe('mouseover', MW.gifAnimation);
		});
		$$('.content .portfolio').each(function(e){
			MW.portfolio.data['show-' + e.id.split('-').pop()] = window['sJson_' + e.id.split('-').pop()].evalJSON();
			
			// Preload img-block hover states
			for (var i = 0; i<MW.portfolio.data['show-' + e.id.split('-').pop()].length; i++) {
				var img = new Image();
				img.src = '/assets/files/1/portfolio/' + MW.portfolio.data['show-' + e.id.split('-').pop()][i].id + '/' + MW.portfolio.data['show-' + e.id.split('-').pop()][i].project_images[1].image.full;
			}
		});
		$$('.portfolio-item', '.portfolio-image').each(function(e){
			e.observe('click',MW.portfolio.showDetail);
			e.observe('click', MW.jumpNav.init);
		});
		
		$$('.portfolio-item').each(function(e) {
			MW.setBgPosition(e);
		});
		
		$$('.portfolio-image.active').each(function(e) {
			MW.portfolio.imgSwap('', e.down('img'));
		});
		
		$$('.portfolio-image').each(function(e, i) {
			e.observe('mouseover', MW.portfolio.imgSwap);
		});
		$$('.portfolio-image').each(function(e) {
			e.observe('mouseout', MW.portfolio.imgSwapBack);
		});
		
		if ($$('.main-nav li.active', '.main-nav > .nav-1 > li.active').length > 0) { MW.jumpNav.init(); }
		if ($$('.footer-nav .nav-1 li.active').length > 0) { MW.jumpNav.virtuesInit(); }
	},

	gifAnimation: function(event) {
		// Grab image with mouse over it
		var element = Event.element(event),
		
		// read that image's source
		source = element.readAttribute('src'),
		
		newSource = source.substring(0, source.length - 3) + 'gif';
		
		// rewrite the image's source to reanimate the gif
		element.writeAttribute({'src': newSource});
	},
	
	setBgPosition: function(element) {
		var link = element.down('a'),
		    span = link.down('span'),
		    spanWidth = span.getWidth(),
		    spanHeight = span.getHeight(),
		    linkBgPosition = (spanWidth + 15) + 'px 50%';

		if(spanHeight > 20) {
			element.addClassName('nav-large');
		} else {
			element.removeClassName('nav-large');
		}
		
		link.setStyle({ backgroundPosition: linkBgPosition });

	},
	
	jumpNav: {
		init: function() {
			var currentPage = document.body.hasClassName('mobile') ? $$('.main-nav > .nav-1 > li.active').pop() : $$('.main-nav .nav-0 li.active').pop(),
				allNavs = document.body.hasClassName('mobile') ? $$('.main-nav > .nav-1 > li') : $$('.main-nav>.nav-0>li'),
				prevBtn = $$('#jump-nav .previous-page')[0],
				nextBtn = $$('#jump-nav .next-page')[0],
				prevHref = '#',
				nextHref = '#',
				navIndex = allNavs.indexOf(currentPage),
				prevIndex = ((navIndex - 1) < 0) ? allNavs.length - 1 : navIndex - 1,
				nextIndex = ((navIndex + 2) >= allNavs.length) ? 0 : navIndex + 1;
			nextBtn.href = allNavs[nextIndex].down('a').href;
			prevBtn.href = allNavs[prevIndex].down('a').href;

		},
		
		virtuesInit: function() {
			var footerNavs = $$('.footer-nav .nav-1 li'),
				currentPage = $$('.footer-nav .nav-1 li.active')[0],
				prevBtn = $$('#jump-nav .previous-page')[0],
				nextBtn = $$('#jump-nav .next-page')[0],
				prevHref = '#',
				nextHref = '#',
				navIndex = footerNavs.indexOf(currentPage);

			if(footerNavs[navIndex] !== footerNavs.last()) {
				nextHref = footerNavs[navIndex + 1].down('a').href;
			} else {
				nextBtn.hide();
			}
			
			if (footerNavs[navIndex] !== footerNavs[0]) {
				prevHref = footerNavs[navIndex - 1].down('a').href;
			} else {
				prevBtn.hide();
			}
			
			nextBtn.href = nextHref;
			prevBtn.href = prevHref;

		}
	},
		
	portfolio: {

		data: [],

		/* ! MW.portfolio hideDetail */
		hideDetail: function(event){
			var cover = $('i72-cover'),
				detail = $('i72-detail');
			new Effect.Parallel([
				new Effect.Fade(detail),
				new Effect.Fade(cover)
			],{
				duration: 0.5
			});
		},

		/* ! MW.portfolio showDetail */
		showDetail: function (event) {
			event.stop();
			var element = Event.element(event),
				block = element.up('div.portfolio'),
				whichshow = block.id.split('-').pop(),
				show = MW.portfolio.data['show-' + whichshow],
				whichproj = (element.tagName.toLowerCase() === 'li') ? element.id.split('-').pop() : element.up('li').id.split('-').pop(),
				proj = show[whichproj],
				detail = $('i72-detail'),
				headline = $('portfolio-detail-headline'),
				descript = $('portfolio-detail-description'),
				links = $('portfolio-detail-links'),
				largeimg = $('portfolio-detail-image');
			headline.update('<span>' + proj.name + '</span>');
			descript.update(proj.description);
			links.update('');
			detail.setAttribute('rel',whichshow + '-' + whichproj);
			proj.links.each(function(e){
				var linktext = 'site link';
				if (e.type == 'file'){
					linktext = 'download';
				}
				links.insert('<a href="' + e.url + '" target="_blank">' + linktext + '</a>');
			});

			/* Add active classes to text and image nav items */
			$('portfolio-item-' + whichproj).addClassName('active');
			$('portfolio-image-' + whichproj).addClassName('active');
			
			if(element.up('li').hasClassName('portfolio-item') && !document.body.hasClassName('mobile')) {
				MW.portfolio.imgSwap(event);
			}

			$('portfolio-item-' + whichproj).siblings().each(function(e) { 
				e.removeClassName('active');
			});

			$('portfolio-image-' + whichproj).siblings().each(function(e){

				e.removeClassName('active');
				if(e.down('img')) {
					MW.portfolio.imgSwapBack('', e.down('img'));
				}
			});

		},
		
		imgSwap: function(event, swap) {
			
			var element = (typeof swap !== 'undefined') ? swap : Event.element(event),
				block = element.up('div.portfolio'),
				whichshow = block.id.split('-').pop(),
				show = MW.portfolio.data['show-' + whichshow],
				whichproj = (element.tagName.toLowerCase() === 'li') ? element.id.split('-').pop() : element.up('li').id.split('-').pop(),
				proj = show[whichproj];
				oldImgSrc = '/assets/files/1/portfolio/' + proj.id + '/' + proj.project_images[0].image.full,
				swapImgSrc = '/assets/files/1/portfolio/' + proj.id + '/' + proj.project_images[1].image.full;


			$('portfolio-image-' + whichproj).down('img').setStyle({ backgroundImage: 'url(' + oldImgSrc +')' });
			$('portfolio-image-' + whichproj).down('img').src = swapImgSrc;
			
		},
		
		imgSwapBack: function(event, swap) {
			var element = (typeof swap !== 'undefined') ? swap : Event.element(event),
				block = element.up('div.portfolio'),
				whichshow = block.id.split('-').pop(),
				show = MW.portfolio.data['show-' + whichshow],
				whichproj = (element.tagName.toLowerCase() === 'li') ? element.id.split('-').pop() : element.up('li').id.split('-').pop(),
				proj = show[whichproj];
				oldImgSrc = '/assets/files/1/portfolio/' + proj.id + '/' + proj.project_images[1].image.full,
				swapImgSrc = '/assets/files/1/portfolio/' + proj.id + '/' + proj.project_images[0].image.full;

				if(!element.up('li').hasClassName('active')) {
					$('portfolio-image-' + whichproj).down('img').src = swapImgSrc;
					element.src = swapImgSrc;
				}
		}
	}
}

document.observe('dom:loaded',MW.init);