JavaScript - Mootools Vs Ajax (conflict?)

/**
 * @author Bruno Bornsztein <bruno@missingmethod.com>
 * @copyright 2007 Curbly LLC
 * @package Glider
 * @license MIT
 * @url http://www.missingmethod.com/projects/glider/
 * @version 0.0.3
 * @dependencies prototype.js 1.5.1+, effects.js
 */
/*  Thanks to Andrew Dupont for refactoring help and code cleanup - http://andrewdupont.net/  */
Glider = Class.create();
Object.extend(Object.extend(Glider.prototype, Abstract.prototype), {
	initialize: function(wrapper, options){
	    this.scrolling  = false;
	    this.wrapper    = $(wrapper);
	    this.scroller   = this.wrapper.down('div.scroller');
	    this.sections   = this.wrapper.getElementsBySelector('div.section');
	    this.options    = Object.extend({ duration: 1.0, frequency: 3 }, options || {});
	    this.sections.each( function(section, index) {
	      section._index = index;
	    });    
	    this.events = {
	      click: this.click.bind(this)
	    };
	    this.addObservers();
			if(this.options.initialSection) this.moveTo(this.options.initialSection, this.scroller, { duration:this.options.duration });  // initialSection should be the id of the section you want to show up on load
			if(this.options.autoGlide) this.start();
	  },
  addObservers: function() {
    var controls = this.wrapper.getElementsBySelector('div.controls a');
    controls.invoke('observe', 'click', this.events.click);
  },	

  click: function(event) {
		this.stop();
    var element = Event.findElement(event, 'a');
    if (this.scrolling) this.scrolling.cancel();
    this.moveTo(element.href.split("#")[1], this.scroller, { duration:this.options.duration });     
    Event.stop(event);
  },

	moveTo: function(element, container, options){
			this.current = $(element);
			Position.prepare();
	    var containerOffset = Position.cumulativeOffset(container),
	     elementOffset = Position.cumulativeOffset($(element));
		  this.scrolling 	= new Effect.SmoothScroll(container, 
				{duration:options.duration, x:(elementOffset[0]-containerOffset[0]), y:(elementOffset[1]-containerOffset[1])});
		  return false;
		},

  next: function(){
    if (this.current) {
      var currentIndex = this.current._index;
      var nextIndex = (this.sections.length - 1 == currentIndex) ? 0 : currentIndex + 1;      
    } else var nextIndex = 1;
    this.moveTo(this.sections[nextIndex], this.scroller, { 
      duration: this.options.duration
    });
  },

  previous: function(){
    if (this.current) {
      var currentIndex = this.current._index;
      var prevIndex = (currentIndex == 0) ? this.sections.length - 1 : 
       currentIndex - 1;
    } else var prevIndex = this.sections.length - 1;
    this.moveTo(this.sections[prevIndex], this.scroller, { 
      duration: this.options.duration
    });
  },

	stop: function()
	{
		clearTimeout(this.timer);
	},

	start: function()
	{
		this.periodicallyUpdate();
	},

	periodicallyUpdate: function()
	{ 
		if (this.timer != null) {
			clearTimeout(this.timer);
			this.next();
		}
		this.timer = setTimeout(this.periodicallyUpdate.bind(this), this.options.frequency*1000);
	}
});

Effect.SmoothScroll = Class.create();
Object.extend(Object.extend(Effect.SmoothScroll.prototype, Effect.Base.prototype), {
  initialize: function(element) {
    this.element = $(element);
    var options = Object.extend({
      x:    0,
      y:    0,
      mode: 'absolute'
    } , arguments[1] || {}  );
    this.start(options);
  },
  setup: function() {
    if (this.options.continuous && !this.element._ext ) {
      this.element.cleanWhitespace();
      this.element._ext=true;
      this.element.appendChild(this.element.firstChild);
    }
    this.originalLeft=this.element.scrollLeft;
    this.originalTop=this.element.scrollTop;
    if(this.options.mode == 'absolute') {
      this.options.x -= this.originalLeft;
      this.options.y -= this.originalTop;
    } 
  },

  update: function(position) {   
    this.element.scrollLeft = this.options.x * position + this.originalLeft;
    this.element.scrollTop  = this.options.y * position + this.originalTop;
  }
});

Head:

<link rel="stylesheet" type="text/css" href="./css/liquidstyle.css" />
		<link rel="stylesheet" type="text/css" href="./css/screen.menumatic.css" />
		<link rel="stylesheet" type="text/css" href="./css/jd.gallery.css" />
		<script src="../root/scripts/core.js" type="text/javascript"></script>
		<script src="../root/scripts/mootools-1.2.1-core.js" type="text/javascript"></script>
		<script src="../root/scripts/mootools-1.2-more.js" type="text/javascript"></script>
		<script src="../root/scripts/menumatic.js" type="text/javascript"></script>
		<script src="../root/scripts/com_form.js" type="text/javascript"></script>
		<script src="../root/scripts/com_list.js" type="text/javascript"></script>
		<script src="../root/scripts/com_panel.js" type="text/javascript"></script>
		<script src="../root/scripts/com_tab.js" type="text/javascript"></script>
		<script src="../root/scripts/roar.js" type="text/javascript"></script>
		<script src="../root/scripts/jd.gallery.js" type="text/javascript"></script>
		<script src="../root/scripts/jd.gallery.transitions.js" type="text/javascript"></script>
		<script src="../root/scripts/_class.noobSlide.packed.js" type="text/javascript"></script>

page:

<script type="text/javascript">
window.addEvent('domready',function(){
		var nS2 = new noobSlide({
			box: $('box2'),
			size: 945,
			items: [0,1,2,3,4],
			interval: 3000,
			fxOptions: {
				duration: 2500,
				transition: Fx.Transitions.Bounce.easeOut,
				wait: false
			},
			addButtons: {
				previous: $('prev1'),
				next: $('next1')
			}
		});
	});	
</script>

HTML:

<div class="mask2">
	<div id="box2">
		<span class="sShow"><img src="images/branding_your_website/img_1.jpg" alt="Photo" /></span>
		<span class="sShow"><img src="images/branding_your_website/img_2.jpg" alt="Photo" /></span>
		<span class="sShow"><img src="images/branding_your_website/img_3.jpg" alt="Photo" /></span>
		<span class="sShow"><img src="images/branding_your_website/img_4.jpg" alt="Photo" /></span>
	</div>
</div>

<p class="buttons">
	<span id="prev1">&lt;&lt; Previous</span>
	<span id="next1">Next &gt;&gt;</span>
</p>

    		window.addEvent('domready', function(){
			//-vertical
			
			var mySlide = new Fx.Slide('v.menu-4');
			mySlide.hide(); 
			$('toggle-4').addEvent('click', function(e){
				e = new Event(e);
				mySlide.toggle();
				e.stop();
			});

		});

function build_page(url, id){
	$('ajax_box').set('html', '');
	dbug.log('Obj URL: ',  id, url);
	   // Get the requested view
	   var view = new Request.JSON({ 
		url: url, onSuccess: function(jsonObj){
		   view_category(jsonObj.selectbar, id);
		}
	   }).send().chain(function(){
		 new Fx.Tween(service).start('opacity', '1');
	   });
   }

// Viewing the Title, Description and sub descriptions
   function view_category(oSelect, id){
	add_select_box(oSelect, id);
	oSelect.each(function(oOptions){
	   if(oOptions.id == id){
		var service_type = new Element('div', {id: oOptions.id, 'class': 'sub_choice'}).inject($('ajax_box'), 'bottom');
		oOptions.options.each(function(oSub){
		   var blank_div = new Element('div').inject(service_type, 'bottom'); // Needed for the Expand Link to work
		   var service_title = new Element('h2').set('html', oSub.title).inject(blank_div, 'bottom'); // Title
		   var service_description = new Element('p').set('html', oSub.description).inject(blank_div, 'bottom'); // Description
		   var expand = new Element('div', {'class': 'expanding'}).inject(blank_div, 'bottom'); // Expanding Sub Box
			if(oSub.sub != undefined){
			   // Expanding and Colapsing Link
			   var service_elink = new Element('a', {href: 'javascript:void(0)', onclick: 'expand(this); return false'}).set('html', 'more').inject(service_description); 
			   oSub.sub.each(function(oSubOptions){
				var sub_div = new Element('div').inject(expand, 'bottom');
				var sub_title = new Element('h3').set('html', oSubOptions.title).inject(sub_div, 'bottom'); // Sub Title
				var sub_description = new Element('p').set('html', oSubOptions.description).inject(sub_div, 'bottom'); // Sub description
				if(oSubOptions.sub_description != undefined){
				   var sub_elink = new Element('a', {href: 'javascript:void(0)', onclick: 'expand(this); return false'}).set('html', 'more').inject(sub_description);
				   var sub_expanding = new Element('div', {'class': 'expanding'}).inject(sub_div, 'bottom'); // Sub Sub Expanding
				   var sub_sub_description = new Element('p').set('html', oSubOptions.sub_description).inject(sub_expanding, 'bottom'); // Sub Sub Description
				};
			   });
			};
		});
	   }
	});
	
   };

function add_select_box(oSelect, id){
	var select_box = new Element('div', {id:'select_box'}).inject($('ajax_box'));
	var formSelectVar = new Element('select');
	oSelect.each(function(item){
	   if(item.id == id){
		var continue_div = new Element('div', {id:'continue'}).inject(select_box);
		new Element('a', {href:'javascript:void(0)'}).inject(continue_div);
		if(item.id == id){
		   // Create each option for the first select box
		   item.options.each(function(myArray){ 
			var formOption = new Element ('option').set('html', myArray.title).inject(formSelectVar);
		   });
		   new Element('option', {selected:'selected'}).set('html', 'Choose').inject(formSelectVar, 'top');
		   formSelectVar.inject($('select_box'), 'top' ); // This is the First Select Box
		   $('ajax_box').getElement('select').addEvent('change', function(){// Listen for the select box to change
			var categoryValue = $('ajax_box').getElement('select').value;
			   if($('sub_select')){
				var formSelectVar = $('sub_select').set('html', '');
			   }else {
				var formSelectVar = new Element('select', {id:'sub_select'});
			   }
			   // Make a secondary select box for additional options
			var notdefined;
			item.options.each(function(myArray){
			   if(myArray.sub != undefined && myArray.title == categoryValue){
			   dbug.log('Secondary Select: ', myArray.sub, myArray.title, categoryValue)
				myArray.sub.each(function(subArray){
				   var formOption = new Element ('option').set('html', subArray.title).inject(formSelectVar);
				});
				notdefined = false;
			   }else if(myArray.title == categoryValue){
				dbug.log('Else Dialoge: ', myArray.sub, myArray.title, categoryValue)
				notdefined = true;
			   }
			});
			dbug.log('Not Defined: ', notdefined);
			if(notdefined != true){
			   new Element('option', {selected: 'selected'}).set('html', 'Choose').inject(formSelectVar, 'top');
			   formSelectVar.inject($('select_box')); // This is the second select box
			}else{
			   formSelectVar.dispose();
			}
		   });
		};
	   }
	});
   };

< <head>
	<title>Welcome to Twenty-Four Designs</title>
    <link rel="favicon" HREF="http://twentyfourdesigns.com/favicon.ico" />
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
	<script src="js/mootools.js" type="text/javascript"></script>
	<script src="js/noobslide.js" type="text/javascript"></script>
	<script src="js/portfolio.js" type="text/javascript"></script>
    
</head>

<body>

<div id="wrap">

<div id="header"><img src="Images/24designsLogo.png" alt="Twenty-four Designs Logo" width="264" height="92" class="photo" /><a href="mailto:deb@twentyfourdesigns.com"><img src="Images/DebSmithContact.png" width="279" height="92" class="photo2" alt="Deborah Smith's Portfolio" /></a></div>

<div id="slide-mask">
<div id="slide-images">
	<img src="Images/PortfolioImages/MiddlefieldFront.png" alt="" />
	<img src="Images/PortfolioImages/MiddlefieldSpread1.png" alt="" />
	<img src="Images/PortfolioImages/MiddlefieldSpread2.png" alt="" />
	<img src="Images/PortfolioImages/MiddlefieldSpread3.png" alt="" />
	<img src="Images/PortfolioImages/MiddlefieldSpread4.png" alt="" />
	<img src="Images/PortfolioImages/MiddlefieldSpread5.png" alt="" />
	<img src="Images/PortfolioImages/MiddlefieldBack.png" alt="" />
    
	<img src="Images/PortfolioImages/VerizonDroidWrap.png" alt="" />
    <img src="Images/PortfolioImages/VerizonCavsInvite.png" alt="" />
    <img src="Images/PortfolioImages/VerizonSMBGuide.png" alt="" />
    
    <img src="Images/PortfolioImages/DCPressKitFront.png" alt="" />
	<img src="Images/PortfolioImages/DCPressKitInside1.png" alt="" />
	<img src="Images/PortfolioImages/DCPressKitInside2.png" alt="" />
	<img src="Images/PortfolioImages/DCPressKitBack.png" alt="" />
    
    <img src="Images/PortfolioImages/PerfcoPC1.png" alt="" />
	<img src="Images/PortfolioImages/PerfcoPC2Cover.png" alt="" />
	<img src="Images/PortfolioImages/PerfcoPC2inside.png" alt="" />
	<img src="Images/PortfolioImages/PerfcoBillInsert.png" alt="" />
    
    <img src="Images/PortfolioImages/CenturyCatalogFront.png" alt="" />
	<img src="Images/PortfolioImages/CenturyCatalogSpread1.png" alt="" />
	<img src="Images/PortfolioImages/CenturyCatalogSpread2.png" alt="" />
	<img src="Images/PortfolioImages/CenturyCatalogSpread3.png" alt="" />
    
	<img src="Images/PortfolioImages/UCCConcept1Cover.png" alt="" />
	<img src="Images/PortfolioImages/UCCConcept1Spread1.png" alt="" />
	<img src="Images/PortfolioImages/UCCConcept1Spread2.png" alt="" />
	<img src="Images/PortfolioImages/UCCConcept2Cover.png" alt="" />
	<img src="Images/PortfolioImages/UCCConcept2Spread1.png" alt="" />
	<img src="Images/PortfolioImages/UCCConcept2Spread2.png" alt="" />
	<img src="Images/PortfolioImages/UCCConcept2Spread3.png" alt="" /></div>
</div></div>

<div id="slider">    
            <ul class="navigation">

                <li><a href="#AnnualReport">Annual Report&nbsp;&nbsp;&nbsp;:</a></li>
                <li><a href="#Verizon">Verizon Wireless&nbsp;&nbsp;&nbsp;:</a></li>
                <li><a href="#PressKit">Press Kit&nbsp;&nbsp;&nbsp;:</a></li>
                <li><a href="#Perfco">Perfco&nbsp;&nbsp;&nbsp;:</a></li>
                <li><a href="#Century">Century Windows&nbsp;&nbsp;&nbsp;:</a></li>
                <li><a href="#UCC">United Church of Christ</a></li>
            </ul>

<div class="scroll">
				<div class="panel" id="AnnualReport"><p class="text"><strong>Middlefield Banc. 2008 Annual Report</strong> : Printed Four Color Process on Coated Paper</p>
<div id="slide-thumbs">               
	<img src="Images/PortfolioImages/MiddlefieldFront.png" alt="" />
	<img src="Images/PortfolioImages/MiddlefieldSpread1.png" alt="" />
	<img src="Images/PortfolioImages/MiddlefieldSpread2.png" alt="" />
	<img src="Images/PortfolioImages/MiddlefieldSpread3.png" alt="" />
	<img src="Images/PortfolioImages/MiddlefieldSpread4.png" alt="" />
	<img src="Images/PortfolioImages/MiddlefieldSpread5.png" alt="" />
	<img src="Images/PortfolioImages/MiddlefieldBack.png" alt="" /></div></div>
    
                <div class="panel" id="Verizon"><p class="text"><strong>Verizon Wireless</strong> : Slide One - Motorola Droid Box Sleeve : Slide Two - Cleveland Cavaliers' VIP Invite : Slide Three - Small Business Guide (Internal Website)</p>
<div id="slide-thumbs">               
	<img src="Images/PortfolioImages/VerizonDroidWrap.png" alt="" />
	<img src="Images/PortfolioImages/VerizonCavsInvite.png" alt="" />
	<img src="Images/PortfolioImages/VerizonSMBGuide.png" alt="" /></div></div>
    
    <div class="panel" id="PressKit"><p class="text"><strong>Rock. Ride. Remember. Press Kit</strong>  : Printed Four Color Process on Coated Paper : All Over Dull with Spot Varnish : Custom Die Cut </p>
<div id="slide-thumbs">               
	<img src="Images/PortfolioImages/DCPressKitFront.png" alt="" />
	<img src="Images/PortfolioImages/DCPressKitInside1.png" alt="" />
	<img src="Images/PortfolioImages/DCPressKitInside2.png" alt="" />
	<img src="Images/PortfolioImages/DCPressKitBack.png" alt="" /></div></div>
    
    <div class="panel" id="Perfco"><p class="text"><strong>Perfco Bill Insert and Postcards</strong>  : Printed Digital on Coated Paper : Variable Printed with Target Company's Name</p>
<div id="slide-thumbs">               
	<img src="Images/PortfolioImages/PerfcoPC1.png" alt="" />
	<img src="Images/PortfolioImages/PerfcoPC2Cover.png" alt="" />
	<img src="Images/PortfolioImages/PerfcoPC2inside.png" alt="" />
	<img src="Images/PortfolioImages/PerfcoBillInsert.png" alt="" /></div></div>
    
    <div class="panel" id="Century"><p class="text"><strong>Century Windows' Catalog Pages</strong>  : Printed Four Color Process on Coated Paper</p>
<div id="slide-thumbs">               
	<img src="Images/PortfolioImages/CenturyCatalogFront.png" alt="" />
	<img src="Images/PortfolioImages/CenturyCatalogSpread1.png" alt="" />
	<img src="Images/PortfolioImages/CenturyCatalogSpread2.png" alt="" />
	<img src="Images/PortfolioImages/CenturyCatalogSpread3.png" alt="" /></div></div>
    
    <div class="panel" id="UCC"><p class="text"><strong>United Church of Christ Coffee Table Book Concepts</strong>  : Concept 1 - Vellum Wrap on Cover with Spot UV : Concept 2 - Spot UV on Cover</p>
<div id="slide-thumbs">               
	<img src="Images/PortfolioImages/UCCConcept1Cover.png" alt="" />
	<img src="Images/PortfolioImages/UCCConcept1Spread1.png" alt="" />
	<img src="Images/PortfolioImages/UCCConcept1Spread2.png" alt="" />
	<img src="Images/PortfolioImages/UCCConcept2Cover.png" alt="" />
	<img src="Images/PortfolioImages/UCCConcept2Spread1.png" alt="" />
	<img src="Images/PortfolioImages/UCCConcept2Spread2.png" alt="" />
	<img src="Images/PortfolioImages/UCCConcept2Spread3.png" alt="" /></div></div>

</div>
</div>
</body>

* {
   
	margin-left: auto ;
	margin-right: auto ;;
   padding: 0;
   outline: none;
   /*outline: 0;*/

	
}

p.text{
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 11px;
	line-height: 16px;
	color: #000
}

p.text2{
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 12px;
	line-height: 16px;
	font-weight: bolder;
	color: #3c2639;
}

/* ********************************** */

#slide-mask {
	position:relative;
	left:0;
	margin:0;
	padding:0;
	width:920px;
	height:650px;
	overflow:hidden;
	margin-left:auto;
	margin-right:auto;
}
#slide-images {
	position:relative;
	left:0;
	width:9000px;
	height:650px;
	margin-left:auto;
	margin-right:auto;
}
#slide-images img {
	width:920px;
	height:650px;
}

#slide-thumbs {
	background-color:none;
	width:880px;
	height:75px;
	left:0;
	margin-left:auto;
	margin-right:auto;
}
#slide-thumbs img {
	width:106px;
	height:75px;
	cursor:pointer;
}

/* ********************************** */

#slider {
	position:relative;
	left:0;
    width: 900px;
    overflow:hidden;
	margin-left:auto;
	margin-right:auto;
}

.scroll {
	position:relative;
	height: 105px;
	width: 900px;
	overflow-y: hidden;
	background: none;
	margin-left:auto;
	margin-right:auto;
	
}

#scrollContainer div.panel {
	height: 105px;
	width: 900px;
	overflow:hidden;
	margin-left:auto;
	margin-right:auto;
}

ul.navigation {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-bottom: 9px;
}

ul.navigation li {
    display: inline;
    margin-right: 10px;
}

ul.navigation a {
    text-decoration:none;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	border: none;
	color: #3c2639;
	font-weight: bolder;
	text-transform:uppercase;
}

ul.navigation a:hover {
    text-decoration:none;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	border: none;
	color: #5a447a;
	font-weight: bolder;
	text-transform:uppercase;
}

ul.navigation a.selected {
    text-decoration:none;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	border: none;
	color: #3c2639;
	font-weight: bolder;
	text-transform:uppercase;
}

ul.navigation a:focus {
    text-decoration:none;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	border: none;
	color: #3c2639;
	font-weight: bolder;
	text-transform:uppercase;
}

/* ********************************** */

body {
	width: auto;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	background-image: url(Images/bckgrnd.jpg);
	background-repeat: repeat-x;
	background-position: center top;
}

#wrap {
	float: none;
	width: 1000px;
	height: auto;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}

#header {
	width: 1000px;
	height: 100px;
	margin-left: auto ;
	margin-right: auto ;
	padding-top: 7px;
}

.photo {
	float: left;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

.photo2 {
	float: right;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

.photo3 {
	margin-left: auto ;
	margin-right: auto ;	
}

a:link {
	text-decoration:none;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	border: none;
	color: #3c2639;
	font-weight: bolder;
	text-transform:uppercase;
}
a:visited {
    text-decoration:none;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	border: none;
	color: #3c2639;
	font-weight: bolder;
	text-transform:uppercase;
}
a:active {
	text-decoration:none;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	border: none;
	color: #3c2639;
	font-weight: bolder;
	text-transform:uppercase;
}
a:hover {
	text-decoration:none;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	border: none;
	color: #5a447a;
	font-weight: bolder;
	text-transform:uppercase;}

// JavaScript Document
window.addEvent("domready", function ()
  {
	var effect = {property:'left',duration:700, transition:Fx.Transitions.Linear, wait:false};
	var nS = new noobSlide({
		box: $('slide-images'),
		items: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30],
		size:925,
		handles: $$('#slide-thumbs img'),			handle_event: 'mouseenter',

		fxOptions: effect,
	  	onWalk: function(currentItem,currentHandle){
		  $each($$(this.handles), function(handle,index){
				handle.get('tween', {property: 'opacity', duration: 'short'}).start(1);
		});
	      currentHandle.get('tween', {property: 'opacity', duration: 'short'}).start(0.5);
	 	},
	});
	
  });

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ErikaCervantes.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">

#main{width:1100px;height:618px;background: url('img/BG.jpg') no-repeat;margin-left:-550px;left:50%;position:absolute}
#words{text-align:right;padding-right:30px;padding-top:30px;}
.window{width:963px;height:492px;margin-left:-477px;left:50%;position:absolute;background: url('img/windowBG.jpg');top:49px;}
.content{float:left;width:618px;height:330px;margin-left:55px;}
.scroll{height:220px;width:36px;float:right;text-align:left;margin-top:60px;}
.contenthead{padding-top:52px;padding-left:47px;height:35px;width:300px;margin-bottom:15px;}
.right{padding-right: 50px; padding-top: 57px; text-align:right;width:200px;float:right;}
.back{padding-top:145px;margin-right:-10px}
.nav
.left{width:600px;height:490px;float:left;}
#production{visibility: hidden;}
#erika{visibility:hidden;}
img{border:0px;}

</style>

<script type="text/javascript" src="roll.js"></script>
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript">

function showErika(){
$('words').tween('opacity',0);
      $('erika').set('tween',{duration : 2000}).fade([0,1]);    

}

function hideErika(){
$('erika').tween('opacity',0);
      $('words').set('tween',{duration : 2000}).fade([0,1]);    

}

function showProduction(){
$('words').tween('opacity',0);
      $('production').set('tween',{duration : 2000}).fade([0,1]);    

}

function hideProduction(){
$('production').tween('opacity',0);
      $('words').set('tween',{duration : 2000}).fade([0,1]);  
}
</script>



</head>
<body style="padding-top:15px;">

<div id="main">

	<div id="words"><img src="img/erika_off.jpg" alt="erika_off" width="" height="" onclick="javascript:showErika();" /><img src="img/productions_off.jpg" alt="productions_off" width="" height=""  onclick="javascript:showProduction();" style="padding-top:10px;" /></div><!--words-->
	
	<div class="window" id="erika">
	
		<div class="right">
			<div id="navErika">
			<a href="http://www.imdb.com/name/nm2563825/"  target="_blank"><img src="img/imdb_off.jpg"  width="" alt="Erika Cervantes on IMDB" height="" /></a>
			<a href="ECfilmography.pdf" ><img src="img/filmog_off.jpg" alt="Download Erika Cervantes Filmography" width="" height="" /></a>
			<a href="#"  target="_blank"><img src="img/editing_off.jpg" alt="View Erika Cervantes Editing Reel" width="" height="" /></a>
			<a href="mailto:erikamcervantes@gmail.com" ><img src="img/contact_off.jpg" alt="Contact Erika Cervantes" width="" height="" /></a>
			</div><!--navErika-->
			<img src="img/erikamail.jpg" alt="erikamail" width="" height="" />
		
			<div class="back"><img src="img/back_off.jpg" alt="Back" width="" height="" onclick="javascript:hideErika();" /></div><!--back-->
		</div><!--right-->
		<div id="left">
			<div class="contenthead"><img src="img/erikaHeader.jpg" alt="Erika Cervantes" width="" height="" /></div><!--contenthead-->
			<div class="content">
			<!--Scrollable iframe script- By Dynamic Drive-->
<!--For full source code and more DHTML scripts, visit http://www.dynamicdrive.com-->
<!--This credit MUST stay intact for use-->

<iframe class="datamain" src="zen/index.php?album=erika" name="bio" width="618" height="330" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" ></iframe>
</div><!--content-->
<div class="scroll">

<a href="#" onmouseover="scrollspeed=-1" onmousedown="scrollspeed=-2" onmouseout="scrollspeed=0"><img src="img/scrolltop.jpg" alt="scrolltop" width="" height="" /></a><br/><img src="img/scrollmid.jpg" alt="scrollmid" width="" height="" /><br /><a href="#"  onmouseover="scrollspeed=1" onmouseout="scrollspeed=0" onmousedown="scrollspeed=2"><img src="img/scrollbottom.jpg" alt="scrollbottom" width="" height="" /></a>

</div><!--scroll-->						
		</div><!--left-->
	</div><!--window erika-->
	
	<div class="window" id="production">
	
		<div class="right">
			<div class="nav">
			<a href="zen/index.php?album=features"  target="prod"><img src="img/features_off.jpg" alt="features" width="" height="" /></a>
			
			<a href="zen/index.php?album=shorts"  target="prod"><img src="img/shorts_off.jpg" alt="shorts" width="" height="" /></a><br />
			
			<a href="zen/index.php?album=web"  target="prod"><img src="img/web_off.jpg" alt="web" width="" height="" /></a>
			
			<a href="zen/index.php?album=music"  target="prod"><img src="img/music_off.jpg" alt="music videos" width="" height="" style="padding-bottom:25px;" /></a>
			
			</div><!--nav-->
			<div class="back"><a href="zen/news" target="prod"><img src="img/back_off.jpg" alt="Back" width="" height="" onclick="javascript:hideProduction();" /></a></div><!--back-->
		</div><!--right-->
		
		<div class="left">
			<div class="contenthead"><img src="img/erikatitle.jpg" alt="Erika Cervantes Productions" width="" height="" /></div><!--contenthead-->
	<div class="content">
			<!--Scrollable iframe script- By Dynamic Drive-->
			<!--For full source code and more DHTML scripts, visit http://www.dynamicdrive.com-->
			<!--This credit MUST stay intact for use-->

<iframe class="datamain" src="zen/news/" name="prod" width="618" height="330" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" ></iframe>
</div><!--content-->
<div class="scroll">

<a href="#" onmouseover="scrollspeed=-1" onmousedown="scrollspeed=-2" onmouseout="scrollspeed=0"><img src="img/scrolltop.jpg" alt="scrolltop" width="" height="" /></a><br/><img src="img/scrollmid.jpg" alt="scrollmid" width="" height="" /><br /><a href="#"  onmouseover="scrollspeed=1" onmouseout="scrollspeed=0" onmousedown="scrollspeed=2"><img src="img/scrollbottom.jpg" alt="scrollbottom" width="" height="" /></a>
</div><!--scroll-->		
			
		</div>	<!--left-->
	</div><!--window production-->

</div><!--main-->

</body>
</html>

var Videobox = {

	init: function (options) {
		// init default options
		this.options = Object.extend({
			resizeDuration: 400,	// Duration of height and width resizing (ms)
			initialWidth: 250,		// Initial width of the box (px)
			initialHeight: 250,		// Initial height of the box (px)
			defaultWidth: 425,		// Default width of the box (px)
			defaultHeight: 350,	// Default height of the box (px)
			animateCaption: true,	// Enable/Disable caption animation
			flvplayer: 'storage/js/flvplayer.swf'
		}, options || {});

		this.anchors = [];
		$A($$('a')).each(function(el){
			if(el.rel && el.href && el.rel.test('^vidbox', 'i')) {
				el.addEvent('click', function (e) {
          e = new Event(e);
          e.stop();
          this.click(el);
				}.bind(this));
				this.anchors.push(el);
			}
    }, this);

		this.overlay = new Element('div').setProperty('id', 'lbOverlay').injectInside(document.body);
		this.center = new Element('div').setProperty('id', 'lbCenter').setStyles({width: this.options.initialWidth+'px', height: this.options.initialHeight+'px', marginLeft: '-'+(this.options.initialWidth/2)+'px', display: 'none'}).injectInside(document.body);

		this.bottomContainer = new Element('div').setProperty('id', 'lbBottomContainer').setStyle('display', 'none').injectInside(document.body);
		this.bottom = new Element('div').setProperty('id', 'lbBottom').injectInside(this.bottomContainer);
		new Element('a').setProperties({id: 'lbCloseLink', href: '#'}).injectInside(this.bottom).onclick = this.overlay.onclick = this.close.bind(this);
		this.caption = new Element('div').setProperty('id', 'lbCaption').injectInside(this.bottom);
		this.number = new Element('div').setProperty('id', 'lbNumber').injectInside(this.bottom);
		new Element('div').setStyle('clear', 'both').injectInside(this.bottom);

		var nextEffect = this.nextEffect.bind(this);
		this.fx = {
			overlay: this.overlay.effect('opacity', {duration: 500}).hide(),
			center: this.center.effects({duration: 500, transition: Fx.Transitions.sineInOut, onComplete: nextEffect}),
			bottom: this.bottom.effect('margin-top', {duration: 400})
		};

	},

	click: function(link) {
	
     		return this.open (link.href, link.title, link.rel);

	},
	open: function(sLinkHref, sLinkTitle, sLinkRel) {
		this.href = sLinkHref;
		this.title = sLinkTitle;
		this.rel = sLinkRel;
		this.position();
		this.setup();
		this.video(this.href);
		this.top = Window.getScrollTop() + (Window.getHeight() / 15);
		this.center.setStyles({top: this.top+'px', display: ''});
		this.fx.overlay.start(0.8);
		this.step = 1;
		this.center.setStyle('background','#fff url("/storage/loading.gif) no-repeat center');
		this.caption.innerHTML = this.title;
		this.fx.center.start({'height': [this.options.contentsHeight]});
	},

	setup: function(){
		var aDim = this.rel.match(/[0-9]+/g);
		this.options.contentsWidth = (aDim && (aDim[0] > 0)) ? aDim[0] : this.options.defaultWidth;
		this.options.contentsHeight = (aDim && (aDim[1] > 0)) ? aDim[1] : this.options.defaultHeight;

	},

	position: function(){
    this.overlay.setStyles({'top': window.getScrollTop()+'px', 'height': window.getHeight()+'px'});
	},

	video: function(sLinkHref){
		if (sLinkHref.match(/youtube\.com\/watch/i)) {
      this.flash = true;
			var hRef = sLinkHref;
			var videoId = hRef.split('=');
			this.videoID = videoId[1];
			this.so = new SWFObject("http://www.youtube.com/v/"+this.videoID, "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0");
			this.so.addParam("wmode", "transparent");
		}
		else if (sLinkHref.match(/metacafe\.com\/watch/i)) {
      this.flash = true;
			var hRef = sLinkHref;
			var videoId = hRef.split('/');
			this.videoID = videoId[4];
			this.so = new SWFObject("http://www.metacafe.com/fplayer/"+this.videoID+"/.swf", "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0");
			this.so.addParam("wmode", "transparent");
		}
		else if (sLinkHref.match(/google\.com\/videoplay/i)) {
      this.flash = true;
			var hRef = sLinkHref;
			var videoId = hRef.split('=');
			this.videoID = videoId[1];
			this.so = new SWFObject("http://video.google.com/googleplayer.swf?docId="+this.videoID+"&hl=en", "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0");
			this.so.addParam("wmode", "transparent");
		}
		else if (sLinkHref.match(/ifilm\.com\/video/i)) {
		  this.flash = true;
			var hRef = sLinkHref;
			var videoId = hRef.split('video/');
			this.videoID = videoId[1];
			this.so = new SWFObject("http://www.ifilm.com/efp", "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0", "#000");
			this.so.addVariable("flvbaseclip", this.videoID+"&");
			this.so.addParam("wmode", "transparent");
		}
		else if (sLinkHref.match(/\.mov/i)) {
		  this.flash = false;
			if (navigator.plugins && navigator.plugins.length) {
          this.other ='<object id="qtboxMovie" type="video/quicktime" codebase="http://www.apple.com/qtactivex/qtplugin.cab" data="'+sLinkHref+'" width="'+this.options.contentsWidth+'" height="'+this.options.contentsHeight+'"><param name="src" value="'+sLinkHref+'" /><param name="scale" value="aspect" /><param name="controller" value="true" /><param name="autoplay" value="true" /><param name="bgcolor" value="#000000" /><param name="enablejavascript" value="true" /></object>';
      } else {
        this.other = '<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="'+this.options.contentsWidth+'" height="'+this.options.contentsHeight+'" id="qtboxMovie"><param name="src" value="'+sLinkHref+'" /><param name="scale" value="aspect" /><param name="controller" value="true" /><param name="autoplay" value="true" /><param name="bgcolor" value="#000000" /><param name="enablejavascript" value="true" /></object>';
      }
		}
		else if (sLinkHref.match(/\.wmv/i) || sLinkHref.match(/\.asx/i)) {
		this.flash = false;
		 this.other = '<object NAME="Player" WIDTH="'+this.options.contentsWidth+'" HEIGHT="'+this.options.contentsHeight+'" align="left" hspace="0" type="application/x-oleobject" CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"><param NAME="URL" VALUE="'+sLinkHref+'"><param><param NAME="AUTOSTART" VALUE="false"></param><param name="showControls" value="true"></param><embed WIDTH="'+this.options.contentsWidth+'" HEIGHT="'+this.options.contentsHeight+'" align="left" hspace="0" SRC="'+sLinkHref+'" TYPE="application/x-oleobject" AUTOSTART="false"></embed></object>'
		}
		else if (sLinkHref.match(/\.flv/i)) {
		 this.flash = true;
		 this.so = new SWFObject(this.options.flvplayer+"?file="+sLinkHref, "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0", "#000");
		}
		else {
		  this.flash = true;
			this.videoID = sLinkHref;
			this.so = new SWFObject(this.videoID, "flvvideo", this.options.contentsWidth, this.options.contentsHeight, "0");
		}
	},

	nextEffect: function(){
		switch (this.step++){
		case 1:
			this.fx.center.start({'width': [this.options.contentsWidth], 'marginLeft': [this.options.contentsWidth/-2]});
			break;
			this.step++;
		case 2:
			this.center.setStyle('background','#fff');
			this.flash ? this.so.write(this.center) : this.center.setHTML(this.other) ;
			this.bottomContainer.setStyles({top: (this.top + this.center.clientHeight)+'px', height: '0px', marginLeft: this.center.style.marginLeft, width: this.options.contentsWidth+'px',display: ''});
			if (this.options.animateCaption){
				this.fx.bottom.set(-this.bottom.offsetHeight);
				this.bottomContainer.style.height = '';
				this.fx.bottom.start(0);
				break;
			}
			this.bottomContainer.style.height = '';
			this.step++;
		}
	},

	close: function(){
		this.fx.overlay.start(0);
		this.center.style.display = this.bottomContainer.style.display = 'none';
		this.center.innerHTML = '';
		return false;
	}

};


window.addEvent('domready', Videobox.init.bind(Videobox));

<script src="/storage/js/mootools.js"></script> <script src="/storage/js/swfobject.js"></script> <script src="/storage/js/videobox.js"></script>
<link href="/storage/js/videobox.css" media="screen" rel="stylesheet" type="text/css" />
<div id="vid1"><a title="caption" rel="vidbox" href="http://www.youtube.com/watch?v=3xpM1MPMjBc"><img src="/storage/vid1.jpg" alt="" /></a></div>
<div id="vid2"><a title="caption" rel="vidbox" href="http://www.youtube.com/watch?v=3xpM1MPMjBc"><img src="/storage/vid2.jpg" alt="" /></a></div>
<div id="vid2"><a title="caption" rel="vidbox" href="http://www.youtube.com/watch?v=3xpM1MPMjBc"><img src="/storage/vid3.jpg" alt="" /></a></div>

//<![CDATA[
var $j = jQuery.noConflict();
$j(document).ready(function(){

    var Playlist = function(instance, playlist, options) {
        var self = this;

        this.instance = instance; // String: To associate specific HTML with this playlist
        this.playlist = playlist; // Array of Objects: The playlist
        this.options = options; // Object: The jPlayer constructor options for this playlist

        this.current = 0;

        this.cssId = {
            jPlayer: "jquery_jplayer_",
            interface: "jp_interface_",
            playlist: "jp_playlist_"
        };
        this.cssSelector = {};

        $j.each(this.cssId, function(entity, id) {
            self.cssSelector[entity] = "#" + id + self.instance;
        });

        if(!this.options.cssSelectorAncestor) {
            this.options.cssSelectorAncestor = this.cssSelector.interface;
        }

        $j(this.cssSelector.jPlayer).jPlayer(this.options);

        $j(this.cssSelector.interface + " .jp-previous").click(function() {
            self.playlistPrev();
            $j(this).blur();
            return false;
        });

        $j(this.cssSelector.interface + " .jp-next").click(function() {
            self.playlistNext();
            $j(this).blur();
            return false;
        });
    };

    Playlist.prototype = {
        displayPlaylist: function() {
            var self = this;
            $j(this.cssSelector.playlist + " ul").empty();
            for (i=0; i < this.playlist.length; i++) {
                var listItem = (i === this.playlist.length-1) ? "<li class='jp-playlist-last'>" : "<li>";
                listItem += "<a href='#' id='" + this.cssId.playlist + this.instance + "_item_" + i +"' tabindex='1'>"+ this.playlist[i].name +"</a>";

                // Create links to free media
                if(this.playlist[i].free) {
                    var first = true;
                    listItem += "<div class='jp-free-media'>(";
                    $j.each(this.playlist[i], function(property,value) {
                        if($j.jPlayer.prototype.format[property]) { // Check property is a media format.
                            if(first) {
                                first = false;
                            } else {
                                listItem += " | ";
                            }
                            listItem += "<a id='" + self.cssId.playlist + self.instance + "_item_" + i + "_" + property + "' href='" + value + "' tabindex='1'>" + property + "</a>";
                        }
                    });
                    listItem += ")</span>";
                }

                listItem += "</li>";

                // Associate playlist items with their media
                $j(this.cssSelector.playlist + " ul").append(listItem);
                $j(this.cssSelector.playlist + "_item_" + i).data("index", i).click(function() {
                    var index = $j(this).data("index");
                    if(self.current !== index) {
                        self.playlistChange(index);
                    } else {
                        $j(self.cssSelector.jPlayer).jPlayer("play");
                    }
                    $j(this).blur();
                    return false;
                });

                // Disable free media links to force access via right click
                if(this.playlist[i].free) {
                    $j.each(this.playlist[i], function(property,value) {
                        if($j.jPlayer.prototype.format[property]) { // Check property is a media format.
                            $j(self.cssSelector.playlist + "_item_" + i + "_" + property).data("index", i).click(function() {
                                var index = $j(this).data("index");
                                $j(self.cssSelector.playlist + "_item_" + index).click();
                                $j(this).blur();
                                return false;
                            });
                        }
                    });
                }
            }
        },
        playlistInit: function(autoplay) {
            if(autoplay) {
                this.playlistChange(this.current);
            } else {
                this.playlistConfig(this.current);
            }
        },
        playlistConfig: function(index) {
            $j(this.cssSelector.playlist + "_item_" + this.current).removeClass("jp-playlist-current").parent().removeClass("jp-playlist-current");
            $j(this.cssSelector.playlist + "_item_" + index).addClass("jp-playlist-current").parent().addClass("jp-playlist-current");
            this.current = index;
            $j(this.cssSelector.jPlayer).jPlayer("setMedia", this.playlist[this.current]);
        },
        playlistChange: function(index) {
            this.playlistConfig(index);
            $j(this.cssSelector.jPlayer).jPlayer("play");
        },
        playlistNext: function() {
            var index = (this.current + 1 < this.playlist.length) ? this.current + 1 : 0;
            this.playlistChange(index);
        },
        playlistPrev: function() {
            var index = (this.current - 1 >= 0) ? this.current - 1 : this.playlist.length - 1;
            this.playlistChange(index);
        }
    };



    var audioPlaylist = new Playlist("1", [
        {
            name:"Tempered Song",
            mp3:"http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.mp3"
            
        },
        {
            name:"Hidden",
            mp3:"http://tamtam123.squarespace.com/storage/images/avenged_unholyc.mp3"
            
        }
        

    ], {
        ready: function() {
            audioPlaylist.displayPlaylist();
            audioPlaylist.playlistInit(false); // Parameter is a boolean for autoplay.
        },
        ended: function() {
            audioPlaylist.playlistNext();
        },
        play: function() {
            $j(this).jPlayer("pauseOthers");
        },
        swfPath: "storage/js",
        supplied: "mp3"
    });

    $j("#jplayer_inspector_1").jPlayerInspector({jPlayer:$j("#jquery_jplayer_1")});
    $j("#jplayer_inspector_2").jPlayerInspector({jPlayer:$j("#jquery_jplayer_2")});
});
//]]>

<script>
window.addEvent('domready', function() {
var tabs = $$('div[id^="tab"]');
tabs.fade('hide');

$$('#buttons li a').each(function(element,index){
    element.addEvent('click',function(){
        tabs.fade(0);
        tabs[index].fade(1);
    });
});
});
</script> 

<ul id="buttons">
     <li><a href="#">button 1</a></li>
     <li><a href="#">button 2</a></li>
     <li><a href="#">button 3</a></li>
     <li><a href="#">button 4</a></li>
</ul>

<div id="tab1">content for button 1</div>
<div id="tab2">content for button 2</div>
<div id="tab3">content for button 3</div>
<div id="tab4">content for button 4</div>