// Basic Element Animator (21-December-2008) DRAFT
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With three types of progression 'sin' and 'cos' and liner.

// **** Application Notes

// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'.
//
// The element would normally be assigned a unique ID name.
//

// **** Executing the Effect(Script)
//
// The effect is executed by an event call to function 'zxcBAnimator('left','tst1',20,260,2000);'
// where:
// parameter 0 = the mode(see Note 1).                                                                     (string)
// parameter 1 = the unique ID name or element object.                                                     (string or element object)
// parameter 2 = the start position of the effect.                                                         (digits, for opacity minimum 0, maximum 100)
// parameter 3 = the finish position of the effect.                                                        (digits, for opacity minimum 0, maximum 100)
// parameter 4 = (optional) period of time between the start and finish of the effect in milliseconds.     (digits or defaults to 2000 milliSeconds)
//
//  Note 1:  The default units(excepting opacity) are 'px'.
//  Note 2:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
//           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
//  Note 3:  To 'toggle' the effect include '#' in parameter 0.
//           The first call will set the toggle parameters.
//           Subsequent calls with '#' in parameter 0 and the same start and finish parameters will 'toggle' the effect.
//  Note 4:  The function may be re-executed with a different set of parameters (start/finish time or period)
//           whenever required, say from an onclick/mouseover/out event.
//           The period parameter will be retained unless re-specified.
//  Note 5: there are three types of progression 'sin' and 'cos' and liner.
//                'sin' progression starts fast and ends slow.
//                'cos' progression starts slow and ends fast.
//          Once set the type of change will be retained until respecified.
//
// **** Advanced Applications
//
//  It may be required to access the current value of the effect.
//  The element effect is accessible from the element property
//  element effect = elementobject[mode.replace(/[-#]/g,'')+'oop'];
//  where mode is parameter 0 of the initial call.
//  An array storing the current, start and finish values of the element effect may be accessed
//  from the element effect.data as fields 0, 1 and 2 respectively
//

// **** General
//
// All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts.
// These characters may be changed to characters of choice using global find and replace.
//
// The Functional Code(about 2K) is best as an External JavaScript.
//
// Tested with IE7 and Mozilla FireFox on a PC.
//



// **** Functional Code - NO NEED to Change


function zxcBAnimator(mde,obj,srt,fin,time,zxccurve){
 if (typeof(obj)=='string'){ obj=document.getElementById(obj); }
 if (!obj||(!srt&&!fin)) return;
 var oop=obj[mde.replace(/[-#]/g,'')+'oop'];
 if (oop){
  clearTimeout(oop.to);
  if (oop.srtfin[0]==srt&&oop.srtfin[1]==fin&&mde.match('#')) oop.update([oop.data[0],(oop.srtfin[0]==oop.data[2])?fin:srt],time,zxccurve);
  else oop.update([srt,fin],time);
 }
 else obj[mde.replace(/[-#]/g,'')+'oop']=new zxcBAnimatorOOP(mde,obj,srt,fin,time,zxccurve);
}

function zxcBAnimatorOOP(mde,obj,srt,fin,time,zxccurve){
 this.srtfin=[srt,fin];
 this.to=null;
 this.obj=obj;
 this.mde=mde.replace(/[-#]/g,'');
 this.update([srt,fin],time,zxccurve);
}

zxcBAnimatorOOP.prototype.update=function(srtfin,time,zxccurve){
 this.curve=(typeof(zxccurve)=='string')?zxccurve.charAt(0).toLowerCase():(this.curve)?this.curve:'x';
 this.inc=Math.PI/(2*time);
 this.time=time||this.time||2000;
 this.data=[srtfin[0],srtfin[0],srtfin[1]];
 this.srttime=new Date().getTime();
 this.cng();
}

zxcBAnimatorOOP.prototype.cng=function(){
 var ms=new Date().getTime()-this.srttime;
 this.data[0]=(this.curve=='s')?Math.floor((this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]):(this.curve=='c')?(this.data[2])-Math.floor((this.data[2]-this.data[1])*Math.cos(this.inc*ms)):(this.data[2]-this.data[1])/this.time*ms+this.data[1];
 if (this.mde!='left'&&this.mde!='top'&&this.data[0]<0){
	 this.data[0]=0;
 }
 
 if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
 else  zxcOpacity(this.obj,this.data[0]);
 if (ms<this.time) this.to=setTimeout(function(oop){return function(){oop.cng();}}(this),10);
 else {
  this.data[0]=this.data[2];
  if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
  else zxcOpacity(this.obj,this.data[0]);
 }
}

function zxcOpacity(obj,opc){
 if (opc<0||opc>100) return;
 obj.style.filter='alpha(opacity='+opc+')';
 obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}


function zxcSlide(mde,id,nu,spd,ud){
 var mde=mde=='V'?['top','Top']:['left','Left'];
 var par=document.getElementById(id);
 var slide=par.getElementsByTagName('DIV')[0];
 if (!slide.inc){
  var imgs=slide.getElementsByTagName('IMG');
  slide.inc=imgs[nu]['offset'+mde[1]]-SVInt(imgs[nu],'margin-'+mde[1])
  slide.pos=0;
  slide.min=imgs[imgs.length-nu]['offset'+mde[1]]-SVInt(imgs[nu],'margin-'+mde[1]);
} else {
	 
}
 slide.pos=Math.min(Math.max(slide.pos+=slide.inc*ud,-slide.min),0);
 zxcBAnimator(mde[0],slide,SVInt(slide,mde[0]),slide.pos,spd);

}
function SVInt(obj,par){
 if (obj.currentStyle) return parseInt(obj.currentStyle[par.replace(/-/g,'')]);
 return parseInt(document.defaultView.getComputedStyle(obj,null).getPropertyValue(par.toLowerCase()));
}

//-- Begin Fix for slider--
// replace cookie_name with the real cookie name, '' are required
function Get_Cookie( check_name ) {
	// first we'll split this cookie up into name/value pairs
	// note: document.cookie only returns name=value, not the other components
	var a_all_cookies = document.cookie.split( ';' );
	var a_temp_cookie = '';
	var cookie_name = '';
	var cookie_value = '';
	var b_cookie_found = false; // set boolean t/f default f
	var i = '';
	
	for ( i = 0; i < a_all_cookies.length; i++ )
	{
		// now we'll split apart each name=value pair
		a_temp_cookie = a_all_cookies[i].split( '=' );
		
		
		// and trim left/right whitespace while we're at it
		cookie_name = a_temp_cookie[0].replace(/^\s+|\s+$/g, '');
	
		// if the extracted name matches passed check_name
		if ( cookie_name == check_name )
		{
			b_cookie_found = true;
			// we need to handle case where cookie has no value but exists (no = sign, that is):
			if ( a_temp_cookie.length > 1 )
			{
				cookie_value = unescape( a_temp_cookie[1].replace(/^\s+|\s+$/g, '') );
			}
			// note that in cases where cookie is initialized but no value, null is returned
			return cookie_value;
			break;
		}
		a_temp_cookie = null;
		cookie_name = '';
	}
	if ( !b_cookie_found ) 
	{
		return null;
	}
}

/*
only the first 2 parameters are required, the cookie name, the cookie
value. Cookie time is in milliseconds, so the below expires will make the 
number you pass in the Set_Cookie function call the number of days the cookie
lasts, if you want it to be hours or minutes, just get rid of 24 and 60.

Generally you don't need to worry about domain, path or secure for most applications
so unless you need that, leave those parameters blank in the function call.
*/
function Set_Cookie( name, value, expires, path, domain, secure ) {
	// set time, it's in milliseconds
	var today = new Date();
	today.setTime( today.getTime() );
	// if the expires variable is set, make the correct expires time, the
	// current script below will set it for x number of days, to make it
	// for hours, delete * 24, for minutes, delete * 60 * 24
	if ( expires )
	{
		expires = expires * 1000 * 60 * 60 * 24;
	}
	//alert( 'today ' + today.toGMTString() );// this is for testing purpose only
	var expires_date = new Date( today.getTime() + (expires) );
	//alert('expires ' + expires_date.toGMTString());// this is for testing purposes only

	document.cookie = name + "=" +escape( value ) +
		( ( expires ) ? ";expires=" + expires_date.toGMTString() : "" ) + //expires.toGMTString()
		( ( path ) ? ";path=" + path : "" ) + 
		( ( domain ) ? ";domain=" + domain : "" ) +
		( ( secure ) ? ";secure" : "" );
}

// this deletes the cookie when called
function Delete_Cookie( name, path, domain ) {
	if ( Get_Cookie( name ) ) document.cookie = name + "=" +
			( ( path ) ? ";path=" + path : "") +
			( ( domain ) ? ";domain=" + domain : "" ) +
			";expires=Thu, 01-Jan-1970 00:00:01 GMT";
}

function savePos(obj){
	var sliderDiv = obj.parentNode.parentNode.id;
	var sliderPos = obj.parentNode.style.left;
	Set_Cookie( 'slider', '["' + sliderDiv + '","' + sliderPos + '"]', '', '/', '', '' );
}

function restorePos(){
	if ( Get_Cookie( 'slider' ) )
	{ 
		var sliderData = eval(Get_Cookie('slider'));
		var sliderDiv = sliderData[0];
		var sliderPos = sliderData[1];
	  var par=document.getElementById(sliderDiv);
 		var slide=par.getElementsByTagName('DIV')[0];
		slide.style.left=sliderPos;
	}
}

//--End Fix for slider--