// $.support.backgroundsize = false; // test

MAINSTYLE.index = {

	controls: {},

	modules: {

		index: function($box) {

			var
				$list = $box.find('ul'),
				$items = $list.find('li'),

				$inBoxs = [],
				$titles = [],

				$bars = [],
				$fake = $({p: 0}),

				$back = $box.find('button.back'),
				$prev = $box.find('a.prev').attr('hideFocus', 'true'),
				$next = $box.find('a.next').attr('hideFocus', 'true'),
				$buttons = [$back, $prev, $next],

				$paging = $box.find('span.now'),

				$more = $box.find('div.down a'),

				$coverBox,
				$covers = [],

				$movieBack = $('<div class="movieBack" />'),
				$movie = $('<div class="movie" />'),
				$movieCloseButton = $('<button class="movieClose">Close</button>'),
				movieURL = '',

				contentWidth,
				eachWidth,

				isSliderMode = false,
				sliderAdded = false,
				canceled = false,

				peepWidth = 150,
				expandWidth = 100,
				startLefts = [],
				endLefts = [],
				startWidths = [],
				endWidths = [],

				expandedIndex = -2,
				itemHoverAble = true,

				isMobile = $.browser.mobile,
				supportTransform = $.support.transform,
				supportBackgroundSize = $.support.backgroundsize,

				aniOption = {
					resize: {queue: false, duration: 400, easing: 'easeOutCubic', step: onItemResize, complete: onItemResized},
					expand: {queue: false, duration: 650, easing: 'easeInOutQuart', step: onItemResize, complete: onItemExpanded},
					backToList: {queue: false, duration: 650, easing: 'easeInOutQuart', step: onItemResize, complete: onItemResized},
					barWidth: {queue: false, duration: 400, easing: 'easeOutCubic'},
					showHideInBox: {queue: false, duration: 350},
					showHideInBoxWithCallback: {queue: false, duration: 350, complete: onBackToItemList},
					buttons: {queue: false, duration: 350, easibng: 'easeOutCubic'},
					peep: {queue: false, duration: 350, easing: 'easeOutCubic'},
					down: {queue: false, duration: 400, easing: 'easeOutCubic'}
				},
				sliderOption = {defaultPage: expandedIndex, endless: true, useTransition: MAINSTYLE.useTransitionInSlider,
					swipe: $.browser.mobile || !$.browser.ie,
					paging: $paging,
					arrows: [$prev, $next],
					onChange: function(_index) {
						itemHoverAble = false;
						expandedIndex = _index;
					},
					onChangeEnd: function(_index) {
						itemHoverAble = true;
						for (i = 0; i < max; i++) {
							$covers[i] && $covers[i]._fill();
						}
					}
				},

				slider = null,

				i, max = $items.length;


			$more.click(discoverMore);
			if (!isMobile && supportTransform) {
				$moreArrows = [
					$('<span class="before" />').css('opacity', 1).appendTo($more),
					$('<span class="after" />').appendTo($more)
				];
				$more.mouseenter(moreHover).mouseleave(moreLeave);
			}

			$movieBack.css('opacity', 0);
			$movieCloseButton.click(closeMovie)
				.mouseenter(function() {
					$movieCloseButton._css({rotate: 0})._animate({rotate: 180}, {queue: false, duration: 450, easing: 'easeOutQuart'});
				});

			if (2 > max) {
				$box.addClass('open');
				$items.css('left', 0).find('a.play').click(playMovie);
				$paging.parent().remove();
				canceled = true;
				return { resize: resize };
			}

			MAINSTYLE.createPaging($paging, max);

			for (i = 0; i < max; i++) {
				$items[i] = $($items[i]).attr('data-index', i)
					// .css('background', 'rgb('+Math.round(Math.random()*255)+', '+Math.round(Math.random()*255)+', '+Math.round(Math.random()*255)+')')
					.css({overflow: 'hidden', zIndex: 0});
				if (!isMobile) {
					$items[i].mouseenter(itemHover).mouseleave(itemLeave);
				}
				if (!supportBackgroundSize) {
					$covers[i] = MAINSTYLE.coverImages.add($items[i]);
					$coverBox = $('<div class="covered" />')
						.css('backgroundPosition', '50% 50%')
						.insertBefore($covers[i]);
					$covers[i].appendTo($coverBox);
				}
				$inBoxs[i] = $items[i].find('p');
				$titles[i] = $items[i].find('span.tit').css('margin', '0 auto');
				$bars[i] = $('<span class="before" style="width:40px;"></span><span class="after" style="width:40px;"></span>').appendTo($titles[i]);
				$items[i].find('a.play').click(playMovie);
				if ($.browser.ie && 9 > $.browser.ie) {
					$items[i].append('<span class="after" />');
				}
			}

			// $paging.parent().css({position: 'absolute', top: 200, display: 'block'});
			$back.css('top', -30);
			$prev.css('left', -50);
			$next.css('right', -50);
			$.each($buttons, function() {
				this.mouseenter(buttonHover)
					.mouseleave(buttonLeave)
					.click(buttonClick);
			});


			function itemHover() {
				if (!itemHoverAble || expandedIndex > -1) {
					return;
				}
				var index = parseInt(this.getAttribute('data-index')),
					reduceWidths = 0, i;
				for (i = 0; i < max; i++) {
					startWidths[i] = $items[i][0].offsetWidth;
					endWidths[i] = i == index ? 0 : eachWidth*(1-Math.abs(i-index)/20);
					reduceWidths += endWidths[i];
				}
				openWidth = endWidths[index] = contentWidth-reduceWidths;
				for (i = 0; i < max; i++) {
					startLefts[i] = $items[i][0].offsetLeft;
					endLefts[i] = i ? endLefts[i-1]+endWidths[i-1] : 0;
					//$bars[i]._transition({width: i == index ? openWidth-40 : 40, marginLeft: i == index ? -(openWidth-40)/2 : -20}, aniOption.barWidth);
				}
				itemResize();
			}

			function itemLeave() {
				if (expandedIndex > -1) {
					return;
				}
				for (i = 0; i < max; i++) {
					startLefts[i] = $items[i][0].offsetLeft;
					endLefts[i] = eachWidth*i;
					startWidths[i] = $items[i][0].offsetWidth;
					endWidths[i] = eachWidth;
					//$bars[i]._transition({width: 40, marginLeft: -20}, aniOption.barWidth);
				}
				itemResize();
			}

			function itemResize(aniOptionKey) {
				$fake[0].p = 0;
				$fake._stop()._animate({p: 1000000}, aniOption[aniOptionKey || 'resize']);
			}

			function onItemResize(v) {
				var i;
				v = v.p/1000000;
				for (i = 0; i < max; i++) {
					$items[i][0].style.left = startLefts[i]+(endLefts[i]-startLefts[i])*v+'px';
					$items[i][0].style.width = ((startWidths[i]+(endWidths[i]-startWidths[i])*v)+1)+'px';
					$covers[i] && $covers[i]._fill();
				}
			}

			function onItemResized() {
				itemHoverAble = true;
			}

			function itemClick() {
				if (expandedIndex > -1) {
					return;
				}
				var index = parseInt(this.getAttribute('data-index')),
					leftTo = $items[index][0].offsetLeft,
					rightTo = contentWidth-leftTo-$items[index][0].offsetWidth;
				for (i = 0; i < max; i++) {
					startLefts[i] = $items[i][0].offsetLeft;
					startWidths[i] = $items[i][0].offsetWidth;
					if (i == index) {
						endLefts[i] = 0;
						endWidths[i] = contentWidth;
					} else {
						endLefts[i] = index > i ? startLefts[i]-leftTo : startLefts[i]+rightTo;
						endWidths[i] = startWidths[i];
					}
				}
				$inBoxs[index]._transition({opacity: 0}, aniOption.showHideInBox);
				expandedIndex = index;
				itemResize('expand');
				MAINSTYLE.smoothScrollTop(0, 500);
			}

			function onItemExpanded(withOutResize) {
				$box.addClass('open');
				$inBoxs[expandedIndex]._transition({opacity: 1}, aniOption.showHideInBox);
				$back._transition({top: 30}, aniOption.buttons);
				$prev._transition({left: 0}, aniOption.buttons);
				$next._transition({right: 0}, aniOption.buttons);
				withOutResize !== true && resize();
			}

			function backToItemList() {
				itemHoverAble = false;
				$back._transition({top: -30}, aniOption.buttons);
				$prev._transition({left: -50}, aniOption.buttons);
				$next._transition({right: -50}, aniOption.buttons);
				$inBoxs[expandedIndex]._animate({opacity: 0}, aniOption.showHideInBoxWithCallback);
			}

			function onBackToItemList() {
				$box.removeClass('open');
				$list.xlider('remove');
				sliderAdded = false;
				for (i = 0; i < max; i++) {
					startLefts[i] = i == expandedIndex ? 0 : expandedIndex > i ? (i-expandedIndex)*eachWidth : (i-expandedIndex-1)*eachWidth+contentWidth;
					endLefts[i] = eachWidth*i;
					startWidths[i] = i == expandedIndex ? contentWidth : eachWidth;
					endWidths[i] = eachWidth;
					$bars[i].css({width: 40, marginLeft: -20, display: ''});
				}
				// $bars[expandedIndex].css({width: 40, marginLeft: -20, display: ''});
				$inBoxs[expandedIndex]._transition({opacity: 1}, aniOption.showHideInBox);
				expandedIndex = -1;
				resize(true);
				itemResize('backToList');
			}

			function buttonHover() {
				var flag = this.className;
				if (!isMobile && itemHoverAble) {
					if (flag == 'prev') {
						$list._transition({translate3dX: peepWidth}, aniOption.peep);
					} else if (flag == 'next') {
						$list._transition({translate3dX: -peepWidth}, aniOption.peep);
					}
				}
			}

			function buttonLeave() {
				var flag = this.className;
				if (!isMobile && itemHoverAble) {
					if (flag == 'prev' || flag == 'next') {
						$list._transition({translate3dX: 0}, aniOption.peep);
					}
				}
			}

			function buttonClick() {
				var flag = this.className;
				if (flag == 'back') {
					backToItemList();
				}
				return false;
			}

			function playMovie() {
				if (MAINSTYLE.isSmallSize) {
					window.open(this.href);
				} else {
					movieURL = this.href;
					$movieBack.appendTo($box)
						._animate({opacity: 0.8}, {queue: false, duration: 500, easing: 'easeOutQuad', complete: playMovieStep2});
					MAINSTYLE.smoothScrollTop(0, 500);
				}
				return false;
			}

			function playMovieStep2() {
				$movie.html('<iframe src="about:blank" frameborder="0" allowfullscreen="true" title=""></iframe>')
					.appendTo($box)
					.find('iframe')
					.load(playMovieStep3)
					.attr('src', MAINSTYLE.toEmbedURL(movieURL, true));
				resizeMovie();
			}

			function playMovieStep3() {
				if (supportTransform) {
					$movieCloseButton._css({opacity: 1, translateX: 100, rotate: 0})
						.appendTo($box)
						._animate({translateX: 0, rotate: -360}, {queue: false, duration: 750, delay: 350, easing: 'easeOutBack'});
				} else {
					$movieCloseButton._css({opacity: 0})
						.appendTo($box)
						._animate({opacity: 1}, {queue: false, duration: 300, easing: 'easeOutQuad'});
				}
			}

			function closeMovie() {
				$movieBack._animate({opacity: 0}, {queue: false, duration: 300, easing: 'easeOutQuad', complete: MAINSTYLE.removeme});
				$movieCloseButton._animate({opacity: 0}, {queue: false, duration: 300, easing: 'easeOutQuad', complete: MAINSTYLE.removeme});
				$movie.detach();
				movieURL = '';
				return false;
			}

			function resizeMovie() {
				var areaHeight = MAINSTYLE.areaHeight-MAINSTYLE.headerHeight,
					videoWidth = MAINSTYLE.areaWidth-200,
					videoHeight = videoWidth/16*9;
				if (videoHeight > areaHeight-100) {
					videoHeight = areaHeight-100;
					videoWidth = videoHeight/9*16;
				}
				$movie.css({width: videoWidth, height: videoHeight, marginLeft: -videoWidth/2, marginTop: -videoHeight/2});
			}

			function discoverMore() {
				MAINSTYLE.smoothScrollTop(MAINSTYLE.areaHeight);
				return false;
			}

			function moreHover() {
				$moreArrows[0]._stop()._css({opacity: 1, translate3dY: 0})._animate({opacity: 0, translate3dY: 28}, aniOption.down);
				$moreArrows[1]._stop()._css({opacity: 0, translate3dY: 0})._animate({opacity: 1, translate3dY: 38}, aniOption.down);
			}

			function moreLeave() {
				$moreArrows[0]._stop()._css({opacity: 0, translate3dY: -38})._animate({opacity: 1, translate3dY: 0}, aniOption.down);
				$moreArrows[1]._stop()._css({opacity: 1, translate3dY: 38})._animate({opacity: 0, translate3dY: 66}, aniOption.down);
			}

			function resize(onlySetTitle) {

				var listWidth = MAINSTYLE.areaWidth,
					listHeight = MAINSTYLE.areaHeight-MAINSTYLE.headerHeight;

				$list.css('height', listHeight);

				if (canceled) {
					return false;
				}

				contentWidth = MAINSTYLE.content.getContentWidth();
				eachWidth = Math.ceil(contentWidth/max);
				peepWidth = (/^(notebook|tablet|mobile)$/).test(MAINSTYLE.sizeMode) ? 50 : 80;

				isSliderMode = expandedIndex > -1 || (/^(notebook|tablet|mobile)$/).test(MAINSTYLE.sizeMode);
				if (isSliderMode) {
					$fake.stop()._stop();
					expandedIndex = Math.max(expandedIndex, 0);
					if(!sliderAdded) {
						sliderAdded = true;
						onItemExpanded(true);
						sliderOption.defaultPage = expandedIndex;
						slider = $list.xlider(sliderOption);
					}
				}

				if (sliderAdded) {
					for (i = 0; i < max; i++) {
						$items[i].css({position: 'absolute', width: '100%'});
						$titles[i].css({position: '', left: '', width: '', margin: ''});
						$bars[i].css('display', 'none');
						$covers[i] && $covers[i]._fill();
					}
				} else {
					for (i = 0; i < max; i++) {
						$items[i].css({position: 'absolute', display: 'block'});
						if (onlySetTitle !== true) {
							$items[i].css({left: eachWidth*i, width: eachWidth+1});
						}
						$inBoxs[i].css({marginTop: listHeight/2, marginLeft: 30, marginRight: 30});
						$titles[i].css({position: 'relative', left: '50%', width: eachWidth-60, marginLeft: -(eachWidth-60)/2});
					}
				}

				if (movieURL) {
					if (MAINSTYLE.isSmallSize) {
						closeMovie();
					} else {
						resizeMovie();
					}
				}

			}

			return {
				resize: resize
			}

		}

	},

	scroll: function(v, maxv) {
		var controls = MAINSTYLE.index.controls,
			key;
		for (key in controls) {
			controls[key].scroll && controls[key].scroll(v);
		}
	},

	resize: function() {
		for (var key in MAINSTYLE.index.controls) {
			MAINSTYLE.index.controls[key] && MAINSTYLE.index.controls[key].resize();
		}
	},

	initialize: function() {
		var $articles = $('#sec-main > [class^="article"]');
		$articles.each(function() {
			var flag = this.className.replace('article-', '');
			MAINSTYLE.index.controls[flag] = MAINSTYLE.index.modules[flag]($(this));
		});
	}

}