var oldPos = 0;
 var newPos;

 var carousel = {

     /* 'GLOBAL VARS' - Hidden from the global namespace */
     clickAllowed: 'true',
     imageArray: new Array(),
     slideDimension: 0,
     count: 0,
     imageCount: 0,
     direction: 'Top',


     /* Maps page integer in the url hash to html pages - this is essentially an associative array */
     pageMappings: {},

     /* Initialize the carousel */
     init: function(slideDimension, orientation, viewportHeight, pageMappings) {
         if (orientation !== 'vertical') {
             if (orientation == 'horizontal') {
                 carousel.direction = 'Left';
             }
         }
         carousel.pageMappings = pageMappings;
         /* Preload the slider buttons that need it */
         carousel.preload();
         /* Set up the content slider for the left column */
         $("div#slider").codaSlider();
         var viewport = document.getElementById('viewport').style.height = viewportHeight + 'px';
         this.slideDimension = slideDimension;
         var container = document.getElementById('carouselSlider');
         var image = container.getElementsByTagName('a');
         /* Loop over the images*/
         for (var i = 0; i < image.length; ++i) {
             /* filter out whitespace nodes created by DOM's rubbish API */
             if (image[i].nodeType == 1) {
                 /* Hijack the links */
                 image[i].href = '#' + (this.imageCount + 1);
                 /* Listen for Clicks */
                 image[i].onclick = function(num) {
                     /* Create a closure to the current iteration isn't lost */
                     return function() {
                         /* Assign/de-assign selected classes on the carousel images */
                         $('a.selected').removeClass('selected');
                         image[num].className = 'selected';
                         /* Determine which html we need to load in */
                         var url = image[num].href;
                         var spl = url.split('#');
                         var target = carousel.pageMappings[spl[1]] + ' #slider-wrap';
                         //If there's a resource identifier in the url (#) then send a signal to actionscript  
                         if (spl[1] == 1) {
                             sendToActionScript('graduate_alex');
                         } else if (spl[1] == 2) {
                             sendToActionScript('graduate_alex_month2');
                         } else if (spl[1] == 3) {
                             sendToActionScript('graduate_caroline');
                         } else if (spl[1] == 4) {
                             sendToActionScript('graduate_chris');
                         } else if (spl[1] == 5) {
                             sendToActionScript('gateway_claire');
                         } else if (spl[1] == 6) {
                             sendToActionScript('gateway_claire_month2');
                         } else if (spl[1] == 7) {
                             sendToActionScript('gateway_paul');
                         } else if (spl[1] == 8) {
                             sendToActionScript('gateway_dorothy');
                         } else if (spl[1] == 9) {
                             sendToActionScript('breaking_yvonne');
                         } else if (spl[1] == 10) {
                             sendToActionScript('breaking_yvonne_month2');
                         } else if (spl[1] == 11) {
                             sendToActionScript('breaking_alfa');
                         } else if (spl[1] == 12) {
                             sendToActionScript('breaking_arshiya');
                         }

                         /* Use jquery ajax engine to pull in relevant html */

                         $('#slider-wrap').slideUp('normal', function() {

                         });
                         $("#slider-wrap").load(target, function() {
                             $('#slider-wrap').slideDown('normal');
                             jQuery("div#slider").codaSlider();

                             /* Reset some annoying states that are set by codaSlider */
                             $('div.panelContainer').css({ 'left': '0' });
                             $('#tabs li.transcript a').removeClass('current');
                             $('#tabs li.profile a').addClass('current');
                         });
                     }
                 } (i)
                 carousel.setCarouselToSelectedProfile();
                 ++this.imageCount;
                 this.imageArray.push(image[i]);
             }
         }
         /* Set up some initial states for the back/forward buttons */
         var ptag = document.getElementsByTagName('a');
         for (var i = 0; i < ptag.length; i++) {
             if ((" " + ptag[i].className + " ").toLowerCase().indexOf(" clicker ") != -1) {
                 ptag[i].style.display = 'block';
                 carousel.setControllerStates(true);
                 /* Listen for clicks on the carousel buttons */
                 ptag[i].onclick = function() {

                     if ((" " + this.className + " ").toLowerCase().indexOf(" disabled ") == -1) {
                         var buttonDirection = '';

                         buttonDirection = this.id.replace('button_', '');
                         /* Mechanism to stop the user breaking the carousel by clicking too quickly */
                         if (carousel.clickAllowed) {
                             carousel.clickAllowed = false;
                             /* If the button isn't disabled */
                             if ((" " + this.className + " ").toLowerCase().indexOf(" disabled ") == -1) {
                                 /* Find out the old position of the carousel */



                                 /* Find out the direction the user wants to go in */
                                 if (buttonDirection == 'backwards') {
                                     --carousel.count;
                                     newPos = (oldPos - carousel.slideDimension);

                                 } else if (buttonDirection == 'forwards') {
                                     ++carousel.count;

                                     newPos = (oldPos + carousel.slideDimension);


                                 }
                                 /* Animate the carousel */
                                 //container.style.bottom = newPos;
                                 carousel.animate(container, 'bottom', oldPos, newPos, 'easeInOutSine');
                                 /* Now deal with the back/forwards buttons again */
                                 carousel.setControllerStates(true);
                                 /* Allow the user to click the buttons again after a certain period of time */
                                 setTimeout('carousel.clickAllowed = true', 800);
                                 oldPos = newPos;
                             }
                         }
                     }
                 }
             }
         }
     },

     //set the disabled/enabled states for the carousel buttons
     setControllerStates: function(hash) {
         var l = document.getElementById('button_backwards');
         var r = document.getElementById('button_forwards');
         if (carousel.count == 0) {
             l.className = 'disabled';
         } else if (carousel.count == (carousel.imageCount - 3)) {
            
             r.className += ' ' + 'disabled';
             buttonDirection = '';
             // newPos = '';
             l.className = l.className.replace('disabled', ' ');
         } else if (carousel.count > 0) {
             r.className = l.className.replace('disabled', ' ');
             l.className = l.className.replace('disabled', ' ');
         }
         if (carousel.count > 9) {
             r.className += ' ' + 'disabled';
         }
     },

     //This sets the carousel position and content based on what is fed, via a query string, from Video-blog/Default.aspx
     setCarouselToSelectedProfile: function() {
         carousel.preload();
         if (location.href.indexOf('#') === -1) {
             if (location.href.indexOf('?profileId=') != -1) {
                 var id = location.href.split('?profileId=');
                 var idd = id[1];
                 var target = "profile" + id[1] + ".aspx" + ' #slider-wrap';
                 var container = document.getElementById('carouselSlider');
                 var image = container.getElementsByTagName('a');
                 image[idd].className = 'selected';
                 carousel.count = idd;
                 if (idd != 0) {

                     container.style.bottom = (carousel.slideDimension * idd) + 'px';
                     oldPos = (carousel.slideDimension * idd);
                     //if we've come through from default.apx where the count is set via the querystring
                     // then allow for the count to be above 3 and deal with it accordingly
                     //need to set offset of carousel position and carousel.count
                     if (idd > 12) {
                         container.style.bottom = '801px';
                         oldPos = '267';
                         var y = (idd - 3);
                         carousel.count = (idd - y);
                     }
                     carousel.setControllerStates(false);
                 }
                 $("#slider-wrap").load(target, function() {
                     jQuery("div#slider").codaSlider();
                 });
             }
         }
     },

     //preload images that need to preloaded! 
     preload: function() {
         var upArrow = new Image();
         upArrow.src = '../Images/carousel-images/arrowUp.gif';
         var ArrowDownDisabled = new Image();
         ArrowDownDisabled.src = '../Images/carousel-images/arrowDownDisabled.gif';
     },


     /* Custom animate function */
     animate: function(obj, elm, begin, end, duration, fps, easing) {

         begin = parseFloat(begin);
         end = parseFloat(end);
         var change = end - begin;
         for (i = 1; i <= 16; i++) {
             (function() {
                 increase = 0;
                 var frame = i;
                 function innerChangeWidth() {

                     var s = eval(carousel.easeInOutSine);
                     var increase = s(frame, begin, change, 16);


                     obj.style.bottom = increase + 'px';

                 }

                 timer = setTimeout(innerChangeWidth, 26 * frame);
             })();
         }
     },

     //Credit to Robert Penner for this easing equation...
     easeInOutSine: function(t, b, c, d) {
         return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
     }

 };