/* js enchanced functionality */

/* Noscipt - Quirksmode advises this usage to hide any noscript content with only
 * the smallest chance of non-dynamic content being displayed to the user
 */ 
var W3CDOM = (document.getElementsByTagName && document.createElement);
if (W3CDOM) document.write('<link rel="stylesheet" href="../css/noscript.css" />');


// For some reason I just prefer to run jQuery in no conflict mode
jQuery.noConflict();


// Hide the little arrows when the search boxes receive focus
jQuery(document).ready(function() {
    jQuery('#header-search .text').blur(function () {
        jQuery(this).css('background-color', 'transparent');
    });
    jQuery('#header-search .text').focus(function () {
        jQuery(this).css('background-color', '#fff');
    });
    
    jQuery('#footer-search .text').blur(function () {
        jQuery(this).css('background-color', 'transparent');
    });
    jQuery('#footer-search .text').focus(function () {
        jQuery(this).css('background-color', '#333');
    });
});
 
// Set up the scroller widget
jQuery(document).ready(function() {
    RedStripeScroller.init();
});
 
 //Redstripe scroller widget
 var RedStripeScroller = {
     
     loadedImagesArray: null,
     loadedSlideImagesArray: null,
     imageLinksArray: null,
     imgArray: null,
     slideImgArray: null,
     altArray: null,
     scrollTimer: null,
	 rotationStopped: null,
     iteration: null,
     
     init: function() {
        //Show hidden items
        jQuery('#animated-content-scrolling-thumbs').prepend('<a class="scroll-prev"> </a>');
        jQuery('#animated-content-scrolling-thumbs').append('<a class="scroll-next"> </a>');
        jQuery('.items div').not('.items div div').show();
        //Set the loading image on the main image container
        jQuery('.animated-content-main-image-container').addClass('loading');
        RedStripeScroller.extractImageInformation();
        RedStripeScroller.preloadImages();
        iteration = 0;
		rotationStopped = false;
        RedStripeScroller.setClickEvents();
        RedStripeScroller.setFadeEvents();
        RedStripeScroller.initScroller();
		//If we're ready to go, go, else wait for the first item to load
		var waitTimer = setInterval(function () {
            if (RedStripeScroller.checkItemIsReadyToDisplay(0)) {
	            RedStripeScroller.startImageRotation();
      	        RedStripeScroller.fadeInItem(0);
                clearInterval(waitTimer);  
	        }
        }, 1000);

        //Fixes safari win applying css before javascript runs thus hiding the scroller
        setTimeout("jQuery('.items div').not('.items div div').fadeIn(500);", 1000);
     },
	 
	 checkItemIsReadyToDisplay : function(i) {
	 	if (jQuery(loadedImagesArray[i]).data('loaded') == 'loaded' && jQuery(loadedSlideImagesArray[i]).data('loaded') == 'loaded') {
			return true;
		} else {
			return false;
		}
	 },
	 
	 fadeInItem : function (i) {
		//Create link, Create image, and append image to link
		var link = jQuery(document.createElement('a'))
		    .addClass('animated-content-main-image-link')
		    .attr('href', imageLinksArray[i])
		    .append(loadedImagesArray[i])
		    .append(jQuery(document.createElement('span')).append(loadedSlideImagesArray[i]));
			
		//fade out the panel, append link to panel, fade in the panel
		jQuery('.animated-content-main-image-container').add(jQuery('.animated-content-main-image-link span')).fadeOut(600, function(){
		    var panel = jQuery('.animated-content-main-image-container');
            jQuery('.animated-content-main-image-link', panel).remove();
		    jQuery(panel).append(link);
		    jQuery(panel).fadeIn(1000, function() {
                jQuery('.animated-content-main-image-link span').animate({width : "452px"}, 1000, "swing");
            });
		});


	 },
     
     extractImageInformation: function () {
        imgArray = new Array();
        slideImgArray = new Array();
        altArray = new Array();      
        imageLinksArray = new Array();
        jQuery('.items div').not('.items div div').each(function (){     
            //get image src
            imgArray.push(jQuery('.item-image:first', this).text());
            //get slide image src
            slideImgArray.push(jQuery('.item-slide-image:first', this).text());
            //get image alt
            altArray.push(jQuery('img:first', this).attr('alt'));  
            //get image link
            imageLinksArray.push(jQuery('.item-link:first', this).text()); 
        }); 
     },
     
     preloadImages: function () {
        loadedImagesArray = new Array();
        for (i = 0; i < imgArray.length; i++) {
            var image = jQuery(document.createElement('img'));
            jQuery(image).attr('alt',altArray[i]).attr('class', 'panel-image');;
            loadedImagesArray.push(image);
            jQuery(loadedImagesArray[i]).load(function () {
                jQuery(this).data('loaded','loaded');                   
            }).attr('src',imgArray[i]);
        }   
        loadedSlideImagesArray = new Array();
        for (i = 0; i < slideImgArray.length; i++) {
            var image = jQuery(document.createElement('img'));
            jQuery(image).attr('alt',altArray[i]).attr('class', 'sliding-image');
            loadedSlideImagesArray.push(image);
            jQuery(loadedSlideImagesArray[i]).load(function () {
                jQuery(this).data('loaded','loaded');                   
            }).attr('src',slideImgArray[i]);
        }   
     },
     
     setClickEvents: function() {
        //Set the click event for the scrollable items
        jQuery('.items div').not('.items div div').click(function (){
            //Stop the image rotation
            RedStripeScroller.stopImageRotation();
            //get the array index
            var indexOfThis = RedStripeScroller.getIndexOfItem(jQuery('.item-image:first', this).text());
			RedStripeScroller.fadeInItem(indexOfThis);
        });
        jQuery('.scroll-next').add('.scroll-prev').click(function (){      
            //Stop the image rotation
            RedStripeScroller.stopImageRotation();   
        });
     },
     
     getIndexOfItem: function(clickedElementImage) {
        var indexOfThis;
        for(i = 0 ; i <= loadedImagesArray.length; i++) {
            if (clickedElementImage == jQuery(loadedImagesArray[i]).attr('src')) {
                indexOfThis = i;
            }   
        }
        return indexOfThis;
     },
     
     startImageRotation: function() {
         if (!rotationStopped) {          
             scrollTimer = setInterval(function () {
                //if there is not image to remove, then there has been an error, do nothing.
                if (jQuery('.animated-content-main-image-link img').length != 0) {
                    //get the array index
                    var indexOfThis = RedStripeScroller.getIndexOfItem(jQuery('.animated-content-main-image-link img').attr('src'));
                    if (indexOfThis == (loadedImagesArray.length - 1)) { //Loop to beginning
                        indexOfThis = -1;
                        iteration++;
                    }
                    //Do nothing if next image isn't loaded
                    if (jQuery(loadedImagesArray[indexOfThis + 1]).data('loaded') == "loaded" || iteration > 0) {
						RedStripeScroller.fadeInItem(indexOfThis + 1);                        
                    }            
                } 
         
             },6000);
         }
     },
     
     stopImageRotation: function() {
	 	clearInterval(scrollTimer);
		rotationStopped = true;
     },
     
     pauseImageRotation: function(timeToPauseFor) {
	 	 clearInterval(scrollTimer);
		 if (typeof timeToPauseFor == 'number' && timeToPauseFor != 0) {
		 	setTimeout(RedStripeScroller.startImageRotation(), abs(timeToPauseFor));     
		 }
     }, 
     
     setFadeEvents: function() {
        //Set the fade events for the scrolling items
        jQuery("div.items div").hover(function () {
            RedStripeScroller.pauseImageRotation();
            jQuery(this).fadeTo(100, 0.33);
        },
        function () {
            RedStripeScroller.startImageRotation();
            jQuery(this).fadeTo(500, 1);
        }
        );
     },
     
     initScroller: function() {
        // initialize scrollable plugin
        jQuery("div.scrollable").scrollable({
            vertical:true, 
            size: 3,
            next: ".scroll-next",
            prev: ".scroll-prev",
            keyboard: true,
            easing: "swing"
        }); 
     }
     
 };