var ThumbGallery = function(el){
	var t = this;
	this.$el = $(el);
	this.imgs = this.$el.find('img');
	this.box = $('<div class="slideShowBox" />');
	this.il = $('<ul class="slideshowImageList"/>');
	this.main = $('<div class="mainImage"/>');
	this.currImg = 0;
	this.listInd = 0;
	this.rlArr = $('<div class="listArrow right"></div>');
	this.llArr = $('<div class="listArrow left"></div>');
	this.rmArr = $('<div class="mainArrow right"></div>');
	this.lmArr = $('<div class="mainArrow left"></div>');
	this.imgWidth = 93;
	
	this.imgs.each(function(i){
		var li = $('<li />');
		var inner = $('<div class="inner" />');
		inner.append(this).appendTo(li);
		li.appendTo(t.il);
		$(this).bind('click', function(){
			t.showImg(i);
		});
	});
	
	this.il.width(this.imgs.length * this.imgWidth);
	this.box.append(this.main).append(this.il).insertAfter(this.$el);
	if(this.imgs.length > 4){
		t.rlArr.bind('click', function(){t.onListArrowClick('right')});
		t.llArr.bind('click', function(){t.onListArrowClick('left')});
		this.box.append(t.rlArr).append(t.llArr);
	}
	if(this.imgs.length > 0){
		t.rmArr.bind('click', function(){t.onMainArrowClick('right')});
		t.lmArr.bind('click', function(){t.onMainArrowClick('left')});
		this.box.append(t.rmArr).append(t.lmArr);		
	}
	this.showImg(this.currImg);
	this.$el.remove();
	
}
ThumbGallery.prototype.showImg = function(img){
	var t = this;
	var src = this.imgs.eq(img).attr('src');
	src = src.replace('-125x125', '');
	
	this.il.children('li').eq(img).addClass('selected').siblings().removeClass('selected');
	this.main.fadeOut(200, function(){
		t.main.html('<a href="'+src+'"><img src="'+src+'"/></a>').fadeIn(200);
	});
}
ThumbGallery.prototype.onListArrowClick = function(dir){
	var t = this;
	switch(dir){
		case 'left':
		if(t.listInd > 0){
			t.listInd--;
		}
		break;
		
		case 'right':
		if(t.listInd < t.imgs.length - 4){
			t.listInd++;
		}
		break;
	}
	
	t.moveList(t.listInd);
}
ThumbGallery.prototype.onMainArrowClick = function(dir){
	var t = this;
	switch(dir){
		case 'left':
		if(t.currImg > 0){
			t.currImg--;
		}
		break;
		
		case 'right':
		if(t.currImg < t.imgs.length - 1){
			t.currImg++;
		}
		break;
	}
	
	t.showImg(t.currImg);
}
ThumbGallery.prototype.moveList = function(ind){
	var t = this;
	var dist = ind * this.imgWidth;
	this.il.animate({marginLeft : -dist}, {duration:200});
}
ThumbGallery.prototype.hideMe = function(){
	this.box.fadeOut(200);
}
ThumbGallery.prototype.showMe = function(dly){
	
	this.box.delay(dly).fadeIn(200);
}

var ProjectPage = function(){
	var t = this;
	this.gals = [];
	this.headlines = $('#listfaq li a.linkfaq');
	
	$('#cbSlideGalleries .gallery').each(function(i){
		var tg = new ThumbGallery(this);
		t.gals.push(tg);
		if(i !== 0){
			tg.box.hide();
		}
	});
	
	
	this.headlines.bind('click', function(){
		if(!$(this).hasClass('active')){
			var ind = t.headlines.index(this);
			for(var i=0;i<t.gals.length;i++){
				if(i === ind){
					t.gals[i].showMe(200)
				}else{
					t.gals[i].hideMe();
				}
			}
			$('.linkfaq.active').click();
		}
	});
}

$(document).ready(function(){
/*
	$('.nav ul li a').mouseover(function(e){
		$(e.target).parent().find('ul').fadeIn();
	});
*/

	if($('#cbSlideGalleries').length){
		new ProjectPage();
	}
});