/*
* @author unchar
*/
(function($) {
	var _path = "/en/common/";
	var _currentName = "product";
	var _container;
	var _visual;
	var _currentIcon = -1;
	var _totalSize;
	var _interval;

	$(function(){
		init();
	});

	function init(){
		xmlLoad();
	}

	function xmlLoad(){
		var xmlURL = _path + 'xml/visual.xml';

		$.get(xmlURL, function(data) {
			_data = data;

			_totalSize = $($(data).find('data').find(_currentName).find('image')).length;

			create();
			addEvent();
		});
	}

	function create(){
		_container = document.createElement('div');
		$container = $(_container);
		$container.addClass('visual_div');
		//$(document.body).append($container);
		$(".mVisualArea").append($container);

		_visual = document.createElement('div');
		$visual = $(_visual);
		$visual.addClass('visual');
		$container.append($visual);

		var box = document.createElement('div');
		$box = $(box);
		$box.addClass('visual_box');
		$box.attr('id', 'box');
		$visual.append($box);

		var boxImg = document.createElement('img');
		$boxImg = $(boxImg);
		$boxImg.attr('src', _path + 'images/visual/box.png');
		$box.append($boxImg);

		//--//

		var orangeCompany = document.createElement('div');
		$orangeCompany = $(orangeCompany);
		$orangeCompany.attr('id', 'orangeCompany');
		$orangeCompany.css({'position':'absolute', 'left':'588px', 'top':'148px', 'z-index':-10});
		$visual.append($orangeCompany);

		var orangeImage = document.createElement('img');
		$orangeImage = $(orangeImage);
		$orangeImage.attr('src', _path + 'images/visual/company_orange.png');
		$orangeCompany.append($orangeImage);

		//--//

		var orangeProduct = document.createElement('div');
		$orangeProduct = $(orangeProduct);
		$orangeProduct.attr('id', 'orangeProduct');
		$orangeProduct.css('position', 'absolute');
		$orangeProduct.css('left', '131px');
		$orangeProduct.css('top', '148px');
		$visual.append($orangeProduct);

		var orangeImage2 = document.createElement('img');
		$orangeImage2 = $(orangeImage2);
		$orangeImage2.attr('src', _path + 'images/visual/product_orange.png');
		$orangeProduct.append($orangeImage2);

		//--//

		var grayProduct = document.createElement('div');
		$grayProduct = $(grayProduct);
		$grayProduct.attr('id', 'grayProduct');
		$grayProduct.css('position', 'absolute');
		$grayProduct.css('left', '200px');
		$grayProduct.css('top', '162px');
		$grayProduct.css('text-align', 'right');
		$grayProduct.css('z-index', -10);
		$visual.append($grayProduct);

		$grayProduct.click(function(){
			onProductClick();
		});

		var grayImage = document.createElement('img');
		$grayImage = $(grayImage);
		$grayImage.attr('src', _path + 'images/visual/product_gray.png');
		$grayProduct.append($grayImage);

		//--//

		var grayCompany = document.createElement('div');
		$grayCompany = $(grayCompany);
		$grayCompany.attr('id', 'grayCompany');
		$grayCompany.css('position', 'absolute');
		$grayCompany.css('left', '747px');
		$grayCompany.css('top', '162px');
		$grayCompany.css('z-index', -10);
		$visual.append($grayCompany);

		$grayCompany.click(function(){
			onCompanyClick();
		});

		var grayImage2 = document.createElement('img');
		$grayImage2 = $(grayImage2);
		$grayImage2.attr('src', _path + 'images/visual/company_gray.png');
		$grayCompany.append($grayImage2);

		createContents();
	}

	function createButton(){
		var buttonDiv = document.createElement('div');
		$buttonDiv = $(buttonDiv);

		var outDiv = document.createElement('div');
	}

	function addEvent(){
		$(window).resize(function(){
			resizeEvent();
		});
		resizeEvent();
	}

	function resizeEvent(){
		$(_container).css('width',$(document.body).innerWidth());
	}

	// product
	function onProductClick(){
		var orangeCompany = $('#orangeCompany');
		$orangeCompany = $(orangeCompany);

		var orangeProduct = $('#orangeProduct');
		$orangeProduct = $(orangeProduct);

		var grayProduct = $('#grayProduct');
		$grayProduct = $(grayProduct);

		var grayCompany = $('#grayCompany');
		$grayCompany = $(grayCompany);

		$orangeCompany.stop();
		$orangeCompany.animate({left:'778px'}, 400, 'easeInCubic', function(){
			$this = $(this);
			$this.css('z-index', -10);
			$this.animate({left:'600px'}, 400, 'easeOutCubic');
			$grayProduct.stop();
			$grayProduct.animate({left:'200px'}, 400, 'easeOutCubic', nextMove);
		});

		function nextMove(){
			$orangeProduct.animate({left:'10px'}, 400, 'easeInCubic', function(){
				$orangeProduct.css('z-index', 0);
				$orangeProduct.animate({left:'131px'}, 400, 'easeOutCubic');
				$grayCompany.stop();
				$grayCompany.animate({left:'747px'}, 400, 'easeOutCubic');

				createIconContainer();
			});
		}

		_currentName = "product";
		resetContents();
	}

	// company
	function onCompanyClick(){
		var orangeCompany = $('#orangeCompany');
		$orangeCompany = $(orangeCompany);

		var orangeProduct = $('#orangeProduct');
		$orangeProduct = $(orangeProduct);

		var grayProduct = $('#grayProduct');
		$grayProduct = $(grayProduct);

		var grayCompany = $('#grayCompany');
		$grayCompany = $(grayCompany);

		$orangeProduct.stop();
		$orangeProduct.animate({left:'10px'}, 400, 'easeInCubic', function(){
			$this = $(this);
			$this.css('z-index', -10);
			$this.animate({left:'200px'}, 400, 'easeOutCubic');
			$grayCompany.stop();
			$grayCompany.animate({left:'600px'}, 400, 'easeOutCubic', nextMove);
		});

		function nextMove(){
			$orangeCompany.animate({left:'778px'}, 400, 'easeInCubic', function(){
				$orangeCompany.css('z-index', 0);
				$orangeCompany.animate({left:'662px'}, 400, 'easeOutCubic');
				$grayProduct.stop();
				$grayProduct.animate({left:'88px'}, 400, 'easeOutCubic');

				createIconContainer();
			});
		}

		_currentName = "company";
		resetContents();
	}

	function resetContents(){
		var $image = $('#image');
		$image.animate({'opacity':0}, 400, 'easeOutCubic');

		var $backImage = $('#backImage');
		$backImage.css({'opacity':0});

		if(_totalSize > 0){
			var $iconContainer = $('#iconContainer');
			$iconContainer.remove();

			var $iconContainer = $(document.createElement('div'));
			$iconContainer.attr('id', 'iconContainer');
			$iconContainer.addClass('visual_contents');

			$iconContainer.css({'opacity':0});
			$iconContainer.stop();
			$iconContainer.animate({opacity:1}, 1000, 'easeOutCubic');
			$('#contents').append($iconContainer);
		}

		_totalSize = $($(_data).find('data').find(_currentName).find('image')).length;
	}

	// contents
	function createContents(){
		var $box = $('#box');

		var $contents = $(document.createElement('div'));
		$contents.attr('id', 'contents');
		$contents.addClass('visual_contents');
		$box.append($contents);

		var $backDiv = $(document.createElement('div'));
		$backDiv.css({'position':'absolute','padding':'8px 0 0 1px'}); //img
		$contents.append($backDiv);

		var $backImage = $(document.createElement('img'));
		$backImage.attr('id', 'backImage');
		if(!$backImage.attr('src')) $backImage.attr('src', _path + 'images/visual/white.png');
		$backDiv.append($backImage);

		var $imageDiv = $(document.createElement('div'));
		$imageDiv.css({'position':'absolute','padding':'8px 0 0 1px'}); //img
		$contents.append($imageDiv);
		$imageDiv.click(function(){
			onImageClick();
		});

		var $image = $(document.createElement('img'));
		$image.attr('id', 'image');
		if(!$image.attr('src')) $image.attr('src', _path + 'images/visual/white.png');
		$imageDiv.append($image);

		var $iconContainer = $(document.createElement('div'));
		$iconContainer.attr('id', 'iconContainer');
		$iconContainer.addClass('visual_contents');

		$iconContainer.css('opacity', 0);
		$iconContainer.stop();
		$iconContainer.animate({opacity:1}, 1000, 'easeOutCubic');
		$contents.append($iconContainer);

		createIconContainer();
	}

	function createIconContainer(){
		var $iconContainer = $('#iconContainer');

		var offsetLeft = 301 - _totalSize * 24 / 2 - 15;

		for(var i=0; i<_totalSize; i++){
			if(_totalSize != 1){
				var $icon = $(createIcon());
				$icon.attr('id', 'icon' + i);
				var leftPos = offsetLeft + i * 24 + 'px';
				$icon.css({'left':leftPos, 'top':'315px', 'z-index':999});

				$icon.click(function(){
					var name = $(this).attr('id');
					var id = name.substr(4,1);
					onIconClick(id);
				});

				$iconContainer.append($icon);
			}
		}

		_currentIcon = -1;

		var i = 0;
		if (_interval)
		{
			clearInterval( _interval );
		}
		onIconClick(i++);

		if( _totalSize > 1 )
		{
			i = 0;
			_interval = setInterval(function(){
				if( i == _totalSize )
				{
					i = 0;
				}
				onIconClick(i++);
			}, 3000);
		}
	}

	function createIcon(){
		var $icon = $(document.createElement('div'));
		$icon.css('position', 'absolute');
		$icon.css('width', '30px');
		$icon.css('height', '30px');
		$icon.attr('class', 'icon');

		var $outDiv = $(document.createElement('div'));
		$outDiv.css('position', 'absolute');
		$outDiv.css('left', '10px');
		$outDiv.css('top', '10px');
		$icon.append($outDiv);

		var $outImage = $(document.createElement('img'));
		$outImage.attr('src', _path + 'images/visual/out.png');
		$outDiv.append($outImage);

		var $overDiv = $(document.createElement('div'));
		$overDiv.css('position', 'absolute');
		$overDiv.css('left', '10px');
		$overDiv.css('top', '10px');
		$overDiv.css('opacity', 0);
		$overDiv.attr('class', 'overDiv');
		$icon.append($overDiv);

		var $overImage = $(document.createElement('img'));
		$overImage.attr('src', _path + 'images/visual/over.png');
		$overDiv.append($overImage);

		return $icon;
	}

	function onIconClick(id){

		if(id == _currentIcon) return;

		if(_currentIcon >= 0){
			var $outIcon = $('div.overDiv').eq(_currentIcon);
			$outIcon.stop();
			$outIcon.animate({opacity:0}, 400, 'easeOutCubic');

			var backImageUrl = $($(_data).find('data').find(_currentName).find('image')[_currentIcon]).attr('url');
			var $backImage = $('#backImage');
			$backImage.attr('src', _path + backImageUrl);

			$backImage.load(function(){
				$backImage.stop();
				$backImage.css('opacity',1);
			});
		}

		_currentIcon = id;

		var $overIcon = $('div.overDiv').eq(_currentIcon);
		$overIcon.stop();
		$overIcon.animate({opacity:1}, 400, 'easeOutCubic');

		var $image = $('#image');
		$image.stop();
		$image.css('opacity', 0);
		var imageUrl = $($(_data).find('data').find(_currentName).find('image')[_currentIcon]).attr('url');
		$image.attr('src', _path + imageUrl);

		$image.load(function(){
			$image.stop();
			$image.animate({opacity:1}, 800, 'easeOutCubic');
		});
	}


	//link
	function onImageClick(){
		if(_currentIcon < 0) return;

		var url = $($(_data).find('data').find(_currentName).find('image')[_currentIcon]).attr('link');
		var target = $($(_data).find('data').find(_currentName).find('image')[_currentIcon]).attr('target');

		window.open(url, target);
	}

})(jQuery)