// JavaScript Document

var photoInterval = 7500; //the amount of time (in milliseconds) in between photo transitions (This is for the main image on the homepage)
var transitionInterval = 500; //the amount of time (in milliseconds) it takes for the photos to transition to the next
var $index; //the index of the current photo (Zero based)
var $active; //the active photo 
var $next; //the next photo to be displayed

//url: the source of the video
//title: the title of the video
//text: the description of the video
function swapVideo(url, title, text) {
    // Create the HTML.
    var video =
'<object width="344" height="213">' +
'<param name="movie" value="' + url + '"></param>' +
'<param name="allowFullScreen" value="true"></param>' +
'<param name="allowscriptaccess" value="always"></param>' +
'<embed src="' + url + '" type="application/x-shockwave-flash" width="344" height="213" allowscriptaccess="always" allowfullscreen="true"></embed>' +
'</object>';

    // Set the video URL, title, and text (duh).
    $('#videoInfo h3').html(title);
    $('#videoInfo p').html(text);

    // Swap out the flash
    $('#largeVideo').html(" ");
    $('#largeVideo').html(video);
}

$(document).ready(function () {

    //change the 1st thumbnail's opacity
    $('.thumbnail_0').css("opacity", "0.4");

    //call the photoSwitch function based on the time set in the variable interval.
    var timer = setInterval("photoSwitch()", photoInterval);


    $('#thumbnails img').click(function () {
        //make sure the image doesn't switch while you are clicking on it
        clearTimeout(timer);

        $active = $('#mainImage img.activeImg');
        $index = $("#thumbnails img").index($(this));
        $next = $('#mainImage img').eq($index);

        $('#thumbnails a > img').css("opacity", "1");
        $(this).css("opacity", "0.4");
        $active.addClass('lastActive');

        //add the active class and fade in the photo
        $next.css({ opacity: 0.0 }).addClass('activeImg').animate({ opacity: 1.0 }, transitionInterval, function () {
            //remove the classes that were assigned																				
            $active.removeClass('activeImg lastActive');

            //change the photo text for the new image
            $('#photoText > p').css("display", "none");

            //display the text that will be overlayed on the main image
            $('#photoText p.photo' + $index).css("display", "block");
            return false;
        });
        //resume the rotation
        timer = setInterval("photoSwitch()", photoInterval);
    });


    /***************************************************************/
    /*  This function is used for the videos on the homepage.      */
    /*  When a small image is clicked on, it will update the large */
    /*  video. The title and description of the video will update  */
    /*  as well.                                                   */
    /***************************************************************/

    //    $('#videoThumbnails img').click(function () {

    //        var video = ""; //the source of the video
    //        var title = ""; //the title of the video
    //        var text = "";  //the description of the video

    //        //find out which thumbnail was clicked on
    //        if ($(this).attr("src") == 'http://i.ytimg.com/vi/Xj5tBoMxNj4/0.jpg') {
    //            video = "<object width=\"344\" height=\"213\"><param name=\"movie\" value=\"http://www.youtube.com/v/jvLaaMdress&hl=en_US&fs=1&\"><param name=\"allowFullScreen\" value=\"true\"><param name=\"allowscriptaccess\" value=\"always\"><embed src=\"http://www.youtube.com/v/jvLaaMdress&hl=en_US&fs=1&\" type=\"application/x-shockwave-flash\" allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"344\" height=\"213\"></embed></object>";
    //            title = "If statement - Sample title #1";
    //            text = "Sample text for video #1 - This text is located in js/default.js, line 65. Vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril";
    //        }
    //        else if ($(this).attr("src") == 'http://i.ytimg.com/vi/Nh-dOd-BNk4/0.jpg') {
    //            video = "<object width=\"344\" height=\"213\"><param name=\"movie\" value=\"http://www.youtube.com/v/IunXcRwarSI&hl=en_US&fs=1&\"><param name=\"allowFullScreen\" value=\"true\"><param name=\"allowscriptaccess\" value=\"always\"><embed src=\"http://www.youtube.com/v/IunXcRwarSI&hl=en_US&fs=1&\" type=\"application/x-shockwave-flash\" allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"344\" height=\"213\"></embed></object>";
    //            title = "If Else statement - Sample title #2";
    //            text = "Sample text for video #2 - Autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril";
    //        }
    //        else {
    //            video = "<object width=\"344\" height=\"213\"><param name=\"movie\" value=\"http://www.youtube.com/v/o4nM-CSB3uQ&hl=en_US&fs=1&\"><param name=\"allowFullScreen\" value=\"true\"><param name=\"allowscriptaccess\" value=\"always\"><embed src=\"http://www.youtube.com/v/o4nM-CSB3uQ&hl=en_US&fs=1&\" type=\"application/x-shockwave-flash\" allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"344\" height=\"213\"></embed></object>";
    //            title = "else statement :(";
    //            text = "Sample text for video #3 - Autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril";
    //        }

    //        //update the video information
    //        $('#largeVideo').html(video);
    //        $('#videoInfo h3').html(title);
    //        $('#videoInfo p').html(text);

    //        return false;
    //    })


    /***************************************************************/
    /*  This function pulls the twitter feed from HSU and displays */
    /*  it on the homepage. The javaScript file that is used is    */
    /*  jquery.tweet.js                                            */
    /***************************************************************/

    $("#twitterFeed").tweet({
        username: "HendersonStateU",
        join_text: "auto",
        avatar_size: 30,
        count: 3,
        auto_join_text_default: "we said,",
        auto_join_text_ed: "we",
        auto_join_text_ing: "we were",
        auto_join_text_reply: "we replied to",
        auto_join_text_url: "we were checking out",
        loading_text: "loading tweets..."
    });

    /***************************************************************/
    /*  This function pulls the flickr feed from HSU and displays  */
    /*  it on the homepage.                                        */
    /***************************************************************/

    var htmlString;
    htmlString = "<ul>";
    $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=36321616@N06&lang=en-us&format=json&jsoncallback=?", displayImages);
    function displayImages(data) {
        $.each(data.items, function (i, item) {

            htmlString += '<li>';
            htmlString += '<img src="' + item.media.m + '" alt="title" title="title"/>';
            htmlString += '</li>';

        });
        htmlString += "</ul>";

        $("#flickrFeed").html(htmlString);
        $("#flickrFeed").jCarouselLite({ auto: 8000, speed: 1500, visible: 1, btnNext: ".next", btnPrev: ".prev" });
    }
});


function photoSwitch() 
{
	//assign the active class to the current photo
	$active = $('#mainImage img.activeImg'); 
	//assign the first image to next if the end of the loop has reached
	$next =  $active.next().length ? $active.next(): $('#mainImage img.firstImg');
	//make the active class the lastActive class
	$active.addClass('lastActive');

	//add the active class and fade in the photo
	$next.css({opacity: 0.0}).addClass('activeImg').animate({opacity: 1.0}, transitionInterval, function() {
		//remove the classes that were assigned																				
		$active.removeClass('activeImg lastActive');

		//get the index of the active slide
		$index = $("#mainImage img").index($(".activeImg"));

		$('#thumbnails a > img').css("opacity","1");
	  	$('#thumbnails a > img.thumbnail_' + $index).css("opacity","0.4");
			
		//change the photo text for the new image
		$('#photoText > p').css("display", "none");
		
		//display the text that will be overlayed on the main image
		$('#photoText p.photo' + $index).css("display", "block");
   	});
}