//the main storage of stories data
var allStories = new Array();
var last_storyIndex = -1;
$(function() {
$(".slider").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
visible: 3,
scroll : 3,
circular : true});
});
//Captify
$(document).ready(function(){
	        $('img.captify').captify({
	            // all of these options are... optional
	            // speed of the mouseover effect
	            speedOver: 'fast',
	            // speed of the mouseout effect
	            speedOut: 'normal',
	            // how long to delay the hiding of the caption after mouseout (ms)
                hideDelay: 500,
	            // 'fade', 'slide', 'always-on'
	            animation: 'always-on',
	            // text/html to be placed at the beginning of every caption
	            prefix: '',
	            // opacity of the caption on mouse over
	            opacity: '0.5',
	            // the name of the CSS class to apply to the caption box
	            className: 'caption-bottom',
	            // position of the caption (top or bottom)
	            position: 'bottom',
	            // caption span % of the image
	            spanWidth: '100%'
	            });
	        });
           

//________________________________________________________
//object to store story data. Links is an array of HREFs
//and Titles are the associated displayed text. Media_Type
//is either IMAGE, AUDIO or VIDEO as derived from the database.
function StoryData(
        image_url,
        navigation_url,
        video_url,
        story_title,
        story_abstract,
        image_caption,
        media_type,
        links,
        titles)
{
    this.Image_Url =image_url;
    this.Navigation_url = navigation_url;
    this.Video_Url = video_url;
    this.Story_Title = story_title;
    this.Story_Abstract = story_abstract;
    this.Image_Caption = image_caption;
    this.Media_Type = media_type;
    this.Links = links;
    this.Titles=titles;
}

//________________________________________________________
//add story element to stories array 
function addStory(index,
        image_url,
        navigation_url,
        video_url,
        story_title,
        story_abstract,
        image_caption,
        media_type,
        links,
        titles)
{

    allStories[index] = new StoryData(image_url, navigation_url, video_url,
    story_title,story_abstract,image_caption,media_type,links,titles);
}

//________________________________________________________
/* Display specified story. If the story_index has not changed do nothing.
This prevents flickering on MouseMove event.
@param story_index 0-based index into allstories array of story to display
*/
function displayStory(story_index) {
    //alert("displayStory!" + story_index+" max:"+allStories.length);
    if(story_index >= allStories.length)
        return;
    if (story_index == last_storyIndex) {
        return;
    }
    last_storyIndex = story_index;
    var data = allStories[story_index];
    //If this is a video hide the image DIV, and set the HREF.
    //Otherwise hide the video DIV and set the SRC.
    //Both of them have the same caption field
//alert("URL:"+data.Image_Url);
    if (data.Media_Type=="VIDEO") {
        document.getElementById("ImageBlock").style.display = 'none';
        document.getElementById("VideoBlock").style.display = 'inline';
        document.getElementById("player").setAttribute("style",
        "display:block;text-align:center;width:640px;height:360px;background-image:url("+data.Image_Url+")");
        flowplayer("player", "http://wandrous.com/content/flowplayer-3.2.1.swf",
        {   buffering: false,
            clip: { url: data.Video_Url, autoPlay: true, autoBuffering: true }
        });
        /*        
        flowplayer("player", "http://wandr.us/content/flowplayer-3.2.1.swf",
        {
            clip: { url: data.Image_Url, autoPlay: false, autoBuffering: true },
            plugins: { viral: { url: 'flowplayer.viralvideos-3.2.1-dev.swf', embed: false} }
        });
        */
        $("#MainImageCaption").attr("innerText", data.Image_Caption);       
    } else {
        document.getElementById("VideoBlock").style.display = 'none';
        document.getElementById("ImageBlock").style.display = 'inline';          
        $("#MainImageDisplayer").attr("src", data.Image_Url);
        $("#MainImageCaption").attr("innerText", data.Image_Caption);
    }
    $("#TripTitle").attr("innerText", data.Story_Title);    
    var navigation =  $("#TripURL");
    navigation.attr("href",data.Navigation_url);
    
    //display abstract
    var left = $("#LeftAbstractionArea");
    left.empty();
    left.append($(data.Story_Abstract));
    //left.append($("<span>"+data.Story_Abstract+"</span> <a href ='"+data.Navigation_url+"'>&gt;&gt;more</a>"));

    //display related link
    if (data.Links != null) {
        var right = $("#ScrollerLinks");
        right.empty();
        var len = data.Links.length;
        var i;
        for (i = 0; i < len; i++) {
            if (i == 0) {
                right.append("<ul>");
            }
            right.append($("<li><a href ='" + data.Links[i] + "'>" + data.Titles[i] + "</a></li>"));
        }

        right.append("</ul>");
    }
}

function setParameters(height) {
    mainHeight = height;
}

//________________________________________________________