// JavaScript Document

(function(func) {
	try {
		window.addEventListener("load", func, false);
	} catch(e) {
		window.attachEvent("onload", func);
	}
})(function() {
	
	var XML_URL = "common/xml/topView.xml";
	jQuery.ajax({  
		url: XML_URL,  
		type: 'GET', 
		dataType: 'xml',
		cache : false,
		timeout: 5000,  
		error: function(){  
			//alert(XML_URL);
		},  
		success: function(xml){
			viewer.init(xml);
		}
	});	
});

var thisImg;
var thisIcon;
var timeout;
var timer;

var viewer = {
	init:function(xml)
	{
		var objArray = [];
		var count = 0;
		$(xml).find("item").each(function()
		{
			objArray.push(viewer.getXMLData($(this)));
		})
		
		timer = Number($(xml).find("contents").attr("timer"))*1000;
		
		var tag = viewer.createTag(objArray);
		$("#topView").prepend(tag);
		
		thisImg = $("#imageArea li").eq(0);
		thisImg.fadeIn(1000,"easeOutSine");
		
		thisIcon = $("#iconArea li").eq(0);
		thisIcon.find("img").attr("src",thisIcon.find("img").attr("src").replace("_normal","_active"))
		
		timeout = setTimeout(function()
		{
			var nextImg = (thisImg.next().html() != null)? thisImg.next():$("#imageArea li").eq(0);
			var nextIcon = (thisIcon.next().html() != null)? thisIcon.next():$("#iconArea li").eq(0);
			viewer.fadeImage(nextImg,nextIcon);
		},timer);
		
		$("#iconArea li").click(function()
		{
			if(thisImg.index() == $(this).index()) return false;
			clearTimeout(timeout);
			var nextImg = $("#imageArea li").eq($(this).index());
			var nextIcon = $("#iconArea li").eq($(this).index());
			viewer.fadeImage(nextImg,nextIcon);
		});
		
	},
	
	getXMLData:function(xml)
	{
		var obj = new Object();
		obj.image = jQuery(xml).text();
		obj.link = jQuery(xml).attr("link");
		obj.target = jQuery(xml).attr("target");
		
		return obj;
	},
	
	createTag:function(objArray)
	{
		var str = '<ul id="imageArea">';
		for(var i = 0; i < objArray.length; i++)
		{
			str += '<li><a href="'+objArray[i].link+'" target="'+objArray[i].target+'"><img src="'+objArray[i].image+'" alt=""></a></li>'
		}
		str += '</ul><ul id="iconArea">'
		
		for(var j in objArray)
		{
			str += '<li><img src="common/img/top/icon_topView_normal.png" alt="" /></li>'
		}		
		str += '</ul>'
		
		return str;
	},
	
	fadeImage:function(nextImg,nextIcon)
	{
		$("#iconArea li").unbind("click");
		
		thisImg.addClass("depth1");
		thisImg.fadeOut(1000,"easeOutSine",function()
		{
			$("#imageArea li").removeClass("depth1");
			$("#imageArea li").removeClass("depth0");
			
			$("#iconArea li").click(function()
			{
				if(thisImg.index() == $(this).index()) return false;
				clearTimeout(timeout);
				var nextImg = $("#imageArea li").eq($(this).index());
				var nextIcon = $("#iconArea li").eq($(this).index());
				viewer.fadeImage(nextImg,nextIcon);
			});
		});
		thisImg = nextImg;
		thisImg.addClass("depth0");
		thisImg.show();
		
		thisIcon.find("img").attr("src",thisIcon.find("img").attr("src").replace("_active","_normal"))
		thisIcon = nextIcon;
		thisIcon.find("img").attr("src",thisIcon.find("img").attr("src").replace("_normal","_active"))
		
		timeout = setTimeout(function()
		{
			var nextImg = (thisImg.next().html() != null)? thisImg.next():$("#imageArea li").eq(0);
			var nextIcon = (thisIcon.next().html() != null)? thisIcon.next():$("#iconArea li").eq(0);
			viewer.fadeImage(nextImg,nextIcon);
		},timer);
	}
}