﻿$(function () {   
    PicViewer.Run();
});

var PicViewer = {
    loop: true,    // show first picture again after last picture
    counter: 1,    // start on first picture
    foward: true,  // go forward or backward
    delay: 5,      // seconds to show each picture
    numItems: 0,   //number of pic viewer items, set at run time 
    slides: new Array(),
    Run: function () {
        var count = 1;
        var _this = this;
        _this.numItems = $('.picViewer').length;
        $.each($('.picViewer'), function () {
            var slide = {
                content: $('.picViewerContent', this).html(),
                image: $('.picViewerRightCol', this).html()
            }
            PicViewer.slides[count] = slide;
            count++;
        });
        
      SetControls();
	  SetEventHandlers();
       
		
		function SetEventHandlers() {
		 $("#picViewerPause").click(function () {
            ClickPause();
          });
         $('#picViewerSlides div').click(function () {
            GoToSlide(this);
          });
         $("#picViewerFwd").click(function () {
            ClickForward();
          });
         $("#picViewerBack").click(function () {
            ClickBack();
         });		
		}
		
        function SetControls() {
		  if (_this.numItems==4){
		    $('#picViewer4').removeClass('picViewerHide');
		  }
		  else if (_this.numItems==5){
		    $('#picViewerSlides div').removeClass('picViewerHide');
		  }
		  
		}

        function StartTimer() {
            $(document).everyTime(1000 * _this.delay, function () {
                if (_this.loop) {
                    if (_this.foward) {
                        if (_this.counter == _this.numItems) {
                            _this.counter = 1;
                        } else {
                            _this.counter++;
                        }
                    } else {
                        if (_this.counter == 1) {
                            _this.counter = _this.numItems;
                        } else {
                            _this.counter--;
                        }
                    }
                    RotatePicViewer(_this.counter);
                }
            });
        };

        function RotatePicViewer(counter) {
            $("#picViewer" + counter).click();
        };

        function ClickBack() {
            $(document).stopTime();
            if (_this.counter == 1) {
                _this.counter = _this.numItems;
            } else {
                _this.counter--;
            }
            _this.foward = false;
            GoToSlide(GetSlide(_this.counter));
            StartTimer();
        };

        function ClickForward() {
            $(document).stopTime();
            if (_this.counter == _this.numItems) {
                _this.counter = 1;
            } else {
                _this.counter++;
            }
            _this.foward = true;
            GoToSlide(GetSlide(_this.counter));
            StartTimer();
        };

        function GetSlide(index) {
            return $('#picViewer' + index);
        };

        function ClearActiveSlideIndicator() {
		    for(var i=1; i<= _this.numItems;i++){
			var onClass='picViewer'+i+'-On';
            $('#picViewerSlides div').removeClass(onClass);
			}
        };

        function GoToSlide(slide) {
            ClearActiveSlideIndicator();
            var currentActiveClass = $(slide).attr("id") + '-On';
            $(slide).addClass(currentActiveClass);
            var currentSlideToShow = $('#picViewerSlides div').index(slide) + 1;
            UpdateSlideContent(currentSlideToShow);
        };

        function UpdateSlideContent(slideIndex) {
            $('#picViewerSlide1 .picViewerContent').html(_this.slides[slideIndex].content);
            $('#picViewerSlide1 .picViewerRightCol').html(_this.slides[slideIndex].image);
            _this.counter = slideIndex;
        }

        function GoToSlide(slide) {
            ClearActiveSlideIndicator();
            var currentActiveClass = $(slide).attr("id") + '-On';
            $(slide).addClass(currentActiveClass);
            var currentSlideToShow = $('#picViewerSlides div').index(slide) + 1;
            UpdateSlideContent(currentSlideToShow);
        }

        function ClickPause() {
            if (_this.loop) {
                _this.loop = false;
            } else {
                _this.loop = true;
            }
        };
        StartTimer();
    }
};



