$(document).ready(function () {


    $.ajax({
        type: "GET",
        url: "/ooyala/handler/HomeWidget.ashx", //"handler/oolaya.ashx?query=query",
        dataType: "html",
        success: parseHtml
    });




});     //Close Function

function parseHtml(html) {
   // alert(html);
    $("#dvWidget").html(html);

    callslider();
    setTimeout(every10sec, 10000);
}

var click_is_on;
click_is_on = 0;

function callslider() {

    //Show Banner
    $(".main_image .desc").show(); //Show Banner
    //$(".main_image .block").animate({ opacity: 0.85 }, 1 ); //Set Opacity

    //Click and Hover events for thumbnail list
    $(".image_thumb ul li:first").addClass(' active');    
	$(".image_thumb ul li").click(function () {
        click_is_on = 1;
              
        //Set Variables
        //  var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
        //  var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL
        var imgDesc = $(this).find('.block').html(); 	//Get HTML of block
        var imgDescHeight = $(".main_image").find('.block').height(); //Calculate height of block	

        var link = $(this).find('.block .count').html();

        var innerHTML = $(this).find('.Destdiv').html();
        //alert(innerHTML);

        if ($(this).is(".active")) {  //If it's already active, then...
            return false; // Don't click through
        } else {
            //Animate the Teaser				
            $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250, function () {
                $(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250);
                // $(".main_image img").attr({ src: imgTitle, alt: imgAlt });



                if (link == 1) {
                    $(".readmore1").css("display", "inline");
                    $(".readmore4").css("display", "none");
                    $(".readmore3").css("display", "none");
                    $(".readmore2").css("display", "none");

                }
                if (link == 2) {
                    $(".readmore1").css("display", "none");
                    $(".readmore4").css("display", "none");
                    $(".readmore3").css("display", "none");
                    $(".readmore2").css("display", "inline");

                }

                if (link == 3) {
                    $(".readmore1").css("display", "none");
                    $(".readmore4").css("display", "none");
                    $(".readmore3").css("display", "inline");
                    $(".readmore2").css("display", "none");

                }

                if (link == 4) {

                    $(".readmore1").css("display", "none");
                    $(".readmore4").css("display", "inline");
                    $(".readmore3").css("display", "none");
                    $(".readmore2").css("display", "none");

                }


                //   $(".main_image .block .readmore").html(link)


            });

            $('.srcDiv').html('');
            // $('.srcDiv').html(innerHTML);

            $(".srcDiv").animate({ opacity: .10 }, 350, function () {
                $(".srcDiv").html(innerHTML).animate({ opacity: 0.95 }, 350);

            });
        }

        $(".image_thumb ul li").removeClass(' active'); //Remove class of 'active' on all lists
        $(this).addClass('active');  //add class of 'active' on this list only
        return false;

    }).hover(function () {
        $(this).addClass('hover');
    }, function () {
        $(this).removeClass('hover');
    });

    //Toggle Teaser
    $("a.collapse").click(function () {
        $(".main_image .block").slideToggle();
        $("a.collapse").toggleClass("show");
    });

}

function every10sec() {
    if (click_is_on == 0) {

        if (document.getElementById('teaserli1').className == " active" ||
        document.getElementById('teaserli1').className == " active hover") 
        {

            document.getElementById('teaserli1').className = " ";
            document.getElementById('teaserli2').className = " active";
            document.getElementById('teaserli3').className = " ";
            document.getElementById('teaserli4').className = " ";

            var imgDesc = $(document.getElementById('teaserli2')).find('.block').html(); 	//Get HTML of block
            var imgDescHeight = $(".main_image").find('.block').height(); //Calculate height of block	
            var link = $(document.getElementById('teaserli2')).find('.block .count').html();
            var innerHTML = $(document.getElementById('teaserli2')).find('.Destdiv').html();  
        }
        else if (document.getElementById('teaserli2').className == " active" ||
        document.getElementById('teaserli2').className == " active hover") 
        {
            document.getElementById('teaserli1').className = " ";
            document.getElementById('teaserli2').className = " ";
            document.getElementById('teaserli3').className = " active";
            document.getElementById('teaserli4').className = " ";
            var imgDesc = $(document.getElementById('teaserli3')).find('.block').html(); 	//Get HTML of block
            var imgDescHeight = $(".main_image").find('.block').height(); //Calculate height of block	
            var link = $(document.getElementById('teaserli3')).find('.block .count').html();
            var innerHTML = $(document.getElementById('teaserli3')).find('.Destdiv').html();
           
        }

        else if (document.getElementById('teaserli3').className == " active" ||
        document.getElementById('teaserli3').className == " active hover")
        {
            document.getElementById('teaserli1').className = " ";
            document.getElementById('teaserli2').className = " ";
            document.getElementById('teaserli3').className = " ";
            document.getElementById('teaserli4').className = " active";

            var imgDesc = $(document.getElementById('teaserli4')).find('.block').html(); 	//Get HTML of block
            var imgDescHeight = $(".main_image").find('.block').height(); //Calculate height of block	
            var link = $(document.getElementById('teaserli4')).find('.block .count').html();
            var innerHTML = $(document.getElementById('teaserli4')).find('.Destdiv').html();
           
        }

        else if (document.getElementById('teaserli4').className == " active" ||
        document.getElementById('teaserli4').className == " active hover")
        {

            document.getElementById('teaserli1').className = " active";
            document.getElementById('teaserli2').className = " ";
            document.getElementById('teaserli3').className = " ";
            document.getElementById('teaserli4').className = " ";

            var imgDesc = $(document.getElementById('teaserli1')).find('.block').html(); 	//Get HTML of block
            var imgDescHeight = $(".main_image").find('.block').height(); //Calculate height of block	
            var link = $(document.getElementById('teaserli1')).find('.block .count').html();
            var innerHTML = $(document.getElementById('teaserli1')).find('.Destdiv').html();
           

        }

        $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250, function () {
            $(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250);
        });

        $('.srcDiv').html('');
        // $('.srcDiv').html(innerHTML);

        $(".srcDiv").animate({ opacity: .10 }, 350, function () {
            $(".srcDiv").html(innerHTML).animate({ opacity: 0.95 }, 350);

        });
        setTimeout(every10sec, 10000)

    }
}

function receiveOoyalaEvent(playerId, eventName, eventArgs) {
    var ciecc, ttc, ecc, vc;

    switch (eventName) {
        case "playheadTimeChanged":
            //onPlayheadTimeChanged(eventArgs);
            break;
        case "stateChanged":
            onStateChanged(eventArgs);
            break;
        case "currentItemEmbedCodeChanged":
           // onCurrentItemEmbedCodeChanged(eventArgs);
            ciecc = eventArgs;
            break;
        case "totalTimeChanged":
          //  onTotalTimeChanged(eventArgs);
            ttc = eventArgs;
            break;
        case "embedCodeChanged":
         //   onEmbedCodeChanged(eventArgs);
            ecc = eventArgs;
            break;
        case "volumeChanged":
         //   onVolumeChanged(eventArgs);
            break;
        case "apiReady":
            //note: apiReady event has no eventArgs (3rd call-back parameter)
           // onCurrentItemEmbedCodeChanged(ciecc);
           // onTotalTimeChanged(ttc);
          //  onEmbedCodeChanged(ecc);
            break;
    }
}
function onStateChanged(eventArgs) {
    click_is_on = 1;
}