/*
	GSlide class
	design by http://www.goragod.com (goragod wiriya)
	17-11-52
*/

GbtnSlide = GClass.create();
GbtnSlide.prototype = {
	initialize: function(div, options) {
		this.options = {
			buttonClass: 'button',
			loadingClass: 'loading',
			slideTime: 10000,
			target: '_blank',
			loop: true
		};
		for(var property in options) {
			this.options[property] = options[property];
		};
		// พื้นที่แสดง link
		this.button = $E(div);
		this.button.className = this.options.buttonClass;
		this.button.style.zIndex = 204;
		// พื้นที่แสดงผล
		this.container = $G(this.button.parentNode);
		size = this.container.getDimensions();
		this.width = size.width;
		this.height = size.height;
		// link สำหรับรูปภาพ
		var a = document.createElement('a');
		a.href = 'index.php';
		a.target = this.options.target;
		this.container.insert(a);
		this.link = $G(a);
		var loading = document.createElement('div');
		loading.style.left = '0px';
		loading.style.top = '0px';
		loading.style.width = this.width + 'px';
		loading.style.height = this.height + 'px';
		loading.style.position = 'absolute';
		loading.className = this.options.loadingClass;
		loading.style.zIndex = 203;
		this.link.insert(loading);
		this.loading = $G(loading);
		// img สำหรับแสดงผลรูปภาพ
		var img = document.createElement('img');
		img.src = 'blank.gif';
		img.style.position = 'absolute';
		img.style.left = '-10000px';
		this.link.insert(img);
		this.img1 = img;
		var img = document.createElement('img');
		img.src = 'blank.gif';
		img.style.position = 'absolute';
		img.style.left = '-10000px';
		this.link.insert(img);
		this.img2 = img;
		this.currImg = this.img2;
		// แอเรย์เก็บข้อมูลรูปภาพ
		this.datas = new Array();
		// รูปภาพที่กำลังแสดง
		this.currentId = -1;
	},

	add: function(picture, detail, url, width, height) {
		var i = this.datas.length;
		var obj = new Object();
		obj.picture = picture;
		obj.detail = detail;
		obj.url = url;
		obj.width = width;
		obj.height = height;
		this.datas.push(obj);
		var a = document.createElement('a');
		a.href = 'javascript:void(0)';
		a.innerHTML = i + 1;
		a.rel = i;
		var Hinstance = this;
		a.onclick = function(){
			window.clearTimeout(Hinstance.SlideTime);
			Hinstance._show(this.rel);
			return false;
		};
		this.button.appendChild(a);
	},

	playSlideShow: function() {
		var temp = this;
		nextslide = function() {
			var next = temp.currentId + 1;
			if ( next >= temp.datas.length && temp.options.loop ) {
				next = 0;
			};
			if (next < temp.datas.length && $E(temp.container.id)){
				temp._show(next);
				if(temp.datas.length > 1){
					temp.SlideTime = window.setTimeout(nextslide, temp.options.slideTime);
				};
			};
		};
		nextslide();
	},

	_show: function(id) {
		if (this.datas[id]) {
			this.currentId = id;
			this.loading.style.display = 'block';
			var temp = this;
			new preload(this.datas[id].picture, function(){
				temp.loading.style.display = 'none';
				temp.currImg = temp.currImg == temp.img2 ? temp.img1: temp.img2;
				var old = temp.currImg == temp.img2 ? temp.img1: temp.img2;
				temp._resizeImage(temp.currImg, id);
				new GFade(temp.currImg).play({'onComplete':function() {
					temp.link.set('href', temp.datas[id].url.replace('&amp;', '&'));
					temp._setButton(id);
				}});
				new GFade(old).play({'from':100,'to':0});
				temp.currImg.style.zIndex = 1;
				old.style.zIndex = 0;
			});
		};
	},

	_resizeImage: function(img, id) {
		img.src = this.datas[id].picture;
		var w = this.datas[id].width;
		var h = this.datas[id].height;
		if (w >= h){
			if(w > this.width){
				var nw = this.width;
				var nh = (this.width * h) / w;
			}else if (h > this.height){
				var nh = this.height;
				var nw = (this.height * w) / h;
			}else{
				var nh = h;
				var nw = w;
			};
		}else{
			if (h > this.height){
				var nh = this.height;
				var nw = (this.height * w) / h;
			}else if(w > this.width){
				var nw = this.width;
				var nh = (this.width * h) / w;
			}else{
				var nh = h;
				var nw = w;
			};
		};
		img.style.width = nw + 'px';
		img.style.height = nh + 'px';
		img.style.top	= ((this.height - nh) / 2) + 'px';
		img.style.left	= ((this.width - nw) / 2) + 'px';
	},

	_setButton: function(id){
		forEach(this.button.getElementsByTagName('a'), function(item){
			item.className = item.rel == id ? 'current' : '';
		});
	}
}