﻿function setIpadArtsNav(obj)
{
	//var xmlPath = lang + '/images/swf/nav_artwalk_inside.xml';
	var xmlPath = obj.xmlPath;
	var imgPath = obj.imagePath;
	
	var container = d.getElementById('ipadArtsNav');
	var arrowL = getElementsByClassName(container, 'arrow_left')[0];
	var arrowR = getElementsByClassName(container, 'arrow_right')[0];
	var mask = getElementsByClassName(container, 'sliderMask')[0];
	var content = d.getElementById('artSlider');
	var artNavScollbar;
	var totalW;
	var self = this;
	
	this.init = function()
	{
		$.ajax(
		{
			url:xmlPath,
			dataType:'xml',
			cache:false,
			async:false,
			success: function(data)
			{
				var images = data.getElementsByTagName('image');
				for (var i=0; i<images.length; i++)
				{
					self.genSingleNav(images[i], i);
				}
				
				//Set Width
				totalW = (58 + 2 + 12) * images.length;
				content.style.width = totalW + 'px';
				
				self.xmlDone();
			},
			error:function(e)
			{
				//alert(e);
			}
		});
	};
	
	this.xmlDone = function()
	{
		arrowL.onclick = function()
		{
			self.scrollTo(72);
		};
		arrowR.onclick = function()
		{
			self.scrollTo(-72);
		};
		
		setTimeout(function()
		{
			totalW -= mask.offsetWidth;
			artNavScollbar = new iScroll('artSlider', {vScrollbar:false});
		}, 500);
	};
	
	this.genSingleNav = function(data, i)
	{
		var title = data.getAttribute('title').toString();
		var thumb = data.getAttribute('thmb').toString();
		//var mapthumb = data.getAttribute('mapthumb').toString();
		var link = data.getAttribute('Link').toString();
		
		var a = createA(link, '');
		
		var span = d.createElement('span');
		span.innerHTML = addZero(i + 1);
		a.appendChild(span);
		
		var img = createImg(imgPath + thumb, title, 58, 48);
		a.appendChild(img);
		
		content.appendChild(a);
	};
	
	this.scrollTo = function(num)
	{
		//alert(content.style.cssText);
		var x = content.style.webkitTransform.toString().replace('translate3d(', '');
		var array = x.split('px,');
		x = Number(array[0]);
		x += num;
		
		if (x >= 0)			x = 0;
		if (x <= -totalW)	x = -totalW;
		 
		artNavScollbar.scrollTo(x, 0, 300);
	};
	
	this.init();
}

function setIpadArtsGallery(obj)
{
	var xmlPath = obj.xmlPath + 'galleryphoto.xml';
	var imgPath = obj.imagePath;
	
	var container = d.getElementById('ipadArtsGallery');
	var arrowL = getElementsByClassName(container, 'arrow_left')[0];
	var arrowR = getElementsByClassName(container, 'arrow_right')[0];
	var mask = getElementsByClassName(container, 'galleryThumbnailsMask')[0];
	var content = d.getElementById('gallerySlider');
	var photoContainer = d.getElementById('galleryPhotoContainer');
	var caption = d.getElementById('galleryCaption');
	
	var artNavScollbar;
	var totalH;
	var navList = new Array();
	var navSection;
	var imgArray;
	var curIndex = 0;
	var section;
	var total;
	var isReady = true;
	var self = this;
	
	this.init = function()
	{
		$.ajax(
		{
			url:xmlPath,
			dataType:'xml',
			cache:false,
			async:false,
			success: function(data)
			{
				var images = data.getElementsByTagName('photo');
				for (var i=0; i<images.length; i++)
				{
					self.genSingleNav(images[i], i);
				}
				
				//Set Width
				totalH = (64 + 3) * Math.ceil(images.length / 5);
				content.style.height = totalH + 'px';
				
				self.xmlDone();
			},
			error:function(e)
			{
				//alert(e);
			}
		});
	};
	
	this.xmlDone = function()
	{
		arrowL.onclick = function()
		{
			if (!isReady)	return;
			self.changeNextPhoto(-1);
		};
		arrowR.onclick = function()
		{
			if (!isReady)	return;
			self.changeNextPhoto(1);
		};
		
		setTimeout(function()
		{
			totalH -= mask.offsetHeight;
			artNavScollbar = new iScroll('gallerySlider', {hScrollbar:false});
		}, 500);
		
		this.changePhotoGroup(navList[0]);
		
		new detectTouch(photoContainer, 
		{
			min_move_x: 50,
			wipeLeft: function(x) {self.touchMove('L');},
			wipeRight: function(x) {self.touchMove('R');},
			min_move_y: 20,
			wipeTop: function(y) {},
			wipeBottom: function(y) {},
			preventDefaultEvents: true
		});
	};
	
	this.touchMove = function(dir)
	{
		if (!isReady)	return;
		var num = (dir == 'L')?	1:-1;
		this.changeNextPhoto(num);
	};
	
	this.genSingleNav = function(data, i)
	{
		var title = data.getAttribute('title').toString();
		var thumb = data.getAttribute('thmb').toString();
		var author = data.getAttribute('author').toString();
		var imgs = data.getElementsByTagName('img');
		
		var a = createA('javascript:;');
		a.num = i;
		a.title = title;
		a.author = author;
		a.imgs = imgs;
		
		var span = d.createElement('span');
		a.appendChild(span);
		
		var img = createImg(imgPath + thumb, title, 64, 64);
		a.appendChild(img);
		
		a.onclick = function()
		{
			if (a.num == navSection)	return;
			if (!isReady)				return;
			self.changePhotoGroup(this);
		};
		
		content.appendChild(a);
		navList.push(a);
	};
	
	this.changePhotoGroup = function(btn)
	{
		imgArray = btn.imgs;
		total = imgArray.length;
		
		if (!isNaN(navSection))	var highlightNav = navList[navSection];
		btn.className += ' active';
		if (highlightNav)	highlightNav.className = highlightNav.className.replace(/active/g, '');
		navSection = btn.num;
		
		//Change Caption
		caption.innerHTML = '';
		
		var span = d.createElement('span');
		span.className = 'bold';
		span.innerHTML = addZero(btn.num + 1);
		caption.appendChild(span);
		
		caption.innerHTML += ' ' + btn.title;
		
		var span = d.createElement('span');
		span.className = 'stroke';
		span.innerHTML = '|';
		caption.appendChild(span);
		
		var span = d.createElement('span');
		span.className = 'smaller';
		span.innerHTML = btn.author;
		caption.appendChild(span);
		
		$(caption).css({'opacity':0});
		$(caption).animate({'opacity':1}, 300);
		
		this.changePhoto(0);
	};
	
	this.changeNextPhoto = function(index)
	{
		curIndex = section;
		curIndex += index;
		if (curIndex < 0)
		{
			curIndex = 0;
			return;
		}
		if (curIndex >= total)
		{
			curIndex = total - 1;
			return;
		}
		
		this.changePhoto(curIndex);
	};
	
	this.changePhoto = function(num)
	{
		isReady = false;
		
		var src = imgPath + imgArray[num].firstChild.nodeValue.toString();
		var img = createImg(src);
		
		if (photoContainer.img)
		{
			$(photoContainer.img).animate({'opacity':0}, 200, function()
			{
				if (photoContainer.img)	photoContainer.removeChild(photoContainer.img);
				
				fadeIn();
			});
		}
		else
		{
			fadeIn();
		}
		
		function fadeIn()
		{
			photoContainer.appendChild(img);
			photoContainer.img = img;
			
			$(img).css({'opacity':0});
			$(img).animate({'opacity':1}, 300);
			
			isReady = true;
		}
		
		if (num == 0)
		{
			arrowL.className += ' dim';
			arrowR.className = arrowR.className.replace(/dim/g, '');
		}
		else if (num == total - 1)
		{
			arrowL.className = arrowL.className.replace(/dim/g, '');
			arrowR.className += ' dim';
		}
		else
		{
			arrowL.className = arrowL.className.replace(/dim/g, '');
			arrowR.className = arrowR.className.replace(/dim/g, '');
		}
		
		section = num;
	};
	
	this.init();
}
