/**
 * mainVisual
 * requires : jquery(ver1.4.4) 
 */


/*-------------------------------------------------------------------

  constructer

-------------------------------------------------------------------*/
function MainVisual(){
	/* FIXED_VALUE */
	this.XML_PATH = '/xml/top.xml';
	this.SLIDE = 'slide';
	this.SLIDE_WIDTH = 460;
	this.SLIDE_HEIGHT = 345;
	this.THUMBNAIL = 'thumbnail';
	this.THUMBNAIL_WIDTH = 220;
	this.THUMBNAIL_HEIGHT = 180;
	this.BANNER = 'banner';
	this.BANNER_WIDTH = 220;
	this.BANNER_HEIGHT = 84;
	
	/* VARIABLES */
	this.currentPage;	
	this.displayMode;
	this.xmldata;				
	this.itemNum;
	this.loadedCounter = 0;
	this.slideImages = [];
	this.thumbnailImages = [];
	this.bannerImages = [];
	this.tbOpne = thickBoxOpen;
	this.tbChange = thickBoxChange;
	
	/* INITIALIZE */
	this.init();
}

function thickBoxChange(){
	flg = false;
}

function thickBoxOpen(){
	setInit();
}



/*-------------------------------------------------------------------

  METHODS

-------------------------------------------------------------------*/
MainVisual.prototype = {
	
	//INITIALIZE
	init : function(){
		var scope  = this;
		scope.currentPage = scope.getCurrentPage();
		scope.displayMode = scope.getDsiplayMode();
		
		//set loading animation
		$("div#slideWrap").append("<div id='loading'></div>");
		$("#loading").css({
			width:'462px',
			height:'410px',
			background : 'url("/images/works/loading.gif") no-repeat center center' 
		});
		
		//load XML
		$.ajax({
		    url: this.XML_PATH,
		    type: 'GET',
		    dataType: 'xml',
			cache : false,
		    timeout: 10000,
		    error: function() {scope.onError();},
			success: function(xml) {scope.parseXML(xml);}
		});
	},
	
	//ERROR
	onError : function(){
		alert('Error');
	},
	
	//PARSE_XML
	parseXML : function(xml){
		var scope  = this;
		this.xmldata = xml;
		this.itemNum = $(this.xmldata).find('item').length;
		//load image
		$(this.xmldata).find('item').each(function(){
			scope.loadImage(scope.SLIDE, $('slide', this).text(), $('href', this).text(), $('target', this).text(), $('title', this).text());
			scope.loadImage(scope.THUMBNAIL, $('thumbnail', this).text(), $('href', this).text(), $('target', this).text(), $('title', this).text());
			scope.loadImage(scope.BANNER, $('banner', this).text(), $('href', this).text(), $('target', this).text(), $('title', this).text());
		})
	},
	
	//LOAD_IMAGE
	loadImage : function(type, src, href, target, alt){
		var scope  = this;
		var imgTag = $('<img />').attr({
			src : src+'?'+ new Date().getTime(),	//for IE
      		width : this.getWidth(type),
      		height : this.getHeight(type),
      		alt : alt
		}).load(function() {
			++scope.loadedCounter;	
			//all image loaded
			if(scope.loadedCounter == scope.itemNum * 3){
				$("#loading").fadeOut(1000);
				scope.show(1000);	//show contents			
			};
		});
		//regist imageData
		var imgArray = this.getImages(type);
		if(imgArray.length == 0)imgArray.push([]);
		if(imgArray[imgArray.length-1].length > scope.getPageNum(type))
		{
			imgArray.push([]);
		}
		imgArray[imgArray.length-1].push($('<li></li>')
				.addClass(type)
				.append($($('<a href="'+href+'"></a>'))
					.append($(imgTag)
					.click(function(){scope.tbOpne();}))
				)
		);
	},
	
	//SHOW 
	show : function(delayedTime){
		var scope  = this;
		scope.tbChange();
		var wrapper = $('#slideWrap').append('<ul></ul>');
		var images = scope.getImages(scope.displayMode);		
		for(var i = 0; i < images[scope.currentPage].length; i++)
		{
			var elem = images[scope.currentPage][i];
			$(wrapper).find('ul').append(
				$(elem)
				.attr('id', i)
				.css('opacity' ,'0')
				.delay(delayedTime + 100 * i)
				.animate({opacity:'1.0'} ,800 ,'easeOutQuad',function(){
					var img = $(this).find('img');
					$(img).mouseover(function(){
						$(img).stop().animate({opacity:'0.7'} ,250 ,'easeOutQuad');
					})
					.mouseout(function(){
						$(img).stop().animate({opacity:'1.0'} ,250 ,'easeOutQuad');
					})
					//wait for fadeIn
					if($(this).attr('id') == images[scope.currentPage].length - 1)
					{
						if(images.length-1 > 0)
						{
							scope.setPrevBtn();
							scope.setNextBtn();
							$('#next').animate({opacity:'0.5'} ,1000 ,'easeOutQuad');
							$('#prev').animate({opacity:'0.5'} ,1000 ,'easeOutQuad');
						}
						scope.setDisplaymodeBtn();
					}
					$(this).removeAttr('id');
				})
			)	
		};
	},
	
	//UPDATE
	update : function(){
		var scope  = this;
		var wrapper = $('#slideWrap').append('<ul></ul>');
		var images = scope.getImages(scope.displayMode);	
		scope.tbChange();
		for(var i = 0; i < images[scope.currentPage].length; i++)
		{
			var elem = images[scope.currentPage][i];
			$(wrapper).find('ul').append(
				$(elem)
				.attr('id', i)
				.css('opacity' ,'0')
				.delay(100 + 100 * i)
				.animate({opacity:'1.0'} ,800 ,'easeOutQuad',function(){
					var img = $(this).find('img');
					$(img).mouseover(function(){
						$(img).stop().animate({opacity:'0.7'} ,250 ,'easeOutQuad');
					})
					.mouseout(function(){
						$(img).stop().animate({opacity:'1.0'} ,250 ,'easeOutQuad');
					});
					if($(this).attr('id') == images[scope.currentPage].length - 1)
					{
						if(images.length-1 > 0)
						{
							scope.bindPrevEvent();
							scope.bindNextEvent();		
						}
					}
					$(this).removeAttr('id');
				})
			)	
		};
		scope.unbindPrevEvent();
		scope.unbindNextEvent();
	},
		
	//REMOVE
	remove : function(){
		var scope  = this;
		$('#slideWrap')
		.find('ul').stop()
		.animate({opacity:'0.0'} ,300 ,'easeOutQuad',function(){
					$(this).remove();
					scope.update();		
				});
	},	
	
	//CHANGE
	change : function(){
		var scope  = this;
		scope.resetPrevBtn();
		scope.resetNextBtn();
		scope.unbindDisplayEvent();
		$('#slideWrap')
		.find('ul').stop()
		.animate({opacity:'0.0'} ,300 ,'easeOutQuad',function(){
					$(this).remove();
					scope.show(100);		
				});
			
	},	
	
	//PREVIOUS
	previous : function(){
		var scope = this;
		var max = scope.getImages(scope.displayMode).length - 1;
		scope.currentPage = (scope.currentPage > 0)? --scope.currentPage : max ;
		scope.setCurrentPage(scope.currentPage);
		scope.remove();
	},	
	
	//NEXT
	next : function(){
		var scope = this;
		var max = scope.getImages(scope.displayMode).length - 1;
		scope.currentPage = (scope.currentPage < max)? ++scope.currentPage : 0 ;
		scope.setCurrentPage(scope.currentPage);
		scope.remove();
	},	
	
	//PREVIOUS_BUTTON 
	setPrevBtn:function(){
		var scope  = this;
		$('#mainVisual').append(
			$('<p id="prev"></p>').css({
				opacity: '0',
				cursor: 'pointer'
			})
		);
		scope.bindPrevEvent();
	},
	resetPrevBtn:function(){
		var scope  = this;
		$('p#prev')
		.animate({opacity:'0.0'} ,300 ,'easeOutQuad',function(){
			$(this).remove();		
		});
		scope.unbindPrevEvent();	
	},
	bindPrevEvent:function(){
		var scope  = this;
		$('p#prev')
		.click(function(){
			$(this).stop().animate({opacity:'0.8'} ,250 ,'easeOutQuad');
			scope.previous();
		})
		.mouseover(function(){
			$(this).stop().animate({opacity:'1.0'} ,250 ,'easeOutQuad');
		})
		.mouseout(function(){
			$(this).stop().animate({opacity:'0.8'} ,250 ,'easeOutQuad');
		});
	},
	unbindPrevEvent:function(){		
		$('p#prev').unbind('click').unbind('mouseover').unbind('mouseout');
	},
	
	
	//NEXT_BUTTON
	setNextBtn:function(){
		var scope  = this;
		$('#mainVisual').append(
			$('<p id="next"></p>').css({
				opacity: '0',
				cursor: 'pointer'
			})
		);
		scope.bindNextEvent();
	},
	resetNextBtn:function(){
		var scope  = this;
		$('p#next')
		.animate({opacity:'0.0'} ,300 ,'easeOutQuad',function(){
			$(this).remove();		
		});	
		scope.unbindNextEvent();	
	},	
	bindNextEvent:function(){
		var scope  = this;
		$('p#next')
		.click(function(){
			$(this).stop().animate({opacity:'0.8'} ,250 ,'easeOutQuad');
			scope.next();
		})
		.mouseover(function(){
			$(this).stop().animate({opacity:'1.0'} ,250 ,'easeOutQuad');
		})
		.mouseout(function(){
			$(this).stop().animate({opacity:'0.8'} ,250 ,'easeOutQuad');
		});
	},
	unbindNextEvent:function(){
		$('p#next').unbind('click').unbind('mouseover').unbind('mouseout');
	},
	
	//DISPLAYMODE_BUTTON
	setDisplaymodeBtn:function(){
		var scope  = this;
		scope.bindDisplayEvent();
	},
	bindDisplayEvent:function(){
		var scope  = this;
		$('#mainVisualNav li')
		.click(function(){
			var displayMode = scope.getDsiplayMode();
			if($(this).attr('class') != displayMode)
			{
				scope.setDsiplayMode($(this).attr('class'));
				scope.setCurrentPage(0);
				scope.change();	
			}
		})
	},
	unbindDisplayEvent:function(){
		$('#mainVisualNav li').unbind('click');
	},
	
	/* setter */
	setCurrentPage:function(value){
		this.currentPage = value;
		$.cookie('currentPage', value, { expires: 1 });
	},
	setDsiplayMode:function(value){
		var scope = this;
		if(this.displayMode != value)
		{
			this.displayMode = value;
			$.cookie('displayMode', value, { expires: 1 });
			$("#mainVisualNav li").each(function(){
				if(scope.displayMode == $(this).attr('class')){
					var overImage = $($(this).find('img')).attr('src').split('.')[0]+ '_over'+'.gif'; 
					$($(this).find('img')).attr('src', overImage);
				}else{
					var outImage;
					if($($(this).find('img')).attr('src').split('_over').length > 1)
					{
						outImage = 	$($(this).find('img')).attr('src').split('_over')[0] + '.gif';	 
					}else{
						outImage = $($(this).find('img')).attr('src');
					};
					$($(this).find('img')).attr('src', outImage);
				};
			});	
		}
	},
	
	/* getter */
	getWidth:function(type){
		var w;
		switch (type) 
		{
			case this.SLIDE:
			w = this.SLIDE_WIDTH;
			break;
			
			case this.THUMBNAIL:
			w = this.THUMBNAIL_WIDTH;
			break;
			
			case this.BANNER:
			w = this.BANNER_WIDTH;
			break;
		}
		return w;
	},
	getHeight:function(type){
		var h;
		switch (type) 
		{
			case this.SLIDE:
			h = this.SLIDE_HEIGHT;
			break;
			
			case this.THUMBNAIL:
			h = this.THUMBNAIL_HEIGHT;
			break;
			
			case this.BANNER:
			h = this.BANNER_HEIGHT;
			break;
		}
		return h;
	},
	getImages:function(type){
		var arr;
		switch (type) 
		{			
			case this.SLIDE:
			arr = this.slideImages;
			break;
			
			case this.THUMBNAIL:
			arr = this.thumbnailImages;
			break;
			
			case this.BANNER:
			arr = this.bannerImages;
			break;
		}
		return arr;
	},
	getPageNum:function(type){
		var num;
		switch (type) 
		{
			case this.SLIDE:
			num = 0;
			break;
			
			case this.THUMBNAIL:
			num = 3;
			break;
			
			case this.BANNER:
			num = 7;
			break;
		}
		return num;
	},
	getCurrentPage:function(){
		var currentPage;
		currentPage = ($.cookie('currentPage') == null)? 0 : $.cookie('currentPage') ;
		this.setCurrentPage(currentPage);
		return currentPage;
	},
	getDsiplayMode:function(){
		var displayMode;
		displayMode = ($.cookie('displayMode') == null)? this.THUMBNAIL : $.cookie('displayMode') ;
		this.setDsiplayMode(displayMode);
		return displayMode;
	}
}


/*-------------------------------------------------------------------

  MAKE_INSTANCE

-------------------------------------------------------------------*/
$(function(){
	new MainVisual();
});