var d = new Date()
d = '?' + d.getTime()

$(function(){
	var __$ = {
		// カテゴリメニュー選択関数
		choose : function ( id ) {
			$('#artist,#region').removeClass()
			$('#artist_list,#region_list').hide()
			$($('#'+id).addClass('this').attr('href')).show()
			$('#menu').removeClass().addClass(id)
		},
		
		// スライダー
		slider : function ( r_flag, slow_flag ) {
			$.thumbnail.ul.stop().animate(
				{ 'margin-left' : r_flag ? $.thumbnail.over_width : 0 },
				( r_flag ? parseInt($.thumbnail.ul.css('margin-left')) - $.thumbnail.over_width : 0 - parseInt($.thumbnail.ul.css('margin-left')) ) * ( slow_flag ? 6 : 1 ),
				slow_flag ? 'linear' : 'easeOutBack',
				function(){
					parseInt($.thumbnail.ul.css('margin-left')) ? $('#next').css('opacity',0.3) : $('#prev').css('opacity',0.3)
					click_flag = false
				}
			)
		},
		
		// 詳細画面表示
		detail : function ( id , num ) {
			if ( ! num ) var num = 1
			__$.choose( id.indexOf('#a') ? 'region' : 'artist' )
			$('#artist_list a, #region_list a').removeClass()
			var $this = $(id).addClass('this')
			$( detail_name ? '#'+detail_name : '#thumbnail' ).hide()
			detail_name = $this.attr('href')
			
			if ( $this.data('click') ) {
				$('#'+detail_name).show()
			} else {
				str = '<div id="' + detail_name + '" class="index"><ul>'
				var n = $('span',$this).text()
				for (var i=1; i<=n; i++) {
					str += '<li><a href="img/collections/' + detail_name + '_0' + i + '_b.jpg' + d + '"' + ( i==1 ? ' class="this"' : '') + '><img src="img/collections/' + detail_name + '_0' + i + '_s.jpg' + d + '" width="80" height="80" /></a></li>'
				}
				str += '</ul><p>'
				if ( ! id.indexOf('#a') && $('div.' + $this.attr('href'), '#profile').length )
					str += '<a href="#' + $this.attr('href') + '" class="profile_btn" rel="' + $this.attr('id').slice(1) + '"><img src="common/img/collections_profile.png" alt="プロフィール" width="150" height="18" /></a><br />'
				if ( $('i',$this).length )
					str += '<a href="' + $('i',$this).text() + '" target="_blank"><img src="common/img/collections_homepage.png" alt="ホームページ" width="150" height="18" /></a><br />'
				if ( $('span',$this).hasClass('e') )
					str += '<a href="events.html"><img src="common/img/collections_events.png" alt="当店にて個展開催中" width="150" height="18" /></a><br />'
				str += '<br /> All photo by <a href="mailto:ohya@p02.itscom.net">大屋孝雄</a></p></div>'
				$(str).appendTo('#detail')
				.find('img').hover(function(){
					$(this).css('opacity',0.7)
				},function(){
					$(this).css('opacity',1)
				})
				
				var $ul_a = $('#' + detail_name + ' ul a')
				$ul_a.mouseover(function(){
					if ( ! $(this).hasClass('this') ) {
						$ul_a.removeClass()
						$(this).addClass('this')
						$('#large').change_img($(this).attr('href'),false)
					}
				}).click(function(){
					__$.modal_win( $(this).attr('href') )
					return false
				})
				$('a.profile_btn').click(function(){
					__$.modal_win_profile( $(this).attr('href').split('#').pop() ,  $(this).attr('rel') )
					return false
				})
				$this.data('click',true)
			}
			$('#large').change_img('img/collections/' + detail_name + '_0' + num + '_b.jpg' + d,true)
		},
		
		// 拡大写真表示関数（lightBox風）
		modal_win : function( src ) {
			$('#jquery-overlay').remove()
			$('<div id="jquery-overlay"><p id="jquery-box"><img src="' + src + '" id="jquery-photo"><br><img src="common/img/close.png" id="jquery-close"></p></div>').appendTo('body').click(function(){
				$('#jquery-overlay').remove()
			})
			$('#jquery-photo').load(function(){
				$('#jquery-overlay').height($(document).height())
				$('#jquery-box').width( $('#jquery-photo').width() + 20 ).css('visibility','visible')
			})
			$('#jquery-close').hover(function(){
				$(this).css('opacity',0.7)
			},function(){
				$(this).css('opacity',1)
			})
			$('html,body').scrollTop(0)
		},
		
		// プロフィール表示関数（lightBox風）
		modal_win_profile : function( target , num ) {
			$('#jquery-overlay').remove()
			$('<div id="jquery-overlay"><div id="jquery-box" style="background-image:url(img/collections/' + target + '.jpg)"><h2 style="background-position:0 ' + ((num - 1) * -50) + 'px"></h2><p id="profile_text">' + $('div.' + target, '#profile').html() + '</p><p class="close"><img src="common/img/close.png" id="jquery-close"></p></div></div>').appendTo('body').height($(document).height()).click(function(){
				$('#jquery-overlay').remove()
			})
			if ($('#profile_text').height() < 150)
				$('#profile_text').height(150)
			$('#jquery-close').hover(function(){
				$(this).css('opacity',0.7)
			},function(){
				$(this).css('opacity',1)
			}).fadeTo(1000,1,function(){
				$('#jquery-overlay').height($(document).height())
			})
			$('html,body').scrollTop(0)
		}

	}
	
	$.fn.change_img = function ( b_jpg, fadeIn ) {
		return $(this).each(function(){
			$('<img src="' + b_jpg.replace('_b.jpg','.jpg') + '" id="large_img">').load(function(){
				$('#large').html('').removeClass()
				$(this).appendTo('#large').wrap('<a href="' + b_jpg + '"></a>')
				$('#large a').click(function(){
					__$.modal_win( $(this).attr('href') )
					return false
				})
				
				if ( $(this).height() > 300 )
					$('#large').addClass('large_tate')
				else
					$('#large').addClass('large_yoko')

				if ( fadeIn )
					$('#large').hide().css('visibility','visible').fadeIn()
				else
					$('#large').css('visibility','visible')
			})
		})
	}
	
	//Start
	$('#artist, #region').mouseover(function(){
		__$.choose($(this).attr('id'))
	}).click(function(){
		return false
	})

	var j = 0
	var str = ''
	var detail_name = false
	var click_flag = false
	
	$('#artist_list a, #region_list a').click(function(){
		__$.detail( '#'+$(this).attr('id') )
		return false
	}).each(function(){
		var n = $('span',this).text() == 1 ? 1 : 2
		var id = $(this).attr('id')
		var href = $(this).attr('href')
		for (var i=1; i<=n; i++) {
			str += ( ++j%2 ? '<li>' : '' ) + '<a href="" name="#' + id + '"><span style="background-image:url(img/collections/' + href + '_0' + i + '_l.jpg' + d + ')" name="' + i + '"></span></a>' + ( j%2 ? '' : '</li>' )
		}
	})
	if (j%2)
		str += '</li>'
	
	$.thumbnail = {
		ul : $('#thumbnail ul')
	}
	$.thumbnail.ul.html( str ).width( parseInt((j/2+j%2)*110) )
	.find('a').click(function(){
		__$.detail( $(this).attr('name') , $('span',this).attr('name') )
		return false
	})

	$.thumbnail.over_width = parseInt($('#thumbnail > div').width()) - parseInt((j/2+j%2)*110)
	
	$('#prev').css('opacity',0.3).add('#next').hover(function(){
		$('span',this).fadeTo(0,0.2).css('display','block')
		$('#prev, #next').css('opacity',1)
		__$.slider( ($(this).attr('id')=='next'), true )
	},function(){
		$('span',this).hide()
		if ( ! click_flag )
			$.thumbnail.ul.stop()
	}).click(function(){
		click_flag = true
		$('#prev, #next').css('opacity',1)
		var end = ( $(this).attr('id') == 'next' ) ? $.thumbnail.over_width : 0
		__$.slider( ( parseInt($.thumbnail.ul.css('margin-left')) == end ) ? !end : end )
	})
	
})