Window.onDomReady(init);

function init(){
	
	// init scrollbar
	if($('copyContainer')){
		// check if it needs a scroll
		if($('copyContainer').getSize().scrollSize.y > $('copyContainer').getSize().size.y){
			// close the copy and nest it within a div with the id 'scrollableCopy'
			scrollableCopy = $('copyContainer').clone()
			scrollableCopy.setProperty('id','scrollableCopy');
			
			$('copyContainer').empty();
			scrollableCopy.injectInside('copyContainer');
			
			// create scroll bar and inject it after the copy container div
			scrollBar = new Element('div', {'id': 'scrollbar'});
			scrollKnob = new Element('div', {
										'events': {
											'mouseover': function(){
												$('knob').effect('background-color', {duration: 300}).start("ffffff");
											},
											'mouseout': function(){
												$('knob').effect('background-color', {duration: 300}).start("ABABAB");
											}
										},
										'id': 'knob'
									});
			
			scrollKnob.injectInside(scrollBar);
			scrollBar.injectAfter('copyContainer');
			$('scrollableCopy').setStyle('top',0);
			
			ticked = false;
			// set up slide
			var mySlide = new Slider($('scrollbar'), $('knob'), {
				steps: 200,
				mode: 'vertical',
				onTick: function(step){
					ticked = true;
					$('knob').effect('top', {duration: 600}).start(step);
				},
				onComplete: function(step){
					ticked = false;
				},
				onChange: function(step){

					// change top of content
					elHeight = $('scrollableCopy').getSize().size.y - $('copyContainer').getSize().size.y + 50;
						
					// devide by two because there are 200 steps
					percent = (step/2)/100;
					newTop = Math.round(-(elHeight * percent));
					//$('knob').setHTML("ticked: " + ticked);
					
					if(ticked){
						$('scrollableCopy').effect('top', {duration: 600}).start(newTop);
					}else{
						$('scrollableCopy').setStyle('top', newTop);
					}
				}
			}).set(0);
		}
	}
	
	var userAgent = navigator.userAgent.toLowerCase();
	
	// Init tooltips
	if($$('.tooltips').length){
		var myTips = new Tips($$('.tooltips'), {
			maxTitleChars: 500,
			fixed: true,
			offsets: {x:-109, y:0},
			initialize:function(){
				var userAgent = navigator.userAgent.toLowerCase();
				if (userAgent.indexOf('mac') != -1 && userAgent.indexOf('firefox') !=-1) {
					// mac firefox has issues when fading text ontop of content. font colors underneath get messed up
				}else{
					this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 400, wait: false}).set(0);
				}
			},
			onShow: function(toolTip) {
				newTop = toolTip.getTop() - toolTip.getSize().size.y;
				toolTip.setStyle('top', newTop);

				if (userAgent.indexOf('mac') != -1 && userAgent.indexOf('firefox') !=-1) {
					toolTip.setStyle('visibility', 'visible');
				}else{
					this.fx.start(1);
				}
			},
			onHide: function(toolTip) {
				if (userAgent.indexOf('mac') != -1 && userAgent.indexOf('firefox') !=-1) {
					toolTip.setStyle('visibility', 'hidden');
				}else{
					this.fx.start(0);
				}
			}
		});
	}
	
	// Init work statement links
	if($$('.work').length){
		$$('.work .workInfo').each(function(el){
		 	el.onmouseover = function(){
		 		$(this.parentNode.id).addClass('rolledOver');
		 		$(this.parentNode.id+'Image').addClass('rolledOver');
		 		this.addClass('rolledOver');
		 		return false;
		 	},
		 	el.onmouseout = function(){
		 		$(this.parentNode.id).removeClass('rolledOver');
		 		$(this.parentNode.id+'Image').removeClass('rolledOver');
		 		this.removeClass('rolledOver');
		 		return false;
		 	}
		});
		
		if($$('.workToolTip').length){
			var myWorkTips = new Tips($$('.workToolTip'), {
				maxTitleChars: 500,
				fixed: true,
				className: 'workTool',
				offsets: {x:-50, y:0},
				initialize:function(){
					var userAgent = navigator.userAgent.toLowerCase();
					if (userAgent.indexOf('mac') != -1 && userAgent.indexOf('firefox') !=-1) {
						// mac firefox has issues when fading text ontop of content. font colors underneath get messed up
					}else{
						this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 200, wait: false}).set(0);
					}
				},
				onShow: function(toolTip) {
					newTop = toolTip.getTop() - toolTip.getSize().size.y + 15;
					toolTip.setStyle('top', newTop);
	
					if (userAgent.indexOf('mac') != -1 && userAgent.indexOf('firefox') !=-1) {
						toolTip.setStyle('visibility', 'visible');
					}else{
						this.fx.start(1);
					}
				},
				onHide: function(toolTip) {
					if (userAgent.indexOf('mac') != -1 && userAgent.indexOf('firefox') !=-1) {
						toolTip.setStyle('visibility', 'hidden');
					}else{
						this.fx.start(0);
					}
				}
			});
		}
		
		$$('.work .workImage img').each(function(el){
		 	el.onmouseover = function(){
		 		$(this.parentNode.parentNode.parentNode.id).addClass('rolledOver');
		 		$(this.parentNode.parentNode.parentNode.id+'Info').addClass('rolledOver');
		 		$(this.parentNode.parentNode.parentNode.id+'Image').addClass('rolledOver');
		 		return false;
		 	},
		 	el.onmouseout = function(){
		 		$(this.parentNode.parentNode.parentNode.id).removeClass('rolledOver');
		 		$(this.parentNode.parentNode.parentNode.id+'Info').removeClass('rolledOver');
		 		$(this.parentNode.parentNode.parentNode.id+'Image').removeClass('rolledOver');
		 		return false;
		 	}
		});
		
		$$('.work .workImage .rollOverTitleLink').each(function(el){
		 	el.onmouseover = function(){
		 		$('titleInstruction').setStyle('display', 'none');
				$(this.id+'Title').setStyle('display', 'block');
		 		return false;
		 	},
		 	el.onmouseout = function(){
				$(this.id+'Title').setStyle('display', 'none');
				$('titleInstruction').setStyle('display', 'block');
		 		return false;
		 	}
		});
		
		if($('artistList')){
			if(window.ie){
				var sfEls = document.getElementById("artistListMenu").getElementsByTagName("LI");
				for (var i=0; i<sfEls.length; i++) {
					sfEls[i].onmouseover=function() {
						this.className+=" sfhover";
					}
					sfEls[i].onmouseout=function() {
						this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
					}
				}
			}
		}
	}	
	
	// Init enlarge button
	if($('enlargeButton')){	
		$$('#enlargeButton a').each(function(el){
		 	el.onclick = function(){
		 		popUpWindow("pano",this.getProperty('href'),780,500,false);
		 		return false;
		 	}
		});
	}
}

function popUpWindow(name, url, width, height,tools){
	// get current browser position
	var winl = (screen.width - width) / 2;
    var wint = (screen.height - height) / 2;
	
	if(tools){
		toolBars = "toolbar=yes,directories=yes,status=yes,menubar=yes,scrollbars=yes,resizable=yes";
	}else{
		toolBars = "toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no";
	}

	TheNewWin = window.open(url,name,'height='+height+',width='+width+', top='+wint+',left='+winl+','+toolBars);
}