// array of carousel items
var model_features_items = new Array();

// button flags
var model_features_next_enabled;
var model_features_prev_enabled;

/**
 * This is the callback function which receives notification
 * right after initialisation of the carousel
 */
function model_features_carousel_initCallback(carousel, state) {
	
	/*if (state == 'init')
        display('Carousel initialised');
    else if (state == 'reset')
        display('Carousel reseted');*/
		
	// init items array
	var carousel_items = $('#feature_container .model_features_carousel').children();
	for (var i = 0; i < carousel_items.length; i++) {
		var item = new CarouselItem(i, i, false, false);
		model_features_items.push(item);
	} 
	
	// remove any previous
	$('#feature_container #model_features_control_list').remove();
	
	// add controls dynamically
	$('#feature_container .jcarousel-skin-model-features').after('<div id="model_features_control_list"><ul class="jcarousel-model-features-control"></ul></div>');
	for (var i = 0, j = 1; i < carousel_items.length; i++, j++) {
		$('.jcarousel-model-features-control').append('<li><a href="#" class="replaced">' + j + '</a></li>');
	}
	$('#feature_container #model_features_control_list').css( { visibility: 'hidden' } );	
	
	// position arrows
	$('#feature_container .jcarousel-skin-model-features .jcarousel-prev-horizontal').css( { left: 120 - (carousel_items.length * 10) });
	$('#feature_container .jcarousel-skin-model-features .jcarousel-next-horizontal').css( { right: 120 - (carousel_items.length * 10) });
		
	// scroll to clicked position
	carousel.scroll(1);
	
	// add container to the model features				
	//$('.feature_description').before('<div class="model_features_carousel_receptacle carousel centred"></div>');	
	
	// add callbacks to the mini control
	jQuery('.jcarousel-model-features-control a').bind('click', function() {	
		// get the id
		var id = $('.jcarousel-model-features-control a').index(this);
		
		// set backgrounds
		setModelFeaturesBackgrounds();			
		
		// hide outlines on click
		this.blur();
		
		// scroll to clicked position
		carousel.scroll(id);
		
		return false;
		
	});

		
};

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

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


function setModelFeaturesBackgrounds() {
										
		// set the control list backgrounds		
		$('#model_features_control_list a').css('background-image', 'url(images/a-main-item-hidden.gif)')
							.filter(function () {								
                 				return model_features_items[$('#model_features_control_list a').index(this)].visible;
        					})
            				.css('background-image', 'url(images/a-main-item-visible.gif)');
	
}

function setModelFeaturesButtonVisibility() {
	
	// remove buttons if both disabled
	if (!model_features_next_enabled && !model_features_prev_enabled) {
		$('#feature_container .jcarousel-skin-model-features .jcarousel-next-horizontal').css( { visibility: 'hidden' } );
		$('#feature_container .jcarousel-skin-model-features .jcarousel-prev-horizontal').css( { visibility: 'hidden' } );	
		$('#feature_container #model_features_control_list').css( { visibility: 'hidden' } );			
	} else {
		$('#feature_container .jcarousel-skin-model-features .jcarousel-next-horizontal').css( { visibility: 'visible' } );
		$('#feature_container .jcarousel-skin-model-features .jcarousel-prev-horizontal').css( { visibility: 'visible' } );		
		$('#feature_container #model_features_control_list').css( { visibility: 'visible' } );					
	}
		
	var width = 0;		
	var carousel_children = $('#feature_container .model_features_carousel').children();
	for (var i = 0; i < carousel_children.length; i++) {
		width += 160;
		//display(!model_features_next_enabled && !model_features_prev_enabled);
	}	
	
	// limit width
	if (width > 320) width = 300;
	if (width == 160) width = 140;
		
	$('#feature_container .jcarousel-skin-model-features .jcarousel-clip-horizontal').css( { width: width } );	
	$('#feature_container .jcarousel-skin-model-features .jcarousel-container-horizontal').css( { width: width } );		
	
}

/**
 * This is the callback function which receives notification
 * about the state of the next button.
 */
function model_features_carousel_buttonNextCallback(carousel, button, enabled) {
    //display('Next button is now ' + (enabled ? 'enabled' : 'disabled'));
	model_features_next_enabled = enabled;	
	
	// show buttons
	setModelFeaturesButtonVisibility();
	
};

/**
 * This is the callback function which receives notification
 * about the state of the prev button.
 */
function model_features_carousel_buttonPrevCallback(carousel, button, enabled) {
    //display('Prev button is now ' + (enabled ? 'enabled' : 'disabled'));
	model_features_prev_enabled = enabled;
	
	// show buttons
	setModelFeaturesButtonVisibility();
	
};

/**
 * This is the callback function which receives notification
 * right after reloading of the carousel
 */
function model_features_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 model_features_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 model_features_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 model_features_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 model_features_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 model_features_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 model_features_carousel_itemVisibleInCallbackAfterAnimation(carousel, item, idx, state) {
   // display('Item #' + idx + ' is now visible');
	
	var id = parseInt(idx);	
	if (isNaN(id)) return;
	
	model_features_items[id-1].visible = true;
	var item = $('#model_features_control_list').find('a').eq(id-1);
	$(item).css( { backgroundImage: 'url(images/a-main-item-visible.gif)' } );
	
};

/**
 * 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 model_features_carousel_itemVisibleOutCallbackBeforeAnimation(carousel, item, idx, state) {
   // jQuery('img', item).fadeOut('slow');
	
};

/**
 * 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 model_features_carousel_itemVisibleOutCallbackAfterAnimation(carousel, item, idx, state) {
    //display('Item #' + idx + ' is no longer visible');
	
	var id = parseInt(idx);	
	if (isNaN(id)) return;
		
	model_features_items[id-1].visible = false;
	var item = $('#model_features_control_list').find('a').eq(id-1);	
	$(item).css( { backgroundImage: 'url(images/a-main-item-hidden.gif)' } );	
	
};

function initModelFeaturesCarousel() {
	
    jQuery('#feature_container .model_features_carousel').jcarousel({
		
		scroll: 1,

        initCallback:   model_features_carousel_initCallback,
        reloadCallback: model_features_carousel_reloadCallback,

        buttonNextCallback:   model_features_carousel_buttonNextCallback,
        buttonPrevCallback:   model_features_carousel_buttonPrevCallback,

        itemFirstInCallback:  model_features_carousel_itemFirstInCallback,
        itemFirstOutCallback: model_features_carousel_itemFirstOutCallback,
        itemLastInCallback:   model_features_carousel_itemLastInCallback,
        itemLastOutCallback:  model_features_carousel_itemLastOutCallback,
       	itemVisibleInCallback: {
            onBeforeAnimation: model_features_carousel_itemVisibleInCallbackBeforeAnimation,
            onAfterAnimation:  model_features_carousel_itemVisibleInCallbackAfterAnimation
        },
        itemVisibleOutCallback: {
            onBeforeAnimation: model_features_carousel_itemVisibleOutCallbackBeforeAnimation,
            onAfterAnimation:  model_features_carousel_itemVisibleOutCallbackAfterAnimation
        }
		
    });
	
}



//jQuery(document).ready(initModelFeaturesCarousel);