/* Copyright (c) 2000-2011 Synology Inc. All rights reserved. */
var SYNOWeb = {};
SYNOWeb.DivRotation = {};
SYNOWeb.DivRotation.DivList=['div_a', 'div_b', 'div_c', 'div_d', 'div_e', 'div_f', 'div_g', 'div_h', 'div_i'];
SYNOWeb.DivRotation.FadeSpeed = 5; // The rate of animation
SYNOWeb.DivRotation.FadeChange = 3; // The size of increments between animate steps
SYNOWeb.DivRotation.ChangeInterval = 7; // Every 5 seconds change a picture
SYNOWeb.DivRotation.RandomFirstDiv = 1; // Set to 1 if you want to show random div
SYNOWeb.DivRotation.DivPrev = null;
SYNOWeb.DivRotation.Timer = null; /* Main slideshow timer */
SYNOWeb.DivRotation.TimerFadeIn = null;
SYNOWeb.DivRotation.TimerFadeOut = null;

SYNOWeb.DivRotation.SetOpacity = function(obj, opacity)
{
	// Fix for math error in some browsers
	opacity = (opacity == 100)?99.999:opacity;
	// IE/Windows
	obj.style.filter = "alpha(opacity:"+opacity+")";
	// Safari < 1.2, Konqueror
	obj.style.KHTMLOpacity = opacity/100;	
	// Older Mozilla and Firefox
	obj.style.MozOpacity = opacity/100;
	// Safari 1.2, newer Firefox and Mozilla, CSS3
	obj.style.opacity = opacity/100;

	if (opacity === 0) {
		obj.style.visibility = 'visible';
	}
};

/* Gradually increase the opacity of the obj
 * opacity: starting opacity of element
 * change: the size of the increments between steps
 * speed: the rate of the animation	
 */
SYNOWeb.DivRotation.FadeIn = function(id, opacity, change, speed)
{
	var  obj = document.getElementById(id);
	
	// We don't use "alpha(opacity)" here because some
	// pictures might have "white spot" in the black area
	// of the picture
	if (-1 != navigator.userAgent.indexOf('MSIE')) {
		obj.style.filter="blendTrans(duration=0.5)";
		// Make sure the filter is not playing.
		if (obj.filters.blendTrans.status != 2) {
			obj.filters.blendTrans.apply();
			obj.style.visibility="visible";
			obj.filters.blendTrans.play();
		}
	} else {
		if (opacity <= 100) {
			this.SetOpacity(obj, opacity);
			opacity += change;
			SYNOWeb.DivRotation.TimerFadeIn = setTimeout('SYNOWeb.DivRotation.FadeIn("'+obj.id+'", '+opacity+', '+change+', '+speed+')', speed);
		} else {
			this.SetOpacity(obj, 100);
		}
	}
};
/* Gradually decrease the opacity of the obj
 * opacity: starting opacity of element
 * change: the size of the increments between steps
 * speed: the rate of the animation	
 */
SYNOWeb.DivRotation.FadeOut = function(id, opacity, change, speed)
{
	var  obj = document.getElementById(id);
	
	if (opacity > 0) {
		this.SetOpacity(obj, opacity);
		opacity -= change;
		SYNOWeb.DivRotation.TimerFadeOut = setTimeout('SYNOWeb.DivRotation.FadeOut("'+obj.id+'", '+opacity+', '+change+', '+speed+')', speed);
	} else {
		this.SetOpacity(obj, 0);
		obj.style.visibility = 'hidden';
	}
};

SYNOWeb.DivRotation.GetPageX = function(el)
{
	var Firefox = document.getElementById && !document.all;
	var offsetParent = el;
	var n = 0;
	while (offsetParent !== null && offsetParent !== document.body) {
		n += offsetParent.offsetLeft;
		if (!Firefox) {
			parseInt(offsetParent.currentStyle.borderLeftWidth, 10)>0?n+=parseInt(offsetParent.currentStyle.borderLeftWidth, 10):"";
		}
		offsetParent=offsetParent.offsetParent;
	}        
	return n;
};

SYNOWeb.DivRotation.GetPageY = function(el) {             
	var Firefox = document.getElementById && !document.all;
	var offsetParent = el;
	var n = 0;
	while (offsetParent !== null && offsetParent !== document.body) {
		n += offsetParent.offsetTop;
		if (!Firefox) {
			parseInt(offsetParent.currentStyle.borderTopWidth, 10)>0?n+=parseInt(offsetParent.currentStyle.borderTopWidth, 10):"";
		}
		offsetParent=offsetParent.offsetParent;
	}
	return n;
};

SYNOWeb.DivRotation.IsSlideShowRunning = function() {
	if (SYNOWeb.DivRotation.Timer) {
		return true;
	} else {
		return false;
	}
};

/* Stop/Start slideshow.*/
SYNOWeb.DivRotation.SlideShowRun = function(run) {
	var div_pause_play = document.getElementById('slideshow_control_pp');
	if (run) {
		if (SYNOWeb.DivRotation.Timer) {
			return;
		}
		SYNOWeb.DivRotation.PhotoSlideStart(0, true);
		div_pause_play.innerHTML = '<img border="0" src="images/pause.gif" width="14" height="14">';
	} else {
		if (!SYNOWeb.DivRotation.Timer) {
			return;
		}
		clearTimeout(SYNOWeb.DivRotation.Timer);
		SYNOWeb.DivRotation.Timer = null;
		div_pause_play.innerHTML = '<img border="0" src="images/play.gif" width="14" height="14">';
	}
};

SYNOWeb.DivRotation.PhotoSlideStart = function(idx, slideshow)
{
	var div_curr;
	var i;
	var div_controls = document.getElementById('slideshow_controls');
	if (!div_controls) {
		div_controls = document.createElement('DIV');
		div_controls.id = 'slideshow_controls';
		div_controls.style.position = 'absolute';
		document.body.appendChild(div_controls);

		var control_onclick = function() {
			/* Stop slideshow */
			if (SYNOWeb.DivRotation.IsSlideShowRunning()) {
				SYNOWeb.DivRotation.SlideShowRun(false);
			}

			/* Stop all fading actions */
			if (SYNOWeb.DivRotation.TimerFadeIn) {
				clearTimeout(SYNOWeb.DivRotation.TimerFadeIn);
				SYNOWeb.DivRotation.TimerFadeIn = null;
			}
			if (SYNOWeb.DivRotation.TimerFadeOut) {
				clearTimeout(SYNOWeb.DivRotation.TimerFadeOut);
				SYNOWeb.DivRotation.TimerFadeOut = null;
			}

			/* Find current idx and fadeout all divs */
			var curr = this.id.substr(8);// 8='control_'
			var curr_idx;
			for (i = 0; i < SYNOWeb.DivRotation.DivList.length; i++) {
				if (SYNOWeb.DivRotation.DivList[i] == curr) {
					curr_idx = i;
				}
				SYNOWeb.DivRotation.FadeOut(SYNOWeb.DivRotation.DivList[i], 0, 0, 0);
			}

			/* Show new div */
			SYNOWeb.DivRotation.PhotoSlideStart(curr_idx, false);
		};

		/* Create the control div buttons */
		for (i = 0; i < SYNOWeb.DivRotation.DivList.length; i++) {
			var div = document.createElement('DIV');
			div.id = 'control_'+SYNOWeb.DivRotation.DivList[i];
			div_controls.appendChild(div);
			//div.innerHTML = i+1;
			div.innerHTML = '';
			div.className = 'slideshow_control';
			div.onclick = control_onclick;
		}

		/* Create play/pause button */
		var div_pause_play;
		div_pause_play = document.createElement('DIV');
		div_pause_play.id = 'slideshow_control_pp';
		div_controls.appendChild(div_pause_play);
		div_pause_play.innerHTML = '<img border="0" src="images/pause.gif" width="14" height="14">';
		div_pause_play.className = 'slideshow_control';
		div_pause_play.onclick = function() {
			if (SYNOWeb.DivRotation.IsSlideShowRunning()) {
				SYNOWeb.DivRotation.SlideShowRun(false);
			} else {
				SYNOWeb.DivRotation.SlideShowRun(true);
			}
		};
		
	}

	/* When not specify the div, random get one */
	if (idx < 0) {
		if (SYNOWeb.DivRotation.RandomFirstDiv) {
			idx = Math.floor(Math.random()*this.DivList.length);
		} else {
			idx = 0;
		}
	}

	/* Fade out previous div */
	if (this.DivPrev) {
		if (this.DivPrev.id != this.DivList[idx]) {
			this.FadeOut(this.DivPrev.id, 100, this.FadeChange, this.FadeSpeed);
		}
		
	}

	/* Fade in current div */
	div_curr = document.getElementById(this.DivList[idx]);
	this.FadeIn(div_curr.id, 0, this.FadeChange, this.FadeSpeed);

	/* Re-position the control buttons because not all div has the same size. */
	if (div_controls) {
		div_controls.style.top = SYNOWeb.DivRotation.GetPageY(div_curr) + parseInt(div_curr.offsetHeight, 10) - 50 + 'px';
		div_controls.style.left = SYNOWeb.DivRotation.GetPageX(div_curr) + 50 + 'px';
		div_controls.style.visibility = 'visible';
		div_controls.style.zindex='10000';

		if (this.DivPrev) {
			var div_prev_ctrl = document.getElementById('control_'+this.DivPrev.id);
			div_prev_ctrl.className = "slideshow_control";
		}
		var div_curr_ctrl = document.getElementById('control_'+this.DivList[idx]);
		div_curr_ctrl.className = "slideshow_control slideshow_control_active";
	}
	
	this.DivPrev = div_curr;
	if (slideshow) {
		SYNOWeb.DivRotation.Timer = setTimeout("SYNOWeb.DivRotation.PhotoSlideStart("+((idx+1) % this.DivList.length)+", "+slideshow+");", this.ChangeInterval * 1000);
	}
};