el=function(o){ return document.getElementById(o); }

function opacity(objID,o) {
	obj=el(objID);
        obj.style.filter="alpha(opacity:"+o+")";
        obj.style.KHTMLOpacity=o/100;
        obj.style.MozOpacity=((o==100)?99.9999:o)/100;
        obj.style.opacity=o/100;
}

function fade(objID,o,change,goal,visible) {
        if (goal>0 && o==0 && visible)
                el(objID).style.visibility="visible";
        else if (visible && goal==0 && o==goal)
                el(objID).style.visibility="hidden";

        if (o!=goal) {
                o+=change;
                opacity(objID,o);
                setTimeout("fade(\""+objID+"\","+o+","+change+","+goal+","+visible+")", 10);
        }
}

function event(objID,type,funct) {
        e=el(objID);
        if (e.addEventListener)
                e.addEventListener(type,funct,false);
        else if (e.attachEvent)
                e.attachEvent("on"+type,funct);
}

function viewport_width() {
	if (window.innerWidth)
		return window.innerWidth;
	else	
		return document.body.offsetWidth;
}

function viewport_height() {
	return  window.innerHeight!=null ? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body!=null ? document.body.clientHeight : null;
}

function get_height(id) {
	if (!el(id).width) {
                height=el(id).style.height;
		if (!height)
			height=el(id).clientHeight;
                else if (height.match('px'))
	                height=height.replace('px','');
        }
        else {
                height=el(id).width;
        }
	return height;
}

function get_width(id) {
	if (!el(id).width) {
		if (el(id).style.width) {
	                width=el(id).style.width;
			if (width.match('px'))
                        	width=width.replace('px','');
		}
		else
			width=el(id).clientWidth;
        }
        else {
                width=el(id).width;
        }
	return width;
}

function get_top(id) {
	t=el(id).style.top;
	if (t.match('px'))
		t=t.replace('px','');
	return t;
}

function center(id) {
	el(id).style.left=(viewport_width()/2-(get_width(id)/2))+"px";
	el(id).style.top=(viewport_height()/2-(get_height(id)/2))+"px";
}

function slides(source,name,array,delay) {
        this.name=name;
        this.varname=this.name+"_slides";
        this.bubbles=array;
        this.bubbles_div=null;
        this.data=array;
        this.delay=delay;
        this.run="hidden"
        this.it=0;
        this.it_next=1;
        this.it_prev=this.data.length-1;
        this.source=source;
        this.time=null;
	this.centerbox=true;
	this.graphicsurl='graphics/slideshow';
	this.border=2;
	this.advancing=false;

	this.title_summary=function(title,summary) {
		this.title=title;
		this.summary=summary;
	}

	this.center_image=function(b) {
		this.centerbox=b;
	}

	this.set_border=function(b) {
		this.border=b;
	}

	this.graphics_url=function(url) {
		this.graphicsurl=url;
	}

        this.restart=function() {
                this.it=0;
                this.it_next=1;
                this.it_prev=this.data.length-1;
               	el(this.name).src=this.data[0];
		this.load.src=this.data[1];
	        this.load_prev.src=this.data[this.data.length-1];
                this.position();
        }

        this.loop=function() {
                if (this.run=="hidden")
                        return;

                if (this.run!="freeze")
                        this.advance(false);
		else {
	                if (this.time)
	                        clearTimeout(this.time);
	                slower=0;
	                if (this.bubbles_div)
	                        slower=bubbles[this.it][4].length*50;
	                this.time=setTimeout(this.varname+".loop()",this.delay+slower);
		}
        }

        this.advance=function(reverse) {
                if (!this.advancing && this.load.complete && this.load_prev.complete) {
			this.advancing=true;
                        if (!reverse) {
				el(this.name).src=this.data[this.it_next];			
                               	if (this.title) {
					el(this.title).innerHTML=this.title[this.it_next];
					el(this.summary).innerHTML=this.summary[this.it_next];												
				}
			}
                        else {
                                el(this.name).src=this.data[this.it_prev];
				if (this.title) {				
					el(this.title).innerHTML=this.title[this.it_prev];
					el(this.summary).innerHTML=this.summary[this.it_prev];
				}
			}				

                        this.position();

                        if (this.bubbles_div) {
                                if (!reverse)
                                        drawbubble(this.bubbles_div,this.bubbles[this.it_next][0],this.bubbles[this.it_next][1],this.bubbles[this.it_next][2],this.bubbles[this.it_next][3],this.bubbles[this.it_next][4]);
                                else
                                        drawbubble(this.bubbles_div,this.bubbles[this.it_prev][0],this.bubbles[this.it_prev][1],this.bubbles[this.it_prev][2],this.bubbles[this.it_prev][3],this.bubbles[this.it_prev][4]);
                        }
                        
                        if (!reverse) {
                                this.it_prev=this.it;
                                this.it=this.it_next;
                                this.it_next++;
                                if (this.it_next==this.data.length)
                                        this.it_next=0;
                        }
                        else {
                                this.it_next=this.it;
                                this.it=this.it_prev;
                                this.it_prev--;
                                if (this.it_prev<0)
                                        this.it_prev=this.data.length-1;
                        }
			
                       	this.load.src=this.data[this.it_next];
                       	this.load_prev.src=this.data[this.it_prev];

			this.move_buttons();
			
			if (this.time)
				clearTimeout(this.time);
			slower=0;
			if (this.bubbles_div)
				slower=bubbles[this.it][4].length*50;
			this.advancing=false;
			this.time=setTimeout(this.varname+".loop()",this.delay+slower);
                }
                else {
			if (this.time) {
				clearTimeout(this.time);
				this.time=null;
			}
			setTimeout(this.varname+".advance("+reverse+")",500);
		}
        }

        this.play=function() {
                this.position();
		el(this.name+"_box").style.visibility='visible';
		el(this.name+"_background").style.visibility="visible";
                this.run="play";
                if (this.time)
                        clearTimeout(this.time);
                this.time=setTimeout(this.varname+".loop()",this.delay);
        }

        this.stop=function() {
		if (this.run!='hidden') {
	                this.run="hidden";
			el(this.name+"_box").style.visibility='hidden';
			el(this.name+"_background").style.visibility='hidden';		
        	        if (this.bubbles_div)
                	        drawbubble(this.bubbles_div,-1);
		}
                if (this.time)
                        clearTimeout(this.time);
        }

        this.next=function() {
                if (this.time)
                        clearTimeout(this.time);
		this.advance(false);
        }
        
        this.prev=function() {
                if (this.time)
                        clearTimeout(this.time);
                this.advance(true);
        }
        
        this.pause=function() {
                if (this.run=="freeze") {
                        this.run="play";
                        this.time=setTimeout(this.varname+".loop()",this.delay);
                }
                else {
                        this.run="freeze";
                        if (this.time) {
                                clearTimeout(this.time);
				this.time=null;
			}
                }
        }
       
        this.position=function() {              
		el(this.name+"_background").style.width=(el(this.name).width+this.border*2)+"px";
		el(this.name+"_background").style.height=(el(this.name).height+this.border*2)+"px";
		if (this.centerbox)
			center(this.name+"_background");

		el(this.name+"_box").style.width=el(this.name+"_background").style.width;
		el(this.name+"_box").style.height=el(this.name+"_background").style.height;
        }

        this.bubble=function(list) {
                this.bubbles_div=this.name+"_bubble";
                this.bubbles=list;
        }

        this.capture=function(e) {
		if (e.srcElement)
	                element=e.srcElement;
		else
			element=e.target;

		varname=element.id.replace('_box','');
		varname+='_slides';
		element=el(varname);

                if (e.layerX) {
                        x=e.layerX;
			y=e.layerX;
		}
                else {
                        x=e.offsetX;
			y=e.offsetY;
		}

                setTimeout(varname+".click("+x+','+y+")",2);
        }

        this.hover=function(e) {
		if (e.srcElement)
	                element=e.srcElement;
		else
			element=e.target;
                varname=element.id.replace('_box','');
		varname+="_slides";
		element=el(varname);

                if (e.layerX) {
                        x=e.layerX;
                        y=e.layerY;
                }
                else {
                        x=e.offsetX;
                        y=e.offsetY;
                }

                setTimeout(varname+".show_nav("+x+","+y+")",1);
        }

        this.leave=function(e) {
		if (e.srcElement)
                        element=e.srcElement;
                else
                        element=e.target;
		varname=element.id.replace('_box','');
		varname+='_slides';
		element=el(varname);

                setTimeout(varname+".hide_nav()",1);
        }

	this.show_play=function() {
		if (this.run=='play') {
			el(this.name+'slideshow_play').src=this.graphicsurl+'/pause.png';
			el(this.name+'slideshow_play').style.visibility='visible';
		}
	}

        this.move=function(e) {
                element=this;
                if (!element.id)
                        element=e.srcElement;
                varname=element.id.replace('_box','');
                varname+="_slides";
                width=element.style.width;
		width=width.replace('px','');
                if (e.layerX) {
                        x=e.layerX;
                        y=e.layerY;
                }
                else {
                        x=e.offsetX;
                        y=e.offsetY;
                }

                setTimeout(varname+".show_nav("+x+","+y+")",1);
        }

	this.coord=function(e) {
                element=this;
                if (!element.id)
                        element=e.srcElement;
                varname=element.id.replace('_box','');
                varname+="_slides";
                width=element.style.width;
                width=width.replace('px','');
                if (e.layerX) {
                        x=e.layerX;
                        y=e.layerY;
                }
                else {
                        x=e.offsetX;
                        y=e.offsetY;
                }

                el("coord").innerHTML='('+x+','+(y-get_height('story_background')+15)+')';
	}

	this.move_buttons=function() {
		tops=get_height(this.name+"_background")/2-get_height(this.name+"slideshow_next")/2;
		third=get_width(this.name+"_background")/3;
		half=get_width(this.name+"slideshow_next")/2;

		el(this.name+"slideshow_play").style.top=tops+"px";
		el(this.name+"slideshow_play").style.left=(get_width(this.name+"_background")/2-half)+"px";

		el(this.name+"slideshow_next").style.top=tops+"px";
		el(this.name+"slideshow_next").style.left=(third*3-third/2-half)+"px";

		el(this.name+"slideshow_prev").style.top=tops+"px";
		el(this.name+"slideshow_prev").style.left=(third/2-half)+"px";
	}

	this.click=function(x,y) {
                width=get_width(this.name);
                if (x>(width/3)*2)
                        this.next();
                else if (x>(width/3)) {
                        this.pause();
			this.show_nav(x,y);
		}
                else
                        this.prev();
	}

        this.show_nav=function(x,y) {
		width=get_width(this.name);
                if (x>(width/3)*2)
                        nav=1;
                else if (x>(width/3))
                        nav=2;
                else
                        nav=3;

		this.move_buttons();
		switch (nav) {
			case 2:
				if (this.run=='play')
					el(this.name+"slideshow_play").src=this.graphicsurl+'/pause.png';
				else
					el(this.name+"slideshow_play").src=this.graphicsurl+'/play.png';
				el(this.name+"slideshow_next").style.visibility="hidden";
				el(this.name+"slideshow_prev").style.visibility="hidden";
				el(this.name+"slideshow_play").style.visibility="visible";
			break;
			case 1:
				el(this.name+"slideshow_play").style.visibility="hidden";
				el(this.name+"slideshow_prev").style.visibility="hidden";
				el(this.name+"slideshow_next").style.visibility="visible";
			break;
			case 3:
				el(this.name+"slideshow_play").style.visibility="hidden";
				el(this.name+"slideshow_prev").style.visibility="visible";
				el(this.name+"slideshow_next").style.visibility="hidden";
			break;
		}		
        }
        
        this.hide_nav=function() {
		el(this.name+"slideshow_play").style.visibility="hidden";
		el(this.name+"slideshow_prev").style.visibility="hidden";
		el(this.name+"slideshow_next").style.visibility="hidden";
        }

	this.create_buttons=function() {
		element=document.createElement('img');
		element.setAttribute('id',this.name+'slideshow_play');
		el(this.name+'_background').appendChild(element);
		el(this.name+'slideshow_play').style.visibility="hidden";
		el(this.name+'slideshow_play').src=this.graphicsurl+'/pause.png';
		el(this.name+'slideshow_play').style.position='absolute';
	
		element=document.createElement('img');
		element.setAttribute('id',this.name+'slideshow_next');
		el(this.name+'_background').appendChild(element);
		el(this.name+'slideshow_next').style.visibility="hidden";
		el(this.name+'slideshow_next').src=this.graphicsurl+'/next.png';
		el(this.name+'slideshow_next').style.position='absolute';
	
		element=document.createElement('img');
		element.setAttribute('id',this.name+'slideshow_prev');
		el(this.name+'_background').appendChild(element);
		el(this.name+'slideshow_prev').style.visibility="hidden";
		el(this.name+'slideshow_prev').src=this.graphicsurl+'/prev.png';
		el(this.name+'slideshow_prev').style.position='absolute';
	}

        element=document.createElement('div');
        element.setAttribute('id',this.name+'_background');
        el(this.source).appendChild(element);
        el(this.name+"_background").style.visibility="hidden";
	el(this.name+"_background").style.position="absolute";
        el(this.name+"_background").className='slides';
	el(this.name+"_background").style.background="black";
	
        element=document.createElement('img');
        element.setAttribute('id',this.name);
        el(this.name+"_background").appendChild(element);
	el(this.name).style.position="relative";
        el(this.name).style.left=this.border+"px";
	el(this.name).style.top=this.border+"px";

        element=document.createElement('div');
        element.setAttribute('id',this.name+"_bubble");
        el(this.name+'_background').appendChild(element);
	el(this.name+'_bubble').style.position="relative";

	this.create_buttons();

        element=document.createElement('div');
        element.setAttribute('id',this.name+'_box');
        el(this.name+'_background').appendChild(element);
        el(this.name+"_box").style.visibility="hidden";
	el(this.name+"_box").style.position="absolute";
	el(this.name+"_box").style.left='0px';
	el(this.name+"_box").style.top='0px';
        el(this.name+"_box").style.cursor="pointer";
	el(this.name+"_box").style.background="black";
	opacity(this.name+"_box",0);
        event(this.name+"_box","mouseup",this.capture);
        event(this.name+"_box","mouseover",this.hover);
        event(this.name+"_box","mouseout",this.leave);
        event(this.name+"_box","mousemove",this.hover);
//event(this.name+"_box","mousemove",this.coord);
	this.load=new Image();
	this.load_prev=new Image();

        this.restart();
}