// array of carousel features_items
var features_items = new Array();

// browser flag
var is_ie6OrLower = false;

// button flags
var features_next_enabled;
var features_prev_enabled;
var safari_inited = false;

// sliding labels init flag
var features_sliding_labels_init = false;

// is all features flag
var is_all_features = false;

// query string request flag
var feature_query_string_request = false;


/**
 * This is the callback function which receives notification
 * right after initialisation of the carousel
 */
function feature_carousel_initCallback(carousel, state) {
	
	/*if (state == 'init')
        display('Carousel initialised');
    else if (state == 'reset')
        display('Carousel reseted');*/
	
	// set the browser var	
	if (jQuery.browser.msie && parseInt(jQuery.browser.version) <= 6) is_ie6OrLower = true;
		
	// init items array
	var carousel_items = $('#feature_carousel').children();
	for (var i = 0; i < carousel_items.length; i++) {
		var id = $('#feature_carousel a').eq(i).attr('id');		
		var item = new CarouselItem(id, i, false, false);
		features_items.push(item);
	}
	
	// add controls dynamically
	$('.jcarousel-skin-features').after('<div id="features_control_list"><ul class="jcarousel-features-control"></ul></div>');
	for (var i = 0, j = 1; i < carousel_items.length; i++, j++) {
		$('.jcarousel-features-control').append('<li><a href="#" class="replaced">' + j + '</a></li>');
	}
	
	// add callbacks to the main buttons
	jQuery('.jcarousel-skin-features a').bind('click', function() {
														  
		// get the id
		var string_id = jQuery(this).attr('id');
		string_id = string_id.slice(8);
		var id = jQuery.jcarousel.intval(string_id);
														  
		// get the index
		var index =jQuery('.jcarousel-skin-features a').index(this);
		
		// set selected
		setFeatureSelected(index);
		
		// set backgrounds
		setFeatureBackgrounds();			
		
		// hide outlines on click
		this.blur();
		
		// set the content
		setFeatureContent(id);
		
		return false;
		
	});	
	
	// add callbacks to the mini control
	jQuery('.jcarousel-features-control a').bind('click', function() {
														  
		// get the index
		var index = $('.jcarousel-features-control a').index(this);
		
		// set selected
		setFeatureSelected(index);		
		
		// set backgrounds
		setFeatureBackgrounds();			
		
		// hide outlines on click
		this.blur();
		
		// scroll to clicked position
		carousel.scroll(index);
														  
		// get the id
		var string_id = features_items[index].id;
		string_id = string_id.slice(8);
		var id = jQuery.jcarousel.intval(string_id);
		
		// set the content
		setFeatureContent(id);
		
		return false;
		
	});
		
	// add titles to the mini control
	jQuery('.jcarousel-features-control a').attr('title', function() {	
		
		return $('.jcarousel-skin-features').find('a').eq($('.jcarousel-features-control a').index(this)).text()
		
	});
		
	// do rollovers here	
	$('#feature_carousel a').hover(
      function () {
        $(this).css('background-position', 'left bottom');
      }, 
      function () {
        features_items[$('#feature_carousel a').index(this)].selected ? $(this).css('background-position', 'left bottom') : $(this).css('background-position', 'left top');
      }
    );
	
	// init the mini carousel
	initModelFeaturesCarousel();
	
	// set selected if all features
	if (is_all_features) {
		setFeatureSelected(0);
		setFeatureBackgrounds();
	}
			
};

function hideFeatureSlidingLabels() {
	
	$('.carousel_labels').css( { visibility: 'hidden' } );	
	
}


function showFeatureSlidingLabels(first) {
	
	$('.carousel_labels').css( { visibility: 'visible' } );	
	
	var item_width = 121;
	var offset = item_width * (first-1);
	var new_left = 54 - offset;
	
	$('.carousel_labels').css( { left: new_left } );
	$('.carousel_labels').css( { clip: 'rect(0px ' + (844 + offset) + 'px 10px ' + offset + 'px)' } );
	
	// animate in
	if (!is_ie6OrLower) $('.carousel_labels').hide().fadeIn("fast");
	
}


// support functions
function setFeatureSelected(id) {
	
	for (var i = 0; i < features_items.length; i++) {
		features_items[i].selected = false;	
	}
	
	features_items[id].selected = true;	
	
}

function setFeatureStyle(id, expression, style, value) {	

	$(id).find(expression).css(style, value);
	
}


function setFeatureBackgrounds() {
										
		// set the control list backgrounds		
		$('#features_control_list a').css('background-image', 'url(images/a-item-hidden.gif)')
							.filter(function () {								
                 				return features_items[$('#features_control_list a').index(this)].visible;
        					})
            				.css('background-image', 'url(images/a-item-visible.gif)')
							.filter(function () {				  	
                 				return features_items[$('#features_control_list a').index(this)].selected;
        					})
            				.css('background-image', 'url(images/a-item-on.gif)');
							
		
							
		// set the item backgrounds
		$('#feature_carousel a').css('background-position', 'left top')
							.filter(function () {								
                 				return features_items[$('#feature_carousel a').index(this)].selected;
        					})
            				.css('background-position', 'left bottom');							
	
}

function setFeatureContent(id) {
		
	// set content
	$('#feature_container').html($('#feature_content_holder_' + (id)).html()).find('.keyword').tooltip({
		track: true,
		delay: 500
	});
	
	
	initModelFeaturesCarousel();
	
	// animate in
	if (!is_ie6OrLower) $('#feature_container').hide().fadeIn("slow");
	
}


/**
 * This is the callback function which receives notification
 * about the state of the next button.
 */
function feature_carousel_buttonNextCallback(carousel, button, enabled) {
    //display('Next button is now ' + (enabled ? 'enabled' : 'disabled'));
	features_next_enabled = enabled;
		
	// safari bug catching
	if (!jQuery.browser.safari) return;
	
	// set flag first time if safari - always false;
	if (!safari_inited) {
		safari_inited = true;
		return;
	}
	
	// centre
	centreFeatureCarousel();	
	
	// set deep link
	setFeatureDeepLink(carousel);
};

/**
 * This is the callback function which receives notification
 * about the state of the prev button.
 */
function feature_carousel_buttonPrevCallback(carousel, button, enabled) {
    //display('Prev button is now ' + (enabled ? 'enabled' : 'disabled'));
	features_prev_enabled = enabled;
	
	// show the carousel
	$('#feature_carousel_holder').css( { visibility: 'visible' } );	
	
	initFeatureSlidingLabels();	
		
	// safari bug catching
	if (jQuery.browser.safari) return;
	
	// centre
	centreFeatureCarousel();
	
	// set deep link
	setFeatureDeepLink(carousel);	
	
};


function centreFeatureCarousel() {	
	
	var item_width = 120;
	
	// remove buttons if both disabled
	if (!features_next_enabled && !features_prev_enabled) {
		
		var width = 0;		
		var carousel_children = $('.jcarousel-skin-features ul').children();
		for (var i = 0; i < carousel_children.length; i++) {
			width += item_width;
		}	
		// AJM - 26/11/2008 IE6 is having problems with width calculation needs a little bit more
		if (is_ie6OrLower)	{
			width += 20;
		}
		
		// centre the carousel
		$('.jcarousel-skin-features .jcarousel-next-horizontal').css( { visibility: 'hidden' } );
		$('.jcarousel-skin-features .jcarousel-prev-horizontal').css( { visibility: 'hidden' } );	
		$('.jcarousel-skin-features .jcarousel-clip-horizontal').css( { width: width } );	
		$('.jcarousel-skin-features .jcarousel-container-horizontal').css( { width: width } );	
		
	}		
	
}

function setFeatureDeepLink(carousel) {
	
	if (feature_query_string_request) return;
	
	// set visibilty	
	for (var i = carousel.first-1; i < carousel.last; i++) {				
		features_items[i].visible = true;
		var item = $('#features_control_list').find('a').eq(i);
		$(item).css( { backgroundImage: features_items[i].selected ? 'url(images/a-item-on.gif)' : 'url(images/a-item-visible.gif)' } );
	}
	
	// set scroll if in query string
	var feature_no = $.jqURL.get('feature');
	if (!isNaN(feature_no)) {	 
	
		// get the item object
		var requested_item;
		for (var i = 0; i < features_items.length; i++) {	
			var item = features_items[i];
			if (item.id == 'feature_' + feature_no) {
				requested_item = item;
				break;
			}
		}
		
		if (!requested_item) return;
		
		// set selected
		setFeatureSelected(item.index);	
		
		// scroll to clicked position
		carousel.scroll(item.index);	
		
		// set backgrounds
		setFeatureBackgrounds();		
		
		// set the content
		// AJM - 20/02/2009 changed item.index to fix bug deep linking to feature
		setFeatureContent(feature_no);
		
	}	
	
	else if (is_all_features) {
		
		// set selected
		setFeatureSelected(0);	
		
		// scroll to clicked position
		carousel.scroll(0);		
		
		// set backgrounds
		setFeatureBackgrounds();	
		
		// get the id
		var string_id = features_items[0].id.slice(8);
		var id = jQuery.jcarousel.intval(string_id);
		
		// set the content
		setFeatureContent(id);
		
	}
	
	feature_query_string_request = true;

}

function initFeatureSlidingLabels() {
	
	if (features_sliding_labels_init) return;
	
	$('.carousel_labels').css( { visibility: 'visible' } );
	
	var item_width = 122;
	
	// set sliding labels width
	for (var i = 1; i <= 4; i++) {
		setFeaturePillarLabelWidth(i, item_width);
	}
	
	features_sliding_labels_init = true;
	
}


function setFeaturePillarLabelWidth(id, item_width) {
	
	var carousel_pillar_labels = $('#feature_carousel li').filter(function () {
										return $(this).attr('pillarindex') == id;
									});
	
	$('.carousel_labels #pillar_' + id + ' .left').css( { width: (item_width * carousel_pillar_labels.length) - 11 } );	
	$('.carousel_labels #pillar_' + id + ' .right').css( { width: (item_width * carousel_pillar_labels.length) - 11 } );	
	
}

/**
 * This is the callback function which receives notification
 * right after reloading of the carousel
 */
function feature_carousel_reloadCallback(carousel) {
   // display('Carousel reloaded');
};

/**
 * This is the callback function which receives notification
 * when an item becomes the first one in the visible range.
 */
function feature_carousel_itemFirstInCallback(carousel, item, idx, state) {
   // display('Item #' + idx + ' is now the first item');
};

/**
 * This is the callback function which receives notification
 * when an item is no longer the first one in the visible range.
 */
function feature_carousel_itemFirstOutCallback(carousel, item, idx, state) {
    //display('Item #' + idx + ' is no longer the first item');
};

/**
 * This is the callback function which receives notification
 * when an item becomes the first one in the visible range.
 */
function feature_carousel_itemLastInCallback(carousel, item, idx, state) {
    //display('Item #' + idx + ' is now the last item');
};

/**
 * This is the callback function which receives notification
 * when an item is no longer the first one in the visible range.
 */
function feature_carousel_itemLastOutCallback(carousel, item, idx, state) {
    //display('Item #' + idx + ' is no longer the last item');
};

/**
 * This is the callback function which receives notification
 * when an item becomes the first one in the visible range.
 * Triggered before animation.
 */
function feature_carousel_itemVisibleInCallbackBeforeAnimation(carousel, item, idx, state) {
    // No animation on first load of the carousel
    if (state == 'init')
        return;

    //jQuery('img', item).fadeIn('slow');
};

/**
 * This is the callback function which receives notification
 * when an item becomes the first one in the visible range.
 * Triggered after animation.
 */
function feature_carousel_itemVisibleInCallbackAfterAnimation(carousel, item, idx, state) {
    //display('Item #' + idx + ' is now visible');
	
	features_items[idx-1].visible = true;
	var item = $('#features_control_list').find('a').eq(idx-1);
	$(item).css( { backgroundImage: features_items[idx-1].selected ? 'url(images/a-item-on.gif)' : 'url(images/a-item-visible.gif)' } );
	
	// show sliding labels
	showFeatureSlidingLabels(carousel.first);		
	
};

/**
 * This is the callback function which receives notification
 * when an item is no longer the first one in the visible range.
 * Triggered before animation.
 */
function feature_carousel_itemVisibleOutCallbackBeforeAnimation(carousel, item, idx, state) {
   // jQuery('img', item).fadeOut('slow');
		
	// hide sliding labels
	hideFeatureSlidingLabels();
	
};

/**
 * This is the callback function which receives notification
 * when an item is no longer the first one in the visible range.
 * Triggered after animation.
 */
function feature_carousel_itemVisibleOutCallbackAfterAnimation(carousel, item, idx, state) {
    //display('Item #' + idx + ' is no longer visible');
		
	features_items[idx-1].visible = false;
	var item = $('#features_control_list').find('a').eq(idx-1);	
	$(item).css( { backgroundImage: features_items[idx-1].selected ? 'url(images/a-item-on.gif)' : 'url(images/a-item-hidden.gif)' } );
	
	// show sliding labels
	showFeatureSlidingLabels(carousel.first);	
	
};

/**
 * Helper function for printing out debug messages.
 * Not needed for jCarousel.
 */
var row = 1;
function display(s) {
    // Log to Firebug (getfirebug.com) if available
    //if (window.console != undefined && typeof window.console.log == 'function')
      //  console.log(s);

    if (row >= 1000)
        var r = row;
    else if (row >= 100)
        var r = '&nbsp;' + row;
    else if (row >= 10)
        var r = '&nbsp;&nbsp;' + row;
    else
        var r = '&nbsp;&nbsp;&nbsp;' + row;

    jQuery('#display').html(jQuery('#display').html() + r + ': ' + s + '<br />').get(0).scrollTop += 10000;

    row++;
};

jQuery(document).ready(function() {
	
	// hide the carousel
	$('#feature_carousel_holder').css( { display: 'block' } );	
	$('#feature_carousel_holder').css( { visibility: 'hidden' } );	
	
    jQuery('#feature_carousel').jcarousel({
		
		scroll: 1,

        initCallback:   feature_carousel_initCallback,
        reloadCallback: feature_carousel_reloadCallback,

        buttonNextCallback:   feature_carousel_buttonNextCallback,
        buttonPrevCallback:   feature_carousel_buttonPrevCallback,

        itemFirstInCallback:  feature_carousel_itemFirstInCallback,
        itemFirstOutCallback: feature_carousel_itemFirstOutCallback,
        itemLastInCallback:   feature_carousel_itemLastInCallback,
        itemLastOutCallback:  feature_carousel_itemLastOutCallback,
        itemVisibleInCallback: {
            onBeforeAnimation: feature_carousel_itemVisibleInCallbackBeforeAnimation,
            onAfterAnimation:  feature_carousel_itemVisibleInCallbackAfterAnimation
        },
        itemVisibleOutCallback: {
            onBeforeAnimation: feature_carousel_itemVisibleOutCallbackBeforeAnimation,
            onAfterAnimation:  feature_carousel_itemVisibleOutCallbackAfterAnimation
        }
		
    });
});