CaseBox = Class.create();
CaseBox.prototype = {

	initialize: function() {
		// console.log("initting casebox");

		this.studies = [		
			{
				"idx" : 0,
				"url" : "case/study13.html",
				"images" : [
					"4113_seton1.jpg",
					"4113_seton2.jpg",
					"4113_seton3.jpg",
					"4113_seton4.jpg",
					"4113_seton5.jpg"
				],
				"titles" : [
					"Exterior Building",
					"Interior Lobby Hall",
					"Interior Lobby Foyer",
					"Interior Lobby Foyer"
				]
			},
			{
				"idx" : 1,
				"url" : "case/study12.html",
				"images" : [
					"4112_northbroad1.jpg",
					"4112_northbroad2.jpg",
					"4112_northbroad3.jpg",
					"4112_northbroad4.jpg",
					"4112_northbroad5.jpg",
					"4112_northbroad6.jpg"
				],
				"titles" : [
					"Exterior Building Detail",
					"Exterior Building",
					"Interior Shot One",
					"Interior Shot Two",
					"Interior Kitchen",
					"Floor Plan"
				]
			},
			{
				"idx" : 2,
				"url" : "case/study11.html",
				"images" : [
					"4111_hollows1.jpg",
					"4111_hollows2.jpg",
					"4111_hollows3.jpg",
					"4111_hollows4.jpg",
					"4111_hollows5.jpg"
				],
				"titles" : [
					"Exterior Building One",
					"Exterior Building Two",
					"Exterior Building Three",
					"Exterior Building Four",
					"Exterior Building Five"
				]
			},
			{
				"idx" : 3,
				"url" : "case/study10.html",
				"images" : [
					"4110_unitex1.jpg",
					"4110_unitex2.jpg"
				],
				"titles" : [
					"Exterior Building",
					"Interior"
				]
			},
			{
				"idx" : 4,
				"url" : "case/study09.html",
				"images" : [
					"4109_wells1.jpg",
					"4109_wells2.jpg",
					"4109_wells3.jpg",
					"4109_wells4.jpg",
					"4109_wells5.jpg"
				],
				"titles" : [
					"Exterior Rendering",
					"Exterior Building",
					"Interior First Floor",
					"Interior Kitchen",
					"Exterior Deck"
				]
			},
			{
				"idx" : 5,
				"url" : "case/study08.html",
				"images" : [
					"4108_west1.jpg"
				],
				"titles" : [
					"Exterior Rendering"
				]
			},
			{
				"idx" : 6,
				"url" : "case/study07.html",
				"images" : [
					"4107_yonkers1.jpg",
					"4107_yonkers2.jpg",
					"4107_yonkers3.jpg"
				],
				"titles" : [
					"Exterior Rendering Detail",
					"Exterior Rendering Building",
					"Aerial Map"
				]
			},
			{
				"idx" : 7,
				"url" : "case/study06.html",
				"images" : [
					"4106_orange1.jpg",
					"4106_orange2.jpg"
				],
				"titles" : [
					"Exterior Rendering",
					"Floor Plan"
				]
			},
			{
				"idx" : 8,
				"url" : "case/study05.html",
				"images" : [
					"4105_bucharest1.jpg",
					"4105_bucharest2.jpg",
					"4105_bucharest3.jpg",
					"4105_bucharest4.jpg"
				],
				"titles" : [
					"Exterior Rendering One",
					"Exterior Rendering Two",
					"Exterior Rendering Three",
					"Exterior Rendering Four"
				]
			},
			{
				"idx" : 9,
				"url" : "case/study04.html",
				"images" : [
					"4104_connaught1.jpg"
				],
				"titles" : [
					"Exterior Building Shot"
				]
			},
			{
				"idx" : 10,
				"url" : "case/study03.html",
				"images" : [
					"4103_castlecourt1.jpg"
				],
				"titles" : [
					"Exterior Building"
				]
			},
			{
				"idx" : 11,
				"url" : "case/study02.html",
				"images" : [
					"4102_morris1.jpg"
				],
				"titles" : [
					"Exterior Rendering"
				]
			},
			{
				"idx" : 12,
				"url" : "case/study01.html",
				"images" : [
					"4101_postgrad1.jpg"
				],
				"titles" : [
					"Exterior Rendering"
				]
			},
						
			
			
			
		]
		
		this.state = {
			is_open: false,
			current_url: undefined,
			current_gallery_idx: undefined,
			content_loading: false
		}
		
		this.buildPane();
	},
	
	openURL: function(url) {
		// console.log("opening url:"+url);
		if (!this.state.is_open) {
			this.showPane();
		}
		
		this.state.content_loading = true;
		this.state.current_url = url;
		$('lb_contentholder').setOpacity(0.7);
		$('lb_loader').appear({duration: 0.2});
		// console.log("CURRENT URL is now:"+this.state.current_url);
		this.state.content_loader = new Ajax.Updater('lb_contentholder', url, {
			evalScripts: true,
			method: 'get',
			onComplete: function() {
				caseBox.state.content_loading = false;
				caseBox.initBoxGallery();
				caseBox.setupGalleryButtons();
				$('lb_loader').fade({duration: 0.3, delay: 0.5});
				$('lb_contentholder').appear();
			},
			onError: function() {
				caseBox.state.content_loading = false;
				alert("Was unable to load content");
			}
		});
		
	},
	
	buildPane: function() {
		//building basic panel here.
		// console.log("building pane");

		this.backpane = new Element('div', {id:'lb_back'});
		this.backpane.setStyle({
			opacity: 0
		});
		document.body.appendChild(this.backpane);
		this.backpane.hide();
		
		this.contentpane = new Element('div', {id:'lb_pane'});
		this.contentpane.hide();
		
		this.contentholder = new Element('div', {id:'lb_contentholder'});
		this.loader = new Element('div', {id:'lb_loader'});
		this.closebox = new Element('a', {id:'lb_closebox'});
		this.closebox.innerHTML = "CLOSE (X)";
		Event.observe(this.closebox, 'click', this.closePane.bindAsEventListener(this));
		
		//prev, next buttons
		this.prevbut = new Element('a', {id:'lb_prevbut'});
		this.nextbut = new Element('a', {id:'lb_nextbut'});
		this.prevbut.setOpacity(0);
		this.nextbut.setOpacity(0);
		Event.observe(this.prevbut, 'click', this.caseGoPrev.bindAsEventListener(this));
		Event.observe(this.nextbut, 'click', this.caseGoNext.bindAsEventListener(this));

		this.contentpane.appendChild(this.contentholder);
		this.contentpane.appendChild(this.closebox);
		this.contentpane.appendChild(this.loader);
		document.body.appendChild(this.contentpane);
		document.body.appendChild(this.prevbut);
		document.body.appendChild(this.nextbut);
		
		Event.observe(this.backpane, 'click', this.closePane.bindAsEventListener(this));
	},
	
	showPane: function() {
		if (this.state.is_open) {
			// console.log("already shown");
			return false;
		}
		
		// console.log("showing pane");
	
		this.state.is_open = true;
		// console.log("is open set to:" + this.state.is_open);
		
		this.recenterPane();
		this.backpane.setOpacity(0);
		if (Prototype.Browser.IE) {
			this.backpane.setStyle({height: document.viewport.getHeight()});
		}
		this.backpane.show();
		new Effect.Opacity(this.backpane, {duration: 1, from: 0, to: 0.8});
		new Effect.BlindDown(this.contentpane, {duration: 0.5, delay: 0.3});
	
	},
	
	closePane: function() {
		// console.log("about to close panel, current state open?" + this.state.is_open);
		if (this.state.is_open) {
			// console.log("closing panel");
			this.state.is_open = false;
			new Effect.Fade(this.backpane, {duration: 0.3, delay: 0.5});
			new Effect.BlindUp(this.contentpane, {duration: 0.6});
			new Effect.Fade(this.prevbut, {duration: 0.3});
			new Effect.Fade(this.nextbut, {duration: 0.3});
			//.... ?
		} else {
			// console.log("panel is already closed");
		}
	},
	
	recenterPane: function() {
		if (this.state.is_open) {
			//using fixed centering element
			var holderW = $('content_holder').getDimensions().width;
			var newX = ((holderW - this.contentpane.getWidth())/2).round();
			this.contentpane.setStyle({left: newX+"px"})
		}
	},
	
	initBoxGallery: function() {
		//console.log("init box gallery states:"+this.state.toJSON());		
		var the_url = this.state.current_url;
		
		//setting current_gallery_idx
		var currentGallery = this.studies.find(function(elt) {
			// console.log("compare: "+the_url+ " / "+elt.url);
			return(the_url.include(elt.url));
		});
		if (currentGallery==undefined) {
			alert("gallery info not found for URL: "+the_url);
			return false;
		}
		this.state.current_gallery_idx = currentGallery.idx;
			
		var images = currentGallery.images;
		var titles = currentGallery.titles;
				
		//we adding images into the #case_thumbs container
		var holder = $('case_thumbs');
		
		images.each(function(elt, curidx) {
			// console.log("3");
			var oneImgA = new Element('a', {href: '#', rel : curidx, alt : titles[curidx]});
			oneImgA.setStyle({opacity: 0.0});
			Event.observe(oneImgA, 'click', caseBox.galleryImageClick.bindAsEventListener(this));
			
			// console.log("4");
			
			var oneImg = new Image();
			Event.observe(oneImg, 'load', function() { oneImg.up().appear({duration: 2, delay: 0.7});	});
			//oneImg.onload = function() { oneImg.up().appear({duration: 2, delay: 0.7});	}
			oneImg.src = '/img/studies/'+elt;				
			oneImgA.appendChild(oneImg);
			if (Prototype.Browser.IE && oneImg.complete) {
				oneImg.up().appear({duration: 2, delay: 0.7});
			}
			$('case_thumbs').appendChild(oneImgA);
		});
		
		// console.log("initted image content in gallery");
		
		this.setGalleryItemIdx(0);
		
	},
	
	galleryImageClick: function(event) {
		var target = event.target;
		event.stop();
		var curidx;
		if (target.tagName=='IMG') {
			target = target.up();
		}
		curidx = target.rel;
		
		caseBox.setGalleryItemIdx(curidx);
	},
	
	setGalleryItemIdx: function(idx) {
		var imagelinks = $$('#case_thumbs a');
		var mainimg = $$("#case_mainimg img").first();
		mainimg.src = '/img/studies/'+caseBox.studies[caseBox.state.current_gallery_idx].images[idx];
		$('case_title').innerHTML = caseBox.studies[caseBox.state.current_gallery_idx].titles[idx]
		imagelinks.each(function(elt, curidx) {
			if (idx==curidx) {
				elt.addClassName('current');
			} else {
				elt.removeClassName('current');
			}
		});
	},

	setupGalleryButtons: function() {	
		this.prevbut.style.left = (parseInt(this.contentpane.style.left)-this.prevbut.getWidth())+"px";
		this.nextbut.style.left = (parseInt(this.contentpane.style.left)+this.contentpane.getWidth())+"px";
		if (this.state.current_gallery_idx>0) {
			this.prevbut.appear({duration: 0.5});
		} else {
			this.prevbut.fade({duration: 0.5});
		}
		// console.log("studies cnt:"+this.studies.length);
		if (this.state.current_gallery_idx<this.studies.length-1) {
			this.nextbut.appear({duration: 0.5});
		} else {
			this.nextbut.fade({duration: 0.5});
		}
	},
	
	caseGoNext: function() {
		caseBox.openURL(caseBox.studies[caseBox.state.current_gallery_idx+1].url);
	},
	
	caseGoPrev: function() {
		caseBox.openURL(caseBox.studies[caseBox.state.current_gallery_idx-1].url);
	}

}