// JavaScript Document

$(document).ready(init);

$(document).ready(function(){ 
	$(document).pngFix(); 
}); 

function init() {
	$('a[href^="#"]').smoothscroll();
	$('a img, .fadeImage').fadeImage();
	$('#creation #about li, #creation #approach li').fadeBlock();
	$('#workList .section').createWorkSection();
	$('#link dt a').setExternalLink();
	new AccordionMenu($('#areaList li'), $('#areaList dl'));
}

/* jQueryプラグイン
-------------------------------------------------------------*/
(function() {
	
	// スムーススクロールを設定
	jQuery.fn.smoothscroll = function() {
		this.each(attachAction);
		function attachAction() {
			$(this).bind('click', {obj: $(this)}, doScroll);
			function doScroll(event) {
				var self = event.data.obj;
				var targetId = self.attr('href').replace('#', '');
				var offset = (targetId == 'top')? 0 : $('#'+targetId).position().top;
				$('html, body').animate({scrollTop: offset}, 1000, 'easeOutExpo');
				return false;
			}
		}
	}
	
	// リンク設定画像にフェイドを設定
	jQuery.fn.fadeImage = function() {
		this.each(attachAction)
		function attachAction() {
			$(this).bind('mouseover', {obj: $(this)}, fadeout);
			$(this).bind('mouseout', {obj: $(this)}, fadein);
			function fadeout(event) {
				var self = event.data.obj;
				self.stop().fadeTo(0, 0.75);
			}
			function fadein(event) {
				var self = event.data.obj;
				self.stop().fadeTo('fast', 1);
			}
		}
	}
	
	// ブロック要素にフェイドを設定
	jQuery.fn.fadeBlock = function() {
		this.each(attachAction);
		function attachAction() {
			
			var initialized = false;
			var url = extractURL($(this));
			var coverAnchor = createCoverAnchor($(this));
			
			$(this).css('cursor', 'pointer');
			$(this).bind('mouseover', {obj: $(this)}, fadeout);
			$(this).bind('mouseout', {obj: $(this)}, fadein);
			$(this).bind('click', {obj: $(this)}, jump);
			
			function extractURL(self) {
				var a = self.find('a')[0];
				return a.href;
			}
			
			function createCoverAnchor(self) {
				self.css('position', 'relative');
				var a = $('<a />');
				a.css({
					'position': 'absolute',
					'top': 0,
					'left': 0,
					'display': 'block',
					'width': self.innerWidth()+'px',
					'height': self.innerHeight()+'px'
				});
				a.attr('href', url);
				a.appendTo(self);
				return a;
			}
			
			function fadeout(event) {
				if(!initialized) unbind($(this));
				window.status = url;
				$(this).stop().css({backgroundColor: '#eeeeee'});
			}
			function fadein(event) {
				window.status = '';
				$(this).stop().animate({backgroundColor: '#ffffff'}, 'normal');
			}
			function jump() {
				window.location.href = url;
			}
			function unbind(self) {
				initialized = true;
				self.find('a img').each(cancelFade);
				function cancelFade() {
					$(this).unbind();
					$(this).fadeTo(0, 1);
				}
			}
		}
	}
	
	// 制作実績の表示
	jQuery.fn.createWorkSection = function() {
		
		var width = 240;
		var height = 160;
		
		if(this == null) return;
		
		this.each(attachEvent);
		function attachEvent() {
			var id = "#" + $(this).attr('id');
			var capture = new Capture($(id+' .captureList'));
			var section = new Section(capture);
			var list = new List($(id+' .thumbnailList'), section);
			var buttonPrev = new Button($(id+' .prev'), section);
			var buttonNext = new Button($(id+' .next'), section);
			var cover = new Cover($(id+' .thumbnailCover'));
			capture.setCover(cover);
		}
		
		function Capture(container) {
			
			var index = 0;
			var maxIndex = 0;
			var container = container;
			var cover = null;
			
			// スコープを閉じ込める
			var self = this;
			
			this.slide = function(index) {
				var left = index * -width + 'px';
				container.animate({'margin-left': left}, 'fast', 'easeOutSine');
				cover.slide(index);
			}
			this.offsetIndex = function(offset) {
				index += offset;
				if(index < 0) index = maxIndex;
				if(index > maxIndex) index = 0;
				this.slide(index);
			}
			this.setIndex = function(target) {
				index = target;
				this.slide(index);
			}
			this.defineMaxIndex = function(m) {
				maxIndex = m;
			}
			this.setCover = function(element) {
				cover = element;
			}
			
			this.onclicked = function(event) {
				self.offsetIndex(1);
			}
			container.css('cursor', 'pointer');
			container.bind('click', {obj: container}, this.onclicked);
			
		}
		
		function Cover(element) {
			var cover = $(element);
			var offset = 65;
			var baseOffset = 50;
			this.slide = function(index) {
				var left = (offset * index + baseOffset) + 'px';
				cover.animate({'left' : left}, 'fast', 'easeOutSine');
			}
		}
		
		function Section(element) {
			var self = this;
			var capture = element;
			this.showPrev = function() {
				capture.offsetIndex(-1);
			}
			this.showNext = function() {
				capture.offsetIndex(1);
			}
			this.showCapture = function(event) {
				var index = event.data.index;
				capture.setIndex(index);
			}
			this.setMaxIndex = function(m) {
				capture.defineMaxIndex(m-1);
			}
		}
		
		function List(container, section) {
			var list = container.find('img');
			section.setMaxIndex(list.length);
			list.each(function(index, el) {
				var img = $(el);
				img.css('cursor', 'pointer');
				img.bind('click', {index: index}, section.showCapture);
			});
		}
		
		function Button(button, section) {
			button.css('cursor', 'pointer');
			var fn = (button.attr('class') == 'prev')? section.showPrev : section.showNext;
			button.bind('click', {obj: this}, fn);
		}
	}
	
	jQuery.fn.setExternalLink = function() {
		this.each(init);
		function init() {
			$(this).attr({
				'target': '_blank',
				'class': 'external'
			});
		}
	}
	
})(jQuery);

///////////////////////////////////////////////////////////////////////////////////

// MENU
function AccordionMenu(tabList, bodyList) {
	this.currentIndex = 0;
	this.tabList = tabList;
	this.bodyList = bodyList;
	this.setList = new Array();
	this.init(0);
}

AccordionMenu.prototype = {
	init: function(activeIndex) {
		var bodyList = this.bodyList;
		var tabList = this.tabList;
		var setList = this.setList;
		var menu = this;
		this.tabList.each(function(index, el) {
			var isActive = (activeIndex == index);
			var as = new AccordionSet(tabList[index], bodyList[index], index);
			as.setMenu(menu);
			setList.push(as);
			if(isActive) as.show();
		});
	},
	switchContents: function(index) {
		this.setList[this.currentIndex].hide();
		this.setList[index].show();
		this.currentIndex = index;
	}
}

// SET
function AccordionSet(t, b, index) {
	this.t = new AccordionTab(t, this);
	this.b = new AccordionBody(b, this);
	this.index = index;
	this.hide();
}

AccordionSet.prototype = {
	setMenu: function(menu) {
		this.menu = menu;
	},
	show: function() {
		this.t.unactivate();
		this.b.show();
	},
	hide: function() {
		this.t.activate();
		this.b.hide();
	},
	onclicked: function() {
		this.menu.switchContents(this.index);
	}
}

// BODY
function AccordionBody(el, set) {
	this.el = $(el);
	this.init();
}

AccordionBody.prototype = {
	init: function() {
		this.hide();
	},
	show: function() {
		this.el.css({'display': 'block'});
	},
	hide: function() {
		this.el.css({'display': 'none'});
	}
}

// TAB
function AccordionTab(el, set) {
	this.isActive;
	this.el = $(el);
	this.set = set;
	this.init();
}

AccordionTab.prototype = {
	init: function() {
		this.activate();
	},
	activate: function() {
		this.el.css({'cursor': 'pointer', 'opacity': '1'});
		this.el.bind('click', {obj: this}, this.onclicked);
		this.el.bind('mouseover', {obj: this}, this.onmouseovered);
	},
	unactivate: function() {
		this.el.css({'cursor': 'default', 'opacity': '0.5'});
		this.el.unbind('click', this.onclicked);
	},
	onclicked: function(event) {
		var self = event.data.obj;
		self.set.onclicked();
	},
	onmouseovered: function(event) {
		var self = event.data.obj;
	}
}