var CarouselJS =  {
		
	carousel_element : '',
	buttonsListHolderId : '',
	timeout:  5000,
	duration: 1000,
	periodicExecuter: null,
	prevSlideNumber: 0,
	nextSlideNumber : 0,
	imageHolderIds: [],
	isPlaying: true,
	activeSlide:'',
	activeButton:'',
	
	init: function(){
		_this = this;
	},
	
	//extended bind
	//Bind method uses apply method to return a method / function with its this  keyword consistant to the object invoking it.
	Bind: function (Method){
		var _this = this;
		return (
			function(){
				return (Method.apply(_this,arguments));
			}
		);
	},
        
	startCarousel: 
		function (slideHolderId, buttonsListHolderId){
			this.init();
			this.carousel_id = slideHolderId;
			this.buttonsListHolderId = buttonsListHolderId;
			this.carousel_element = $(slideHolderId);
			
			this.extractImageHolderIds();
			
		},
		
	extractImageHolderIds:
		function(){
            this.slides_ref= slides_ref = this.carousel_id+' div';
            imageHolderIds = [];       
			($(slides_ref)).each(function(i,a){
				imageHolderIds[i] = $(a).attr('id');
			});
			
			this.imageHolderIds = imageHolderIds;
			var closure	= this.Bind(this.showNextSlide);
			
			if(this.periodicalExecuter == null){
				this.periodicExecuter = setInterval(closure,this.timeout);
			}
            //this.showNextSlide();
		},
		
	showSlideById:
		function(nextIndex){
			this.setActiveSlideInfo();		
			this.nextSlide = $('#'+this.imageHolderIds[nextIndex-1]);
			this.activeSlide.addClass('last-active');
			var active = this.activeSlide;
			var duration = this.duration;
			this.nextSlide.css({opacity:0.0})
				.addClass('active')
				.animate({opacity:1.0},duration,function(){
					active.removeClass('active last-active');	
				});
		},
		
	setActiveSlideInfo:
		function(){
			this.activeSlide = $(this.carousel_id+' div.active');
			this.activeList = $(this.buttonsListHolderId+' li.active');
			this.activeButton = this.activeList.find('>a');
			
			//in case no active slide/list/button is added by default, set last slide as active
			if (this.activeSlide.length==0)
				this.activeSlide = $('#slideshow DIV:last');
			if(this.activeList.length==0){
				this.activeList = $(this.buttonsListHolderId+' li:last');
				this.activeButton = this.activeList.find('>a');
			}		

		},

	animateSlides:

		function(){
			var active = this.activeSlide;
			var duration = this.duration;
			this.nextSlide.css({opacity:0.0})
				.addClass('active')
				.animate({opacity:1.0},duration, function(){
					active.removeClass('active last-active');
				});
				
			this.activeList.removeClass('active');
			this.activeButton.removeClass('active');
			this.nextList.addClass('active');
			this.nextButton.addClass('active');		
		
		},
		
	showNextSlide:
		function(){

			this.setActiveSlideInfo();
			
			//extract next div in the order they appear in markup
			this.nextSlide = this.activeSlide.next().length? this.activeSlide.next(): $(this.carousel_id+' div:first');
			this.nextList  = this.activeList.next().length? this.activeList.next(): $(this.buttonsListHolderId+' li:first');	
			this.nextButton = this.nextList.find('>a');
			
			this.activeSlide.addClass('last-active');
			//animate
			this.animateSlides();
	   } ,
		
	showPrevSlide:
		function(){
			
				this.setActiveSlideInfo();
				
				//extract next div in the order they appear in markup
				this.nextSlide = this.activeSlide.prev().length? this.activeSlide.prev(): $(this.carousel_id+' div:last');
				this.nextList  = this.activeList.prev().length? this.activeList.prev(): $(this.buttonsListHolderId+' li:last');	
				//console.log(this.nextList);
				
				this.nextButton = this.nextList.find('>a');
				
				this.activeSlide.addClass('last-active');
				
				//console.log('about to animate');
				this.animateSlides();
	   } 

};

$(document).ready(function(){
	CarouselJS.startCarousel('#slideshow', '#rotationbuttons');
	$('#next').click(function(){
		if(CarouselJS.periodicExecuter!==null){
			clearInterval(CarouselJS.periodicExecuter);
		}	
		CarouselJS.showNextSlide();
	});
	
	$('#prev').click(function(){
		if(CarouselJS.periodicExecuter!==null){
			clearInterval(CarouselJS.periodicExecuter);
		}	
		CarouselJS.showPrevSlide();
	});
	
	$('#rotationbuttons a').click(function(event){
		if(CarouselJS.periodicExecuter!==null){
			clearInterval(CarouselJS.periodicExecuter);
		}
		event.preventDefault();
		$('#rotationbuttons a').removeClass('active');
		$('#rotationbuttons li').removeClass('active');
		
		$(this).parent('li').addClass('active');
		$(this).addClass('active');
		var myHref = $(this).attr('href');
		myHref = myHref.split('#');	
		var idToLoad = parseInt(myHref[1].substr(3));
		CarouselJS.showSlideById(idToLoad);
	});
	
});