//====================================DOMUtil=================================================

function DOMUtil() {
} 

DOMUtil.hasClass = function(elemt, className) {
	var reg = new RegExp('(^|\\s+)' + className + '(\\s+|$)') ;
	return reg.test(elemt['className']) ;
} ;

DOMUtil.findDescendantsByClass = function(root, elementName, clazz) {
  var elements = root.getElementsByTagName(elementName) ;
  var ln = elements.length ;
  var list = [] ;
  for (var k = 0; k < ln; k++) { 
  	if (DOMUtil.hasClass(elements[k], clazz)) list.push(elements[k]) ;
  }
  return list ;
} ;

DOMUtil.findFirstDescendantByClass = function(root, elementName, clazz) {
  if (!root) return null;
  var elements = root.getElementsByTagName(elementName) ;
  var ln = elements.length ;	
  for (var k = 0; k < ln; k++) {  	  	
  	if (DOMUtil.hasClass(elements[k], clazz)) return elements[k] ;  
  }
  return null;
} ;

DOMUtil.getStyle = function(element, style, intValue) {
	var result = null;
	if (!element) return null;
	if (element.style[style]) {
		result = element.style[style] ;
	}	else if (element.currentStyle) {
		result = element.currentStyle[style] ;
	}	else if (document.defaultView && document.defaultView.getComputedStyle) {
		style = style.replace(/([A-Z])/g, "-$1") ;
		style = style.toLowerCase() ;
		var s = document.defaultView.getComputedStyle(element, "") ;
		result = s && s.getPropertyValue(style) ;
	}
	if (intValue && result) {
		var intRes = Number(result.match(/\d+/)) ;
		if(!isNaN(intRes)) result = intRes ;
	}
	return result ;
} ;

DOMUtil.findAncestorByClass = function(element, clazz) {
  if(element == null) return null ;
  var parent = element.parentNode ;
  while (parent != null) {
  	if (DOMUtil.hasClass(parent, clazz)) return parent ;
    parent = parent.parentNode ;
  }
  return null ;
} ;

//============================================Album Plugin=======================================

AlbumPlugin = {
	'instances' : {},
	'album': 0,
	rand: function(id) {
		return id + '-' + new Date().getTime() + Math.random();
	},  
	Alpha: {
		set: function(e, a, s) {
			var o = e.style.opacity,
			d = a > o * 100 ? 1 : -1;
			e.style.opacity = o;
			clearInterval(e.ai);
			e.ai = setInterval(function () {
				AlbumPlugin.Alpha.tw(e, a, d, s);
			}, 20);
		},
		tw: function(e, a, d, s) {
			var o = Math.round(e.style.opacity * 100);
			if (o == a) {
				clearInterval(e.ai);
			} else {
				var n = o + Math.ceil(Math.abs(a - o) / s) * d;
				e.style.opacity = n / 100;
				e.style.filter = 'alpha(opacity=' + n + ')';
			}
		}
	}
}

AlbumPlugin.loadAlbum = function(url, target, option, callback) {
	var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : window.ActiveXObject ? ActiveXObject("Microsoft.XMLHTTP") : null;
	if (!xhr) {
		alert("Your browser have been disable javascript");
		return;
	};
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4) {
			if (xhr.status == 200) {
				for (var i = 0; i < callback.length; ++i) {
					callback[i](url, target, option, xhr.responseXML.documentElement);
				}
			} else {
				alert("Problem retrieving XML data:" + objXML.statusText);
			}
		}
	}
	xhr.open("GET", url, true);
	xhr.send(null);
};

AlbumPlugin.i2a = function(image) {
	var album = image.getAttribute("album");
	var height = image.getAttribute("iheight");
	var width = image.getAttribute("iwidth");
	var oDiv = document.createElement("div");
	oDiv.id = "AtoZ" + album;
	oDiv.style.margin = "auto";
	oDiv.style.border = "solid 1px #c7c7c7";
	oDiv.style.overFlow = "hidden";
	oDiv.style.padding = "5px";
	image.parentNode.replaceChild(oDiv, image);
	var url = "http://atoz.com.vn/rs/albumxml/album_" + album + ".xml?r=" + new Date().getTime();
	AlbumPlugin.loadAlbum(url, oDiv, [AlbumPlugin.renderSlideShow]);
};

AlbumPlugin.renderSlideShow = function(url, container, option, responseXML) {
	
	var photos = responseXML.getElementsByTagName("Photo");
	var imgSource = [], photo;
	var strHTML = '<div class="PreLoad" style="height: 0px; overflow: hidden">';
	for (var i = 0; i < photos.length; i++) {
		photo = photos[i];
		imgSource.push({
			'index': 'Ảnh ' + new Number(i + 1) + '/' + photos.length,
			'desc':	photo.getAttribute("Name"),
			'src': photo.getAttribute("URL")
		});
		strHTML			+= '<img src='+photo.getAttribute("URL")+' alt='+photo.getAttribute("Name")+'/>';
	}
	
	strHTML 	 	 	+=	'</div>';
	strHTML 	 	 	+=	'<div class="WrapperContainer">';
	strHTML 		 	+=		'<div class="FullSize">';
	strHTML 		 	+=			'<div class="ActiveImage"></div>';
	strHTML 		 	+=			'<div class="Thumbnails">';
	strHTML 		 	+=				'<div class="SlideArea">';
	strHTML 		 	+=					'<div class="Slider"></div>';
	strHTML 		 	+=				'</div>';
	strHTML 		 	+=			'</div>';
	strHTML 		 	+=		'</div>';
	strHTML 		 	+=		'<div class="Information">';
	strHTML 		 	+=			'<div class="ControlSlide" style="float:right;">';
	strHTML 		 	+=				'<div class="SlideMaximize" title="Slide Maximize"></div>';		
	strHTML 		 	+=				'<div class="ControlSlideRight" title="Slide Right"></div>';		
	strHTML 		 	+=				'<div class="ControlSlideCenter ControlSlidePause" isplay="true" title="Pause"></div>';		
	strHTML 		 	+=				'<div class="ControlSlideLeft" title="Slide Left"></div>';		
	strHTML 		 	+=			'</div>';
	strHTML 		 	+=			'<h3 class="IndexImage"></h3>';		
	strHTML 		 	+=			'<div style="clear:right;"><span style="display:none;"></span></div>';		
	strHTML 		 	+=			'<div class="DescImage"></div>';	
	strHTML 		 	+=		'</div>';	
	strHTML	 		 	+=	'</div>';
	
	//render slideshow
	var frag = document.createElement("div");
	frag.innerHTML = strHTML;
	while (frag.firstChild) {
		container.appendChild(frag.firstChild);
	}
	AlbumPlugin.instances[container.id] = new SlideShow(url, container.id, option, imgSource);
};
//================================== Slide Show ==============================================
function SlideShow(url, id, option, source) {
	this.source = source;
	this.id = id;
	this.url = url;
	
	this.auto = true;
	this.c = 0;
	this.spacing = option.spacing || 5;
	this.opacity = option.opacity || 70;
	this.active = "#fff";
	this.letter	= "#000";
	this.width = option.width || 590;
	this.maxWidth = option.maxWidth || 72;
	this.height = option.height ||  300;
	this.maxHeight = option.maxHeight || 430;
	this.hasRun = false;
	this.init(id, url);
};

SlideShow.prototype.init = function(id, url) {
	var container = document.getElementById(id);
	if (this.id.indexOf("MaskLayer") > -1) {
		container.style.width = this.maxWidth + "%";
	} else {
		container.style.width = this.width + "px";
	}
	var wrapperContainer	= DOMUtil.findFirstDescendantByClass(container, "div", "WrapperContainer");
	var imgActive			= DOMUtil.findFirstDescendantByClass(wrapperContainer, "div", "ActiveImage");
	this.imgActive			= imgActive.id = AlbumPlugin.rand('ActiveImage');
	var imgInfo				= DOMUtil.findFirstDescendantByClass(wrapperContainer, "div", "Information");
	this.imgInfo			= imgInfo.id = AlbumPlugin.rand('Information');
	var thumbs				= DOMUtil.findFirstDescendantByClass(wrapperContainer, "div", "Slider");
	this.thumbs				= thumbs.id = AlbumPlugin.rand('Slider');
	var Self = this, width, height;
	var playImage = DOMUtil.findFirstDescendantByClass(imgInfo, "div", "ControlSlideCenter");		
	for (var i = 0 ; i < Self.source.length; ++i) {
		var ghostImg = new Image();
		ghostImg.src = Self.source[i].src;
		width = ghostImg.width || 40;
		height = ghostImg.height || 40;
		var img = new Image(Math.round(width * (40 / height)), 40);
		img.src = ghostImg.src;
		if (thumbs) {
			thumbs.appendChild(img);
			img.style.marginRight = Self.spacing + "px";
			img.style.opacity 	= Self.opacity/100;
			img.style.filter 		= 'alpha(opacity=' + Self.opacity + ')';
			img.onmouseover 	= function() {
				AlbumPlugin.Alpha.set(this, 100, 5);
			}
			img.onmouseout 	= function() {
				AlbumPlugin.Alpha.set(this, Self.opacity, 5);
			}
			img.indexImg = i;
			img.onclick  = function() {
				Self.pr(this.indexImg, 1);
				Self.auto = false;
				playImage.className = "ControlSlideCenter";
			};
		}
	}
	
	var preImage = DOMUtil.findFirstDescendantByClass(imgInfo, "div", "ControlSlideLeft");		
	preImage.onclick = function(){
		Self.mv(-1, 1);
		Self.auto = false;
		playImage.className = "ControlSlideCenter";
	};
	
	var nextImage = DOMUtil.findFirstDescendantByClass(imgInfo, "div", "ControlSlideRight");		
	nextImage.onclick = function() {
		Self.mv(1, 1);	
		Self.auto = false;		
		playImage.className = "ControlSlideCenter";
	};

	playImage.onclick = function() {
		if(Self.auto) {
			Self.auto = false;
			this.title = "Pause";
			this.className = "ControlSlideCenter";
			Self.mv(0, 1);
		} else {
			Self.auto = true;
			this.title = "Play";
			this.className = "ControlSlideCenter ControlSlidePause";
			Self.mv(1, 0);
		}
	};

	var mxImage = DOMUtil.findFirstDescendantByClass(imgInfo, "div", "SlideMaximize");		
	mxImage.onclick = function() {
		Self.mx(container, 70);
	};
	Self.auto ? Self.is(0, 0) : Self.is(0, 1);
};

SlideShow.prototype.mv = function(d, c) {
	if(this.lt) clearTimeout(this.lt);
	if(this.at) clearTimeout(this.at);
	var t = this.c + d;
	if( t < 0) {
		this.c = t = this.source.length - 1;
	} else if(t > (this.source.length - 1)) {
		t = 0;
	} else {
		t = t;
	}
    this.pr(t, c);
};

SlideShow.prototype.pr = function(t, c) {
	clearTimeout(this.lt);
    if (c) {
        clearTimeout(this.at);
    }
    this.c = t;
    this.is(t, c);
};

SlideShow.prototype.is = function(s, c) {
	var Self = this;
	var oImg =  Self.source[s];
	var image = new Image();
	image.src  = oImg.src;
	image.style.opacity = 0;
   	image.style.filter = 'alpha(opacity=0)';
	
	if (Self.thumbs) {
		var thumbs = document.getElementById(Self.thumbs);
		if (!thumbs) return;
		var imgList = thumbs.getElementsByTagName("img");
		var ln = imgList.length;
		var thumb, slide, marginLeft,
			container = document.getElementById(Self.id),
			containerWidth = container.clientWidth;
			paddingWidth = parseFloat(DOMUtil.getStyle(container, 'padding'))
		for (var i = 0; i < ln; i++) {
			thumb = imgList[i];
			thumb.style.borderColor = ""; 
			if (i == s) {
				thumb.style.borderColor = Self.active; 
				slide = thumb.parentNode;
				marginLeft = parseFloat(DOMUtil.getStyle(slide, 'margin-left')) || 0;
				if (i == 0) {
					slide.style.marginLeft = "0px";
				} else {
					while (thumb.offsetLeft + thumb.offsetWidth + Self.spacing > containerWidth - 2 * paddingWidth) {
						-- marginLeft;
						slide.style.marginLeft = marginLeft + "px";
					} 
					while (thumb.offsetLeft < 3) {
						++ marginLeft;
						slide.style.marginLeft = marginLeft + "px";
					}
				}
			}
		}
	}
	
	image.onload = function() {
		if (!Self.hasRun) Self.le(s, c);
	}
	setTimeout(function(){Self.le(s, c);}, 128);
};

SlideShow.prototype.le = function(s, c) {
	var Self = this;
	var image = new Image();
	image.src = Self.source[Self.c].src;
	if (Self.id.indexOf("MaskLayer") > -1) {
		image.style.height = Self.maxHeight + "px";
	} else {
		image.style.height = Self.height + "px";
	}
	image.style.opacity = 0;
	image.style.filter = 'alpha(opacity=0)';
	
	var imgActive = document.getElementById(Self.imgActive);
	imgActive.appendChild(image);
	Self.hasRun = true;
	
	AlbumPlugin.Alpha.set(image, 100, 10);
	
	var n = Self.nf(s);
	Self.lt = setTimeout(function() { n; }, 1*1000);
	if (!c) {
		Self.at = setTimeout(function() {Self.mv(1, 0);}, 1*3000);
	}
	//remove firstChild;
	while (imgActive.childNodes.length > 1) {
		imgActive.removeChild(imgActive.firstChild);
	}
};

SlideShow.prototype.nf = function(s) {
	var imgInfo = document.getElementById(this.imgInfo);
	if (imgInfo) {
        var oImg = this.source[s];
		var indexImg = DOMUtil.findFirstDescendantByClass(imgInfo, "h3", "IndexImage");
		while(indexImg.firstChild){
			indexImg.removeChild(indexImg.firstChild);
		}
		indexImg.appendChild(document.createTextNode(oImg.index));
		var descImage = DOMUtil.findFirstDescendantByClass(imgInfo, "div", "DescImage");
		while(descImage.firstChild){
			descImage.removeChild(descImage.firstChild);
		}
		descImage.appendChild(document.createTextNode(oImg.desc));
	}
};

SlideShow.prototype.rm = function() {
	if(this.lt) clearTimeout(this.lt);
	if(this.at) clearTimeout(this.at);
	var id = this.id;
	var container = document.getElementById(id);
	if (container && container.parentNode) {
		container.parentNode.removeChild(container);
	}
	AlbumPlugin.instances[id] = null;
	delete AlbumPlugin.instances[id];
};

SlideShow.prototype.mx = function(container, opacity) {
	var maskLayer = document.createElement("div");
	if(document.getElementById("MaskLayer")) {
		document.body.removeChild(document.getElementById("MaskLayer"));
	}
	var marginTop = 28;
	document.body.appendChild(maskLayer);
	maskLayer.id = "MaskLayer" ;
	maskLayer.style.width = "100%";
	var h = Math.max(
		document.body.scrollHeight,
		document.documentElement.scrollHeight,
		document.body.offsetHeight,
		document.documentElement.offsetHeight
	);
	maskLayer.style.height = h + "px";
	maskLayer.style.top = "0px" ;
	maskLayer.style.left = "0px" ;
	maskLayer.style.position = "absolute";
	maskLayer.style.background = "#000";
	maskLayer.style.zIndex = 400 ;
	maskLayer.style.opacity =  opacity/100;
	maskLayer.style.filter =  "alpha(opacity=" + opacity + ")";	
	
	var topLine = document.createElement("div");
	topLine.style.width = "100%";
	topLine.style.top = "0px" ;
	topLine.style.left = "0px" ;
	topLine.style.height = "0px";
	topLine.style.zIndex = 500 ;
	topLine.style.position = "absolute";
	
	var objectSlide = document.createElement("div");
	objectSlide.id = "MaskLayer-" + container.id;
	objectSlide.style.margin = "auto";
	objectSlide.style.border = "solid 1px #c7c7c7";
	objectSlide.style.overFlow = "hidden";
	objectSlide.style.padding = "5px";
	objectSlide.style.background = "#fff";
	objectSlide.style.marginTop = marginTop + "px";
	
	topLine.appendChild(objectSlide);
	document.body.appendChild(topLine);
	var Self = this;
	AlbumPlugin.loadAlbum(
		Self.url,
		objectSlide,
		{},
		[
			AlbumPlugin.renderSlideShow,
			function(url, container, xmlhttp) {
				var wrapper = DOMUtil.findFirstDescendantByClass(container, "div", "WrapperContainer");
				wrapper.style.width = "auto";
				var activeImage = DOMUtil.findFirstDescendantByClass(container, "div", "ActiveImage");
				activeImage.style.height = "430px";
				var buttonMaximize = DOMUtil.findFirstDescendantByClass(container, "div", "SlideMaximize");
				if (buttonMaximize) {
					buttonMaximize.className = "RemoveAlbum";
					buttonMaximize.title = "Close Album";
					buttonMaximize.onclick = function() {
						document.body.removeChild(document.getElementById("MaskLayer"));
						var topLine = container.parentNode;
						AlbumPlugin.instances[container.id].rm();
						document.body.removeChild(topLine);
					}
				}
				container.scrollIntoView(true);
			}
		]
	);
};