$(document).ready(function(){
	// GET Flickr Feed [TYPE:JSON] =========================
	// 初期設定 ============================================
	var feed     = 'http://api.flickr.com/services/feeds/photoset.gne?jsoncallback=?&format=json&set=72157628949508099&nsid=74736799@N05';
	var pic      = '.jpg';		// 拡大画像[長辺500px]
	var tmb      = '_s.jpg';	// サムネイル[75x75px]
	var item_max = 20;			// 最大読込数
	var item_min = 13;			// 最低必要数
	var line_pic = new Array();	// 拡大画像用配列
	var line_tmb = new Array();	// サムネイル用配列


	// 表示要素 ============================================
	var screen_box  = '#image_box';
	var screen_load = '#load_area';


	// 拡大画像用設定 ======================================
	var pic_area = '#pic_area';	// 表示要素
	var pic_list = '#pic_list';	// 表示要素
	var pic_cnt  = 0;			// 配列要素数
	var pic_li_w = 540;			// 要素幅
	var pic_li_h = 405;			// 要素高
	var pic_html = '';			// html source
	var now_cnt  = 0;			// 画像配列位置


	// サムネイル用設定 ====================================
	var tmb_wrap   = '#tmb_wrap';			// 表示要素
	var tmb_area   = '#tmb_area';			// 表示要素
	var tmb_list   = '#tmb_list';			// 表示要素
	var tmb_prev   = '#tmb_prev';			// 表示要素
	var tmb_next   = '#tmb_next';			// 表示要素
	var tmb_cnt    = 0;						// 配列要素数
	var tmb_li_w   = 54;					// 要素幅
	var tmb_ul_w   = tmb_li_w * item_min;	// リスト幅
	var tmb_html   = '';					// html source
	var tmb_point  = 0;						// 表示位置[px]
	var move_point = 1;						// 移動距離[px]





	// 処理設定 ============================================
	var spd_effect = 0;
	var spd_exec   = 100;
	var timerID    = 0;
	var btn_mode   = 1;	// next prev ボタン有り無し





	// Feed読込[同期] ======================================
	$.ajax({
		type: 'POST',
		url: feed,
		async : false,
		dataType: 'json', 
		timeout: 1000, 
		beforeSend: function(){


			// HTML構成 ====================================
			//	<div id="image_box">
			//		<div id="load_area">Loading...</div>
			//		<div id="pic_area">
			//			<ul id="pic_list">
			//				<li>...</li>
			//			</ul>
			//		</div>
			//		<div id="tmb_prev">&lt;</div>
			//		<div id="tmb_wrap">
			//			<div id="tmb_area">
			//				<ul id="tmb_list">
			//					<li>...</li>
			//				</ul>
			//			</div>
			//		</div>
			//		<div id="tmb_next">&gt;</div>
			//	</div>
			// =============================================
			// ロード画面追加 ------------------------------
			$(screen_box).wrapInner('<div id="'+screen_load.slice(1)+'"></div>');
			// 拡大画像画面追加 ----------------------------
			$(screen_load).after('<ul id="'+pic_list.slice(1)+'"><li></li></ul>');
			$(pic_list).wrap('<div id="'+pic_area.slice(1)+'"></div>');
			// サムネイル画面追加 --------------------------
			$(pic_area).after('<ul id="'+tmb_list.slice(1)+'"><li></li></ul>');
			$(tmb_list).wrap('<div id="'+tmb_area.slice(1)+'"></div>');
			$(tmb_area).wrap('<div id="'+tmb_wrap.slice(1)+'"></div>');
			// サムネイルボタン追加 ------------------------
			$(tmb_wrap).before('<div id="'+tmb_prev.slice(1)+'">&lt;</div>');
			$(tmb_wrap).after('<div id="'+tmb_next.slice(1)+'">&gt;</div>');


			// ボタンモード ================================
			if ( !btn_mode ) {
				$(tmb_area).css( 'width' , '540px');
				$(tmb_prev).css( 'display' , 'none');
				$(tmb_next).css( 'display' , 'none');
			}


		}, success: function(feed){


			// JSON Parser =================================
			$.each(feed.items,function(i,items){
				if ( i > item_max ) { return false; }
				var url=items.media.m.split("_m.");
				line_pic[i]={"title":items.title,"desc":items.description,"url":url[0]+pic};
				line_tmb[i]={"url":url[0]+tmb};
			});


			// 最少数時処理 ================================
			while ( line_pic.length < item_min ) {
				// 配列のコピーを末尾に追加 ----------------
				line_pic = line_pic.concat(line_pic);
				line_tmb = line_tmb.concat(line_tmb);
			}


			// 拡大画像処理 ================================
			pic_cnt = line_pic.length;	// 拡大画像個数


			// 拡大画像一覧書出 ----------------------------
			for ( i=0;i<pic_cnt;i++ ) {
				pic_html += '<li><img src="'+line_pic[i]['url']+'" /></li>';
			}
			$(pic_list).html(pic_html);


			// 画像サイズ指定 ==============================
			for ( i=0;i<pic_cnt;i++ ) {
				$(pic_list + ' li:eq('+i+')').children('img').load(function() {
					var pic_w = $(this).width();
					var pic_h = $(this).height();
					if ( pic_w > pic_h  ) {
						// 横長の場合 ----------------------
						$(this).css('width', pic_li_w + 'px');
						$(this).css('margin-top', ( pic_li_h - pic_h ) / 4 + 'px');
					} else {
						// 縦長の場合 ----------------------
						$(this).css('height', pic_li_h + 'px');
					}
				});
			}


			// サムネイル処理 ==============================
			tmb_cnt  = line_tmb.length;												// サムネイル個数
			tmb_li_w = parseInt( $(tmb_list + ' li').outerWidth({margin: true}) );	// liの幅
			tmb_ul_w = parseInt( tmb_li_w * tmb_cnt );								// ulの幅


			// サムネイル一覧書出 --------------------------
			for ( i=0;i<tmb_cnt;i++ ) {
				tmb_html += '<li><img src="'+line_tmb[i]['url']+'" /></li>';
			}
			$(tmb_list).html(tmb_html);


			// 初期位置設定 --------------------------------
			tmb_point = - tmb_li_w * 2;						// 表示位置計算
			$(tmb_list).css('width', tmb_ul_w + 'px');		// ulの幅を設定
			$(tmb_list + ' li:last').prependTo(tmb_list);	// ulの末尾liを先頭に移動
			$(tmb_list + ' li:last').prependTo(tmb_list);
			$(tmb_list).css('left', tmb_point + 'px');		// 表示位置調整
			$(tmb_list + ' li:eq(2)').addClass('now');		// classの付与


		}, complete: function(){


			// 処理 ========================================
			function task(){ timerID = setInterval(function(){ task_action(); },spd_exec); }
			function reset_task(){ clearInterval(timerID); }	// リセット


			// 処理内容 ------------------------------------
			function task_action(){
				// サムネイル二個分移動したら --------------
				if ( tmb_point <= - tmb_li_w * 2 ) {
					// サムネイル処理 ----------------------
					$(tmb_list + ' li:eq(2)').removeClass('now');	// classの除去
					$(tmb_list + ' li:first').appendTo(tmb_list);	// 先頭画像を末尾へ移動
					$(tmb_list + ' li:eq(2)').addClass('now');		// classの付与
					tmb_point = - tmb_li_w;							// 表示位置調整

					// 拡大画像処理 ------------------------
					$(pic_list + ' li:eq('+now_cnt+')').hide();		// 非表示にする
					now_cnt++;										// 配列位置を進める
					if ( now_cnt >= pic_cnt ) { now_cnt = 0; }		// 末尾迄行ったらリセット
//					$(pic_list + ' li:eq('+now_cnt+')').show();		// 表示する
					$(pic_list + ' li:eq('+now_cnt+')').fadeIn(1000);
				}
				// 指定px移動 ------------------------------
				tmb_point = tmb_point - move_point;
				$(tmb_list).css('left', tmb_point + 'px');


			}


			// 拡大画像全て読込んだら ======================
			$(pic_list + ' li:last').children('img').load(function() {
				// ロード画面を消去 ------------------------
				$(screen_load).hide();
				// 拡大画像一覧を消去 ----------------------
				$(pic_list + ' li').hide();
				// 拡大画像一覧先頭を表示 ------------------
				$(pic_list + ' li:eq('+now_cnt+')').show();
				// サムネイル一覧を消す --------------------
				$(tmb_prev).stop().animate( { opacity: '0.00' },{ duration: 500 });
				$(tmb_next).stop().animate( { opacity: '0.00' },{ duration: 500 });
				$(tmb_wrap).stop().animate( { opacity: '0.00' },{ duration: 2000 });

				// 実行 ====================================
				task();
			});


			// カーソルを当てるとサムネイルリスト表示 ======
			$(screen_box).hover(function(){
//				reset_task(timerID);
				$(tmb_prev).stop().animate( { opacity: '0.75' },{ duration: 500 });
				$(tmb_next).stop().animate( { opacity: '0.75' },{ duration: 500 });
				$(tmb_wrap).stop().animate( { opacity: '0.75' },{ duration: 100 });
			},function(){
				$(tmb_prev).stop().animate( { opacity: '0.00' },{ duration: 500 });
				$(tmb_next).stop().animate( { opacity: '0.00' },{ duration: 500 });
				$(tmb_wrap).stop().animate( { opacity: '0.00' },{ duration: 1500 });
//				task();
			});


			// Prevボタン処理 ==============================
			$(tmb_prev).click(function(){
				$(tmb_list + ' li:eq(2)').removeClass('now');	// classの除去
				$(tmb_list + ' li:last').prependTo(tmb_list);	// 末尾画像を先頭へ移動
				$(tmb_list + ' li:eq(2)').addClass('now');		// classの付与
				tmb_point = - tmb_li_w;							// 表示位置調整

				// 拡大画像処理 ------------------------
				$(pic_list + ' li:eq('+now_cnt+')').hide();		// 非表示にする
				now_cnt--;										// 配列位置を進める
				if ( now_cnt < 0 ) { now_cnt = pic_cnt - 1; }	// 先頭迄行ったら末尾へ
//				$(pic_list + ' li:eq('+now_cnt+')').show();		// 表示する
				$(pic_list + ' li:eq('+now_cnt+')').fadeIn(1000);		// 表示する
				// 指定px移動 ------------------------------
				tmb_point = tmb_point - move_point;
				$(tmb_list).css('left', tmb_point + 'px');
			});


			// Nextボタン処理 ==============================
			$(tmb_next).click(function(){
				$(tmb_list + ' li:eq(2)').removeClass('now');	// classの除去
				$(tmb_list + ' li:first').appendTo(tmb_list);	// 先頭画像を末尾へ移動
				$(tmb_list + ' li:eq(2)').addClass('now');		// classの付与
				tmb_point = - tmb_li_w;							// 表示位置調整

				// 拡大画像処理 ------------------------
				$(pic_list + ' li:eq('+now_cnt+')').hide();		// 非表示にする
				now_cnt++;										// 配列位置を進める
				if ( now_cnt >= pic_cnt ) { now_cnt = 0; }		// 末尾迄行ったらリセット
//				$(pic_list + ' li:eq('+now_cnt+')').show();		// 表示する
				$(pic_list + ' li:eq('+now_cnt+')').fadeIn(1000);		// 表示する
				// 指定px移動 ------------------------------
				tmb_point = tmb_point - move_point;
				$(tmb_list).css('left', tmb_point + 'px');
			});

		}

	});
});