/*

	JS Class: bannerRotator
	Version: 1.5.0
	Date: 19.07.2011
	Author: Visto AS (Viljo Veesaar)
	license: BSD license
   
	Changelist:
	--ver 1.1--
		bugs:
			1. controls will not be shown, if only 1 image is in rotator.
			2. autoscroll will work without tracker
		features:
			1. Controls can be switched off.
			2. Selectable transitions: ease, linear, bounce, elastic, back, fade.
			3. New default loader
	
	--ver 1.2--
		bugs:
			-none-
		features:
			1. Shows first loaded image and preload other images in background. Controls and autoscroll will be available if all images is loaded
			2. Loader shows loaded images count
			
	--ver 1.2.1--
		bugs:
			1. minor bugfixes for IE
		features:
			-none-
	
	--ver 1.2.2--
		bugs:
			1. same image can be multiple times in loop
		features:
			-none-
	
	--ver 1.2.3--
		bugs:
			1. improved speed
			2. changed loader behaviour
		features:
			-none-
			
	--ver 1.2.4--
		bugs:
			1. bugfixes for IE7
		features:
			-none-
			
	--ver 1.3.0--
		bugs:
			-none-
		features:
			1. numbered tracker
			2. HTML overlay (need CMS5FW.js)
			3. Better errorhandling
			
	--ver 1.4.0--
		bugs:
			-none-
		features:
			1. HTML overlay can load external file (don't work!!!)
			2. Belt can show multiple images at same time
	
	--ver 1.5.0--
		bugs:
			
		features:
			1. auto add crop.php
			2. errorhandling improvements
			2. HTML can be external
	
	--ver 1.5.1--
		bugs:
			1. general bug fixes
		features:
			-none-
	
*/

var bannerRotator = new Class({	
	
	Implements: [Options,Events],
	options: {
		/*main*/
		location: null,
		ID: null,
		imgFolder:'images/bannerRotator',
		contents: null,
		fadeImages: true,
		fadeControls: true,
		transition: 'ease', /* possible values are: ease, linear, bounce, elastic, back, fade */
		bgColor:'#FFF',
		useCropper: false, /* if true, then crop.php is used for images */
		rootPath: false, /* crop.php option */
		quality: 100, /* crop.php option */
		
		/*dimensions*/
		width: 500,
		height: 200,
		padding: {'top':0,'right':0,'bottom':0,'left':0},
		cont_width: null, /* if null, then options.width is used */
		cont_height:null, /* if null, then options.height is used */
		
		/*controls*/
		showControls: true,
		controls: {
			'left':{'top':0,'left':0,'width':35,'height':70},
			'right':{'top':0,'right':0,'width':35,'height':70}
		},
		
		/*tracker*/
		showTracker: true,
		trackerPos: 'bottomright', /* possible values are: topleft, topright, bottomleft, bottomright or Object with styles ex: "{'left':'0px','bottom':'-100px'}"*/
		trackerElSize: {'width':24,'height':24},
		numberedTrackers: false,
		
		/*scroll*/
		autoScroll: false,
		interval: 3000,
		scrollStep:null, /* how many images to scroll, if null, then it's autocalculated */
		
		/* HTML */
		HTMLLocation: null, /* possible values are overlay, external*/
		HTMLContainer: null, /* HTML container, where external HTML is injected */
		overlay: {'top':0,'left':false,'bottom':false,'right':0,'width':400,'height':100,'backgroundColor':'#000000','backgroundImage':null,'opacity':0.5,'padding':'10px'}
	},

	initialize: function(options) {
		
		this.setOptions(options);
		
		this.currentPos = 0; /* current belt position */
		this.sectionPos = 1; /* active section position */
		this.beltWidth = 0; /* full belt width */
		this.beltSections; /* section count in belt */
		this.autoScrollInterval; /* autoscroll instance */
		this.diffContDim = false; /* container dimensions difference */
		
		if(!this.options.location || !this.options.ID || !this.options.contents) return;
		
		/* if container dimensions is set, then we use these instead of common width and height */
		this.containerWidth = this.options.cont_width ? this.options.cont_width : this.options.width;
		this.containerHeight = this.options.cont_height ? this.options.cont_height : this.options.height;
		
		/* calculate image dimensions */
		this.imageHeight = this.options.height - this.options.padding.top - this.options.padding.bottom;
		this.imageWidth = this.options.width - this.options.padding.left - this.options.padding.right;
		
		/* determine dimension difference */
		if(((this.options.cont_width!= this.options.width ) || (this.options.cont_height != this.options.height)) && this.options.cont_width!=null && this.options.cont_height!=null){
			this.diffContDim = true;
		}
		
		/* if container width is different than element width, then we don't allow fade transition (because we show multiple images at time) */
		if((this.options.transition=='fade') && this.diffContDim){
			this.options.transition='ease';
		} 
		 
		/* set scrollstep */
		this.scrollStep = (this.options.scrollStep && this.diffContDim) ? this.options.scrollStep : this.containerWidth/this.options.width;
		
		/* wrapper */
		var Wrap = new Element('div', {'id': this.options.ID+'_wrapper','styles': {
				'width': this.containerWidth + 'px',
				'height': this.containerHeight + 'px',
				'position': 'relative'
			}
		});
		
		/* container */
		var Cont = new Element('div', {'id': this.options.ID,'styles': {
				'width': this.containerWidth + 'px',
				'height': this.containerHeight + 'px',
				'position': 'relative',
				'overflow': 'hidden',
				'z-index':99
			}
		});
		
		/* belt */
		var Belt = new Element('div', {'id': this.options.ID+'_belt','styles': {
				'width': this.containerWidth + 'px',
				'height': this.containerHeight + 'px',
				'position': 'absolute',
				'overflow': 'hidden',
				'top':0,
				'left':0
			}
		});
		
		/* loader */
		var Loader = new Element('div', {'id': this.options.ID+'_loader','align':'center','styles': {
				'width': '54px',
				'height': '55px',
				'position': 'absolute',
				'top':Math.round((this.containerHeight/2)-(55/2))+'px',
				'left':Math.round((this.containerWidth/2)-(54/2))+'px',
				'background':'url('+this.options.imgFolder+'/loader.gif)',
				'text-align:':'center',
				'line-height':'55px',
				'font-size':'14px',
				'font-weight':'bold'
			}
		});
		
		/* inject elements */
		Belt.inject(Cont);
		Loader.inject(Cont);
		Cont.inject(Wrap);
		Wrap.inject(this.options.location);
		
		/* call function what insert images into belt */
		this.insert();
				
	},
	
	insert: function(){
		var images = this.options.contents; /* Object */
		var beltImages = new Array(); /* Array */
		var beltImagesLink = new Array(); /* Array */
		var beltImagesHTML = new Array(); /* Array */
		var tempArray = new Array();
		
		/* greate belt images array */
		var count = 0;
		var srcIndex = 1;
		
		/* extra path if cropper is used */
		if(this.options.useCropper){
			var pathExtra = 'crop.php?source=';
		}else{
			var pathExtra = '';
		}
		
		/* belt images loop */
		$each(images,function(im,index){					 
			
			if(beltImages.contains(im.src)){
				/* we add index for duplicate images */
				beltImages[count] = pathExtra+im.src+'&index='+srcIndex;
				srcIndex++;
			}else{
				beltImages[count] = pathExtra+im.src;
			}
			
			beltImagesLink[count] = im.link;
			beltImagesHTML[count] = im.html;
			count++;
		}.bind(this));
		
		/* hide tracker and controls, if only one section is available */
		if(count<2){
			this.options.showTracker = false;
			this.options.showControls = false;
		}
		
		/* hide tracker, if we show multiple images at once (should be fixed in future version)*/
		if(this.diffContDim){
			this.options.showTracker = false;
		}
		
		/* set count of belt sections */
		this.beltSections = count;
		
		var fadeTrans = (this.options.transition=='fade') ? true : false;

		/* set belt width if transition is not fade */
		if(!fadeTrans){
			this.beltWidth = this.options.width * this.beltSections;
			$(this.options.ID+'_belt').setStyle('width', this.beltWidth+'px');
			this.beltLeft = this.beltWidth - this.containerWidth;
		}
		
		var i = 0;
		
		/* preload images */
		var loadImages = new Asset.images(beltImages, {
			
			onProgress: function(counter,index){
				
				/* build image source */
				var rootpath = this.options.rootPath ? 'true' : 'false';
				
				/* add cropper stuff*/
				if(this.options.useCropper){
					var imageSrc = loadImages[index].src+'&quality='+this.options.quality+'&rootpath='+rootpath+'&width='+this.imageWidth+'&height='+this.imageHeight;
				}else{
					var imageSrc = loadImages[index].src;
				}
				
				
				/* section styles */
				if(!fadeTrans){
					var sectionStyles = {'width': this.imageWidth + 'px','height': this.imageHeight + 'px','float':'left','padding':this.options.padding.top + 'px '+this.options.padding.right + 'px '+this.options.padding.bottom + 'px '+this.options.padding.left + 'px','background':this.options.bgColor};
				}else{
					this.imageHeight = this.options.height;
					this.imageWidth = this.options.width;
					var sectionStyles = {'width': this.options.width+'px','height': this.options.height+'px','position':'absolute','left':0,'top':0,'background':this.options.bgColor};
				}
				
				/* build section div */
				var sectionDiv = new Element('div', {'id':'section_'+index,'styles': sectionStyles});
				/* build section image */
				var sectionImg = new Element('img', {'id':'section_img_'+index,'src': imageSrc,'alt':'gallery'+index, 'width': this.imageWidth,'height':this.imageHeight});
				
				
				/* hide section for fade transition or if options.fadeImages is selected */
				if(fadeTrans || (this.options.fadeImages && (index==0) && !this.diffContDim)){
					sectionDiv.fade('hide');
				}
				
				/* with fade transition inject on the fly */
				if(fadeTrans){
					/* inject section into place */
					sectionDiv.inject($(this.options.ID+'_belt'));
					sectionImg.inject(sectionDiv);
					/* hide loader */
					$(this.options.ID+'_loader').setStyle('display','none');
				/* with "scroll" transition, inject only first frame */
				}else{
					if(index==0){
						sectionDiv.inject($(this.options.ID+'_belt'));
						sectionImg.inject(sectionDiv);
						/* hide loader */
						$(this.options.ID+'_loader').setStyle('display','none');
					}else{
						sectionImg.inject(sectionDiv);
						tempArray[index] = sectionDiv;
					}
				}
				
				/* fade in section */
				if((fadeTrans && (index==0)) || (this.options.fadeImages && (index==0) && !this.diffContDim)){
					sectionDiv.fade('in');
				}
				
				/* if section have a link, then add "click" event */
				if(beltImagesLink[index]){
					sectionDiv.setStyle('cursor','pointer');
					var splittedLink = beltImagesLink[index].split('||');
					sectionDiv.addEvent('click', function(){
						window.open(splittedLink[0], splittedLink[1]);
					});
				}
				
				/* store element html */
				if(beltImagesHTML[index]){
					sectionDiv.store('htmldata',beltImagesHTML[index]);
				}
				
			}.bind(this),
			
			onComplete: function(){

				/* inject elements from temparray */		
				tempArray = tempArray.clean();
				
				if(!fadeTrans){
					$each(tempArray,function(el){
						el.inject($(this.options.ID+'_belt'));
					}.bind(this));
				}
				
				/* add mover */
				if(this.options.transition!='fade'){
					var transition;
					switch(this.options.transition){
						default:
							transition = Fx.Transitions.Sine.easeOut;
						break;
						
						case 'ease':
							transition = Fx.Transitions.Sine.easeOut;
						break;
						
						case 'linear':
							transition = Fx.Transitions.Linear;
						break;
						
						case 'bounce':
							transition = Fx.Transitions.Bounce.easeOut;
						break;
						
						case 'elastic':
							transition = Fx.Transitions.Elastic.easeOut;
						break;
						
						case 'back':
							transition = Fx.Transitions.Back.easeOut;
						break;
						
	
					}
					
					$(this.options.ID+'_belt').set("move", {duration: 500, transition: transition});
					$(this.options.ID+'_belt').move({relativeTo: $(this.options.ID),offset: {x:0,y:0}});
				}
				
				/* add overlay */
				if(this.options.HTMLLocation=='overlay'){
					this.buildOverlay();
				}
				
				/* add HTML into overlay or into container*/
				this.addHTML();
				
				/* add controls */
				if(this.options.showControls){
					this.buildControls();
				}
				
				/* add tracker */
				if(this.options.showTracker){
					this.addTracker();
				}
				
				/* add autoscroll*/
				if(this.options.autoScroll){
					(function(){ this.addAutoScroll(); }).delay(1000,this);
				}
				
				
			}.bind(this),
			
			onError: function(counter,index){
				
				/* section styles */
				if(!fadeTrans){
					var sectionStyles = {'background': '#FFFFFF','width': this.options.width + 'px','height': this.options.height + 'px','float':'left','position':'relative'};
				}else{
					var sectionStyles = {'background': '#FFFFFF','width': this.options.width + 'px','height': this.options.height + 'px','position':'absolute','left':0,'top':0};
				}
				
				/* build section div */
				var sectionDiv = new Element('div', {'id':'section_'+index,'styles': sectionStyles});
				
				
				/* hide section for fade */
				if(fadeTrans || (this.options.fadeImages && (index==0))){
					sectionDiv.fade('hide');
				}
				
				/* with fade transition inject on the fly */
				if(fadeTrans){
					/* inject section into place */
					sectionDiv.inject($(this.options.ID+'_belt'));
					/* hide loader */
					$(this.options.ID+'_loader').setStyle('display','none');
				/* with "scroll" transition, inject only first frame */
				}else{
					if(index==0){
						sectionDiv.inject($(this.options.ID+'_belt'));
						/* hide loader */
						$(this.options.ID+'_loader').setStyle('display','none');
					}else{
						tempArray[index] = sectionDiv;
					}
				}
				
				/* fade in section */
				if((fadeTrans && (index==0))||(this.options.fadeImages && (index==0))){
					sectionDiv.fade('in');
				}
				
				/* error */
				var Error = new Element('div', {'id': this.options.ID+'_error','align':'center','styles': {
						'width': '300px',
						'height': '50px',
						'position': 'absolute',
						'top':Math.round((this.options.height/2)-(50/2))+'px',
						'left':Math.round((this.options.width/2)-(300/2))+'px',
						'text-align:':'center',
						'line-height':'50px',
						'font-size':'22px',
						'font-weight':'bold',
						'color':'#CC0000',
						'text-shadow': '#CCCCCC 2px 2px 5px'

					}
				});
				
				$(this.options.ID+'_loader').setStyle('display','none');
				
				Error.inject(sectionDiv);
				Error.set('html','Image not found<br><span style="font-size:9px;">('+loadImages[index].src+')</span>');
				
			}.bind(this)
		});
		
	},
	
	scrollBelt: function(offset,manual){
		/* set new current position */
		this.currentPos = offset;
		
		/* clear autoscroll */
		if(manual){$clear(this.autoScrollInterval);}
		
		/* get mover */
		var mover = $(this.options.ID+'_belt').get('move');
		
		/* move belt to new place */
		mover.start({
			relativeTo: this.options.ID,
			position: 'upperLeft',
			edge: 'upperLeft',
			allowNegative: true,
			offset: {x:offset,y:0}
		});
		
		/* get belt position (index) */
		if(offset==0){
			this.sectionPos = 1;
		}else{
			this.sectionPos = (Math.abs(offset)/this.options.width)+1;
		}
		/* select tracker */
		this.selectTracker();
	},
	
	scrollNext: function(manual){
		var move = this.scrollStep*this.options.width;
		
		/* if less sections is left, than fit's to full scroll */
		if(move > this.beltLeft){ move = this.beltLeft}
		
		var newPos = this.currentPos-move;
		
		if(this.beltLeft<=0){
			newPos=0;
			this.beltLeft = this.beltWidth - this.containerWidth;
		}else{
			/* set how much we have belt left */
			this.beltLeft = this.beltLeft - Math.abs(newPos);
		}

		this.scrollBelt(newPos,manual);
	},
	
	scrollPrev: function(manual){
		
		var move = this.scrollStep*this.options.width;
		
		var newPos = this.currentPos+move;
		
		if(newPos>0){newPos=0}
		
		if(this.currentPos==0){
			/*newPos='-'+(this.beltWidth-this.containerWidth);
			this.beltLeft = this.beltWidth - this.containerWidth;*/
		}else{
			this.beltLeft = this.beltLeft + Math.abs(newPos);
		}
		
		
		
		this.scrollBelt(newPos,manual);
	},
	
	fadeNext: function(manual){
		if(manual){$clear(this.autoScrollInterval);}
		
		/* if reached end, then position back to 1*/
		if(this.beltSections==this.sectionPos){
			
			/* fade out current */
			var sectionIndex = this.beltSections-1;
			$('section_'+sectionIndex).fade('out');
			
			/* fade in next */
			$('section_0').fade('in');
			this.sectionPos = 1;
		}else{
			/* fade out current */
			var sectionIndex = this.sectionPos-1;
			$('section_'+sectionIndex).fade('out');	
			
			/* fade in next */
			$('section_'+(Math.abs(sectionIndex)+1)).fade('in');
			this.sectionPos++;
		}
		/* select tracker */
		this.selectTracker();
	},
	
	fadePrev: function(manual){
		if(manual){$clear(this.autoScrollInterval);}
		
		/* if reached start, then position back to last */
		if(this.sectionPos==1){
			
			/* fade out current */
			$('section_0').fade('out');	
			
			var sectionIndex = this.beltSections-1;
			/* fade in previous */
			$('section_'+sectionIndex).fade('in');
			this.sectionPos = this.beltSections;
		}else{
			/* fade out current */
			var sectionIndex = this.sectionPos-1;
			$('section_'+sectionIndex).fade('out');	
			
			/* fade in previous */
			$('section_'+(Math.abs(sectionIndex)-1)).fade('in');
			this.sectionPos--;
		}
		/* select tracker */
		this.selectTracker();
	},
	
	fadeSelected: function(selected,manual){
		if(manual){$clear(this.autoScrollInterval);}
		
		/* fade out current */
		var sectionIndex = this.sectionPos-1;
		$('section_'+sectionIndex).fade('out');	
		
		/* fade in selected */
		$('section_'+(Math.abs(selected)-1)).fade('in');
		this.sectionPos = selected;
		/* select tracker */
		this.selectTracker();
	},
	
	selectTracker: function(){
		
		/* selected tracker */
		if(this.options.showTracker){
			var i = 1;
			var horPos = 0;
			$$('.beltTracker').each(function(el){
				if(this.options.numberedTrackers){
					horPos = '-'+this.options.trackerElSize.height*(i-1);
				}
				el.setStyle('background-position','0px '+horPos+'px');
				i++;
			}.bind(this));
			
			horPos = 0;
			if(this.options.numberedTrackers){
				horPos = '-'+this.options.trackerElSize.height*(this.sectionPos-1);
			}
			
			if($('beltTracker_'+this.sectionPos)){
				$('beltTracker_'+this.sectionPos).setStyle('background-position','-'+this.options.trackerElSize.width+'px '+horPos+'px');
			}
		}
		
		this.addHTML();
	},
	
	addTracker: function(){
		var pos = this.options.trackerPos;
		
		var posStyles;
		if($type(pos)=='object'){
			posStyles = pos;
		}else{
			switch(pos){
				default:
					posStyles = {'bottom':'5px','right':'5px'};
				break;
				
				case 'topleft':
					posStyles = {'top':'5px','left':'5px'};
				break;
				
				case 'topright':
					posStyles = {'top':'5px','right':'5px'};
				break;
				
				case 'bottomleft':
					posStyles = {'bottom':'5px','left':'5px'};
				break;
				
				case 'bottomright':
					posStyles = {'bottom':'5px','right':'5px'};
				break;
			}
		}
		
		var trackerCont = new Element('div', {'styles': {
				'height': this.options.trackerElSize.height+'px',
				'width': this.beltSections*this.options.trackerElSize.width+'px',
				'position': 'absolute',
				'z-index':1000
			}
		});
		
		var i;
		var horPos = 0;
		/* loop tracker */
		for (i=1; i<=this.beltSections;i++){
			
			if(this.options.numberedTrackers){
				horPos = '-'+this.options.trackerElSize.height*(i-1);
			}
			
			if(i==1){
				var backGroundPos = '-'+this.options.trackerElSize.width+'px '+horPos+'px';
			}else{
				var backGroundPos = '0 '+horPos+'px';
			}
			
			
			var trackerElement = new Element('div', {'id':'beltTracker_'+i,'class':'beltTracker', 'rel':i, 'styles': {
					'height': this.options.trackerElSize.height+'px',
					'width': this.options.trackerElSize.width+'px',
					'float': 'left',
					'background':'url('+this.options.imgFolder+'/tracker.png) '+backGroundPos,
					'cursor':'pointer'
				}
			});
			
			var pseudoThis = this;

			trackerElement.addEvent('click', function(){
				var index = this.get('rel');
				
				if(pseudoThis.options.transition=='fade'){
					pseudoThis.fadeSelected(index,true);
				}else{
					var newPos = (index-1)*pseudoThis.options.width;
					if(newPos!=0){newPos=-newPos;}
	
					pseudoThis.scrollBelt(newPos,true);
				}
			});
			
			trackerElement.inject(trackerCont);
		}
		
		trackerCont.setStyles(posStyles);
		trackerCont.inject($(this.options.ID+'_wrapper'));
		
		
	},
	
	addAutoScroll: function(){
		var transFunc = (this.options.transition=='fade') ? this.fadeNext : this.scrollNext;
		this.autoScrollInterval = transFunc.periodical(this.options.interval, this);
	},
	
	buildControls: function(){
		
		var fadeTrans = (this.options.transition=='fade') ? true : false;
		
		/* left control */
		var contLeft = new Element('div', {'styles': {
				'width': this.options.controls.left.width+'px',
				'height': this.options.controls.left.height+'px',
				'position': 'absolute',
				'top':this.options.controls.left.top+'px',
				'left':this.options.controls.left.left+'px',
				'background':'url('+this.options.imgFolder+'/leftControl.png)',
				'cursor':'pointer',
				'z-index':1000
			}
		});
		
		/* right control */
		var contRight = new Element('div', {'styles': {
				'width': this.options.controls.right.width+'px',
				'height': this.options.controls.right.height+'px',
				'position': 'absolute',
				'top':this.options.controls.right.top+'px',
				'right':this.options.controls.right.right+'px',
				'background':'url('+this.options.imgFolder+'/rightControl.png)',
				'cursor':'pointer',
				'z-index':1000
			}
		});
		
		/* add events to controls */
		contLeft.addEvent('click', function(){
				if(fadeTrans){
					this.fadePrev(true);
				}else{
					this.scrollPrev(true);
				}
			}.bind(this));
		
		contRight.addEvent('click', function(){
				if(fadeTrans){
					this.fadeNext(true);
				}else{
					this.scrollNext(true);
				}
			}.bind(this));
		
		/* hide controls for fade */
		if(this.options.fadeControls){
			contLeft.fade('hide');
			contRight.fade('hide');
		}
		
		/* inject controls */
		contLeft.inject($(this.options.ID+'_wrapper'));
		contRight.inject($(this.options.ID+'_wrapper'));
		
		/* fade in controls */
		if(this.options.fadeControls){
			/* fade only with webkit browsers */
			if(Browser.Engine.webkit){
				contLeft.fade('in');
				contRight.fade('in');
			}else{
				contLeft.fade('show');
				contRight.fade('show');
			}
		}
	
	},
	
	buildOverlay: function(){
		
		var to = this.options;
		var overlayVertPos = (to.overlay.top === false) ? 'bottom' : 'top';
		var overlayHorPos = (to.overlay.left === false) ? 'right' : 'left';
		
		var OLBGColor = to.overlay.backgroundColor ? to.overlay.backgroundColor : "#000000";
		var OLBGImage = to.overlay.backgroundImage ? 'url('+to.overlay.backgroundImage+') ' : '';
		var OLBGOpacity = to.overlay.opacity ? to.overlay.opacity : 0.5;
		var OLWidth = to.overlay.width ? to.overlay.width : 300;
		var OLHeight = to.overlay.height ? to.overlay.height : 50;
		
		var overlayBG = new Element('div', {'id':this.options.ID+'_overlayBG','styles': {
				'width': OLWidth+'px',
				'height': OLHeight+'px',
				'position': 'absolute',
				'background':OLBGImage+OLBGColor,
				'padding': to.overlay.padding,
				'visibility':'hidden',
				'z-index':998
			}
		});
		
		var overlay = new Element('div', {'id':this.options.ID+'_overlay','styles': {
				'width': OLWidth+'px',
				'height': OLHeight+'px',
				'position': 'absolute',
				'padding': to.overlay.padding,
				'visibility':'hidden',
				'z-index':999
			}
		});
		
		if(overlayVertPos=="top"){
			overlayBG.setStyles({'top':to.overlay.top});
			overlay.setStyles({'top':to.overlay.top});
		}else{
			overlayBG.setStyles({'bottom':to.overlay.bottom});
			overlay.setStyles({'bottom':to.overlay.bottom});
		}
		
		if(overlayHorPos=="left"){
			overlayBG.setStyles({'left':to.overlay.left});
			overlay.setStyles({'left':to.overlay.left});
		}else{
			overlayBG.setStyles({'right':to.overlay.right});
			overlay.setStyles({'right':to.overlay.right});
		}
		
		overlayBG.setOpacity(OLBGOpacity);
		
		overlayBG.inject($(this.options.ID+'_wrapper'));
		overlay.inject($(this.options.ID+'_wrapper'));
		
	},
	
	addHTML: function(){
		
		if(this.options.HTMLLocation=='overlay'){
			
			var html = $('section_'+(this.sectionPos-1)).retrieve('htmldata');
			if(html){
				if(isUrl(html)){
					$(this.options.ID+'_overlay').set('html','loading...');
					//$(this.options.ID+'_overlay').load(html);
				}else{
					html = Base64.decode(html);
					$(this.options.ID+'_overlay').set('html',html);
				}
				
				$(this.options.ID+'_overlayBG').fade(this.options.overlay.opacity);
				$(this.options.ID+'_overlay').fade('show');
				
			}else{
				$(this.options.ID+'_overlayBG').fade('hide');
				$(this.options.ID+'_overlay').fade('hide');
				$(this.options.ID+'_overlay').set('html','');
			}
			
			
		}else if(this.options.HTMLLocation=='external' && $(this.options.HTMLContainer)){
			var html = $('section_'+(this.sectionPos-1)).retrieve('htmldata');
			if(isUrl(html)){
				$(this.options.HTMLContainer).set('html','loading..');
				//$(this.options.ID+'_overlay').load(html);
			}else{
				html = Base64.decode(html);
				$(this.options.HTMLContainer).set('html',html);
			}
		}
	}

});