$(document).ready( function() {

           var currentPicture = -1,
               pages = { "home": 0 , "thumbs": 1, "detail": 2 },
               currentPage = pages.home,
               imageArray = [],
               currentImage = 0;


           function clickThumbnail (e) {         	
               var target = e.target.parentNode.href;

               e.stopPropagation();
               e.preventDefault();
                      
               currentPage = pages.detail;

               currentImage = findImageInArray(target);

               loadPicture(target);

               $('#prevnext').fadeIn(1500);
            }

           function loadPicture(target) {
               var img = new Image(),
                   oldImgs = $("#mainpicture img"),
                   imgHeight = 0, 
                   imgTitle = $("#imagetitle"), 
                   showAll = $("#showall");

               $(img).load( function () {
                       // set the image hidden by default    
                       $(this).hide();
                       // with the holding div #loader, apply:
                       $('#mainpicture').append(this);
                     
                       imgHeight = this.height + 20;
                       $('#mainpicture').css({ height: imgHeight });

                       // then insert our image
                       $(this).fadeIn(1000, function() {oldImgs.remove();});
                       $("#thumbs").fadeOut(1000);
                       // update the description
                       imgTitle.hide();
                       imgTitle.text(imageArray[currentImage].label);
                       imgTitle.fadeIn(1000);
                       showAll.hide();
                       showAll.fadeIn(1000);

                   })
                   // *finally*, set the src attribute of the new image to our image
                  .attr('src', target);

           }

           function findImageInArray(href) {
               var i = 0;
               // search the imagesArray to find one matching the passed href
               // maybe use indexOf here
                while ((imageArray[i].href !== href ) && (i <= imageArray.length)) {
                    i++;
                }
                return i;
           }

 
           function showPicture (picturePath, callback) {         	
               var img = new Image(),
                   origImg = $('#mainpicture img');

               if (currentPage == pages.home) {

                   $(img).load( function () {
                       // set the image hidden by default    
                       $(this).hide();
                       // with the holding div #loader, apply:
                       $('#mainpicture').append(this);
                       // then insert our image
                       // fade our image in to create a nice effect
                       $(this).fadeIn(1000, function () {
                                              origImg.remove();
                                              callback(); });

                   })
                   // *finally*, set the src attribute of the new image to our image
                  .attr('src', picturePath);

               }
           }

           
           function showNext() {

             if (pics === []) {
               return;
             }

              currentPicture++;
              if (currentPicture > 3) {
                 currentPicture = 0;
              }
              window.setTimeout(function () {
                                    showPicture(pics[currentPicture], showNext); }, 3000);
	      
           } 		

          function showThumbs () {
              var tns = $("#tns"),
                  divs = $("#tns > div") ,  
                  curDiv = 0,
                  showNextDiv = null,
                  thumbHeight = 0;

              $('#prevnext').hide();
              $("#thumbs").show();
              $('#catalogmain').animate({width: "960px"}, 2000);

              thumbHeight = $('#thumbs').outerHeight();
              $('#mainpicture').css({ height: thumbHeight });
              $('#imagetitle').text('');
              $('#showall').hide();
              tns.hide();
              tns.fadeIn(1500);
              processThumbLinks();  
          }         

          function processThumbLinks() {

              imageArray =[];  

              $("#tns a").each(function(i) {
                                   imageArray.push({ href : this.href, label : $(this).text() });
                               })
                         .click(function(e) {
                                   clickThumbnail(e);
                               });
          }

          function showEvent(e) {
    
              e.stopPropagation();
              e.preventDefault();
              $(e.target).addClass('active');
              
              currentPage = pages.thumbs;
        
              target = e.target.href + " #tns";
              
              $('#mainpicture img').fadeOut(1500);
              $('#rightcol').fadeOut(1500);

              $("#thumbs").load(target, showThumbs); 
    
              return false;
        
         }


         function clickNav(path) {

              path = path.replace('/', '');  


              $('#nav a').each(function() {
                 var active = $(this).hasClass('active');

                 if (($(this).attr('id') === path) && (!active))  { 
                    $(this).trigger('click', [true]);
                 }
              });

         } 

         function showHome() {
            console.log('show home');
            currentPicture = -1;
            currentPage = pages.home;
            $("#thumbs").fadeOut(1000);
            showNext();
         }

         $("#nav a").click( function (e) {
             $("#nav a").removeClass('active');
             showEvent(e);
         });

         $("#next").click(function(e) { move(1)});
                 

         $("#prev").click(function(e) {move(-1)});

         processThumbLinks();

         function move(diff) {
                              currentImage = currentImage + diff;
                              if (currentImage > imageArray.length -1) {
                                  currentImage = 0;
                              } else if (currentImage < 0 ) {
                                  currentImage = imageArray.length -1;
                              }

                              loadPicture(imageArray[currentImage].href);
         }

    	 $('#prevnext').hide();
       $('#showall').hide();
       showNext();
 });