$(function()
{
	$('#promo_area').empty();
});

$(document).ready(function()
{
	$('#promo_area').append(
		$('<div id="promo_frame" />'),
		$('<div id="promo_content" />').append(
			$('<div id="promo_content_inner" />')
		),
		$('<div id="promo_menu" />').append(
			$('<div id="promo_menu_inner" />')
		)
	);
	$('#promo_area').promo();
});

$(window).bind('load', function() {
	jQuery.fn.starInterval();
});

(function($)
{
	$.fn.promo = function()
	{
		var _wait = 5;

		var _this = this;
		var _promo = $('#promo_area');
		var _frame = $('#promo_frame');
		var _content = $('#promo_content_inner');
		var _menu = $('#promo_menu_inner');
		var _selectedIcon = '';
		var _jsonPath = '/get/promo/';

		var _preloaderCnt = 0;
		var _preloaderInt = 0;
		var _imgLength = 0;
		var _timerCnt = 0;
		var _timerInt = 0;
		var _selected = 1;

		this.init = function()
		{
			_menu.focus().css('outline', 0);
			var data = _this.json.data;
			var s_add = '<div id="promo_selected">&nbsp;</div><ul>';
			var l_add = '<ul>';
			for (var i = 0; i < data.length; i ++)
			{
				var id = data[i].id;
				var add = i != 0 ? '_line' : '';
				s_add += '<li><img src="' + data[i].image_s + '" width="215" height="69" id="promo_s_' + i + '" class="promo_s_img' + add + '" /></li>';
				l_add += '<li><img src="' + data[i].image_l + '" width="720" height="310" id="promo_l_' + i + '" class="promo_l_img" /></li>';
			}
			s_add += '</ul>';
			l_add += '</ul>';
			_menu.append($(s_add));
			_content.append($(l_add));
			_selectedIcon = $('#promo_selected');
			_selectedIcon.css('marginTop', '-9px');
			_imgLength = $('#promo_content img').length - 1;
			$('img.promo_l_img').hide();

			$('.promo_s_img_line, .promo_s_img').click(
				function(){
					var id = Number($(this).attr('id').replace('promo_s_', '')) + 1;
					_selected = id;
					clearInterval(_timerInt);
					_timerInt = 0;
					_content.stop().animate({marginTop: -(310 * id) + 310}, 750, 'easeInOutCubic', _this.setInterval);
					_this.moveSelected();
				}
			).hover(
				function(){
					$(this).fadeTo(150, .5)
				},
				function(){
					$(this).fadeTo(150, 1)
				}
			);
			$('.promo_l_img').click(
				function(){
					var id = $(this).attr('id').replace('promo_l_', '');
					window.open(data[id].path, '_' + data[id].target);
					return false;
				}
			).hover(
				function(){
					$(this).fadeTo(150, .8)
				},
				function(){
					$(this).fadeTo(150, 1)
				}
			);
		}
		jQuery.fn.starInterval = function()
		{
			_preloaderInt = setInterval(_this.preloader, 500);
		}
		this.setInterval = function()
		{
			_timerInt = setInterval(_this.move, _wait * 1000);
		}
		this.move = function()
		{
			clearInterval(_timerInt);
			_timerInt = 0;
			_selected ++;
			_selected = _selected > _imgLength + 1 ? 1 : _selected;
			_content.animate({marginTop: -(310*_selected)+310}, 750, 'easeInOutCubic', _this.setInterval);
			_this.moveSelected();
		}
		this.moveSelected = function()
		{
			_selectedIcon.stop().animate({marginTop: Math.floor(((_selected-1)*70)+((70/2)-(9/2)))}, 750, 'easeOutElastic');
			_menu.data('jsp').scrollTo(0, 70*(_selected-1));
		}
		this.preloader = function()
		{
			if (_preloaderCnt >= _imgLength)
			{
				clearInterval(_preloaderInt);
				_this.setInterval();
				_this.moveSelected();
			}
			$('#promo_l_' + _preloaderCnt).fadeIn(500, _this.loaded);
			_preloaderCnt ++;
		}
		this.loaded = function()
		{
			$(this).parent().css('backgroundImage', 'none')
		}
		this.frame = function()
		{
			var pos = ['lt', 'rt', 'rb', 'lb'];
			var add = '';
			for (var i = 0; i < pos.length; i ++)
			{
				add += '<div id="promo_corner_' + pos[i] + '" class="corner">&nbsp;</div>';
			}
			_frame.append($(add));
		}
		function _getJson()
		{
			$.getJSON(_jsonPath, function(data){
				_this.json = data;
				_this.init();
				_menu.jScrollPane();
			});
		}
		_this.frame();
		_getJson();
	};
})(jQuery);