$(document).ready(function () {
    attachFeatureBehaviors();
    attachSpotlightBehaviors();
    $(window).unload(function(){ });
})

function attachFeatureBehaviors() { 

//temportary

$('#featureCarousel .prev').html('<img alt="&#171;" src="/home-theta/design/images/feature_arrow_left.png"/>');
$('#featureCarousel .next').html('<img alt="&#187;" src="/home-theta/design/images/feature_arrow_right.png"/>');
$('#spotlightCarousel .prev').html('<img alt="&#171;" src="/home-theta/design/images/spotlight_arrow_left.png" />');
$('#spotlightCarousel .next').html('<img alt="&#187;" src="/home-theta/design/images/spotlight_arrow_right.png" />');

 
	var viewportItems = 3;
	var $carousel = $("#featureCarousel");
	var $items = $carousel.find('.items');
	 
    //insert feature thumbs into HTML
    function createImage(thumb) {
        var img = new Image();
        img.src = thumb.src;
        img.alt = thumb.alt;
        img.width = 82;
        img.height = 82;
        $items.append(img);
        
    }
    
    function changeFeature(thisFeature) {   
        
        // change the large image and overlay link
        var $featureImage = $('#featureImage');
        $featureImage.find('a').attr('href', thisFeature.story).attr('target', thisFeature.target);
        $featureImage.find('img.big').attr('src', thisFeature.image.src);
        $featureImage.find('img.wrapAlt').attr('alt', thisFeature.image.alt);
        
        //change the overlay color
        $('#featureColor').css("background-color", thisFeature.color);
        
        //change the text and overlay link
        var $featureText = $('#featureText');
        $featureText.find('.title').html(thisFeature.title);
        $featureText.find('.summary').html(thisFeature.summary);
        $featureText.find('.teaser').html(thisFeature.teaser + "&#160;&#187;");
        $featureText.find('a').attr('href', thisFeature.story).attr('target', thisFeature.target);
    }
    
    function activate(index, numItems) {
    	//mark current item active - must skip clone at start
    	$items.find('img').eq(index + 1).addClass('active');
    	changeFeature(sortedImages[index]);
	
    }
    
    function deactivate() {
    	$items.find('img').removeClass('active');
    }
    
    
    //parse JSON with feature data
    var featureData = $.parseJSON($("#featureData").text());
    
    //transfer items where priority > 0 (they will be in order)
    var sortedImages = new Array;

    $.each(featureData.items, function () {
        if (this.priority > 0) {
            createImage(this.thumb);
            sortedImages.push(this);
        } else {
            return false; //break early
        }
    });
    
    //randomize items where priority is 0
    $.each(featureData.items.slice($items.find('img').length).sort(function() {return 0.5 - Math.random()}), function () {
        createImage(this.thumb);
        sortedImages.push(this);
    });
    
    //wrap each image with a div to give width and height - no margins or borders - to avoid changes in size on zoom in Chrome
    $items.find('img').wrap('<div />');
    
    //set up carousel
    var scrollable = $carousel.find(".scrollable").scrollable({
        circular: true,
        onBeforeSeek: function (evt, index) {
                    deactivate();
        },
        onSeek: function (evt, index) {
        	activate(index, this.getSize());   
        }
    })
    .data("scrollable");
    
    //hide arrows if all items fit into viewport
    var numItems = scrollable.getSize();
    
    if (numItems <= viewportItems) {
    	$carousel.find('.browse').css('visibility', 'hidden');
    }
    
    //fix bug with circular scrollable - may be able to remove with tools 1.3
    var $itemsToClone = scrollable.getItems().slice(1);
    //the first is already cloned
    var $wrap = scrollable.getItemWrap();
    //div surrounding items
    var clonedClass = scrollable.getConf().clonedClass;
    $itemsToClone.each(function () {
        $(this).clone(true).appendTo($wrap).addClass(clonedClass + ' hacked-' + clonedClass);
    });
    
    //on thumb click - change image and text
    $items.find('img').click(function () {
        //always move forward - must use next function
        //ignore the cloned image that is first
	    var newIndex = $items.find('img').index(this) - 1; 
        if (numItems <= viewportItems) {
            //do not scroll - just activate
			deactivate();
			activate(newIndex, numItems);
        //supported clone
        } else if (newIndex == numItems) {
            scrollable.end(0).next();
            //hacked clones
        } else if (newIndex > numItems) {
            scrollable.begin(0).seekTo(newIndex % numItems);
            //normal scroll
        } else {
            scrollable.seekTo(newIndex % numItems);
        }
    }).eq(1).click();
}



function attachSpotlightBehaviors() {
    
    //scrollable spotlight thumbs
    var scrollableCarousel = $("#spotlight .scrollable").scrollable({circular: true}).navigator().data("scrollable");
    
    //fix bug with single page navi
    if (scrollableCarousel.getItems().length == 1) {
    	scrollableCarousel.getNaviButtons().each(function() {
    		$(this).css('visibility', 'hidden');
	   })
	}
}