/**
 * function to init features display and events.
 */
initFeatures = function(inst){
    //init main features
    parentDiv = $('#'+inst);
    featureLength = $('div.feature',parentDiv).length - 1;
    currFeature = 0;
    $('div.feature-nav-left a', parentDiv).bind('click', function(e){
	    e.preventDefault();
	    if (currFeature > 0) {showFeature(currFeature - 1,inst);}
    });
    $('div.feature-nav-right a', parentDiv).bind('click', function(e){
	    e.preventDefault();
	    if (currFeature + 3 != featureLength) {showFeature(currFeature + 1,inst);}
    });
     $('div.feature a', parentDiv).each(function(){
        $(this).bind('click', function(e,parentDiv){
	        e.preventDefault();
	        $('div.feature img', parentDiv).each(function(){
               $(this).css({
                    'opacity': '.5',
                    'filter':'alpha(opacity = 50)'
                });
            })
	        img = $('img', $(this))
	        $('div.feature-img img', parentDiv).attr({ 
                src: img.attr("src")
            });
            img.css({
                'opacity': '1',
                'filter':'alpha(opacity = 100)'
            });
        });
     });	    
    img = $('div.feature:first img', parentDiv)
    img.css({
        'opacity': '1',
        'filter':'alpha(opacity = 100)'
    });
}
 
 /**
 * function to rotate main feature.
 * @param {Integer} feature  Index to rotate to. Default is 0.
 */
showFeature = function(feature, inst){
    parentDiv = $('#'+inst);
    /* get feature index */
    if (feature > featureLength || !feature){feature = 0};
    if (feature == -1){feature = featureLength};	
    if (currFeature > -1) {
	    /* scroll to selected feature */
	    dest = $('#'+inst+"-feature"+feature, parentDiv).position().left;
	    $('div.features-wrapper', parentDiv).animate(
		    {left: -dest + 'px'}, 
		    500
	    );
    }
    currFeature = feature;	
}