$(document).ready(
    function()
    {
        toggleListItemColor(0,'maroon');
        toggleImageSelectorColor(0,'maroon');
        
        var timerObj = {timer: theRotator()};
        $('div.rotator').fadeIn(1000);
        $('div.rotator ul li').fadeIn(1000); // tweek for IE
        $('#timerHidden').attr('value',timerObj.timer);
        setPlayPauseControl(timerObj);
        initializePageHiddenVars();
        setImageSelector(timerObj);     
        $.getJSON("siteLinks_Json.js",
            function(data)
            {                
                var isFirst = true;
                var csvFolderNames='';
                var csvFileNames='';
                var csvListItemPageIds='';
                $.each(data,
                    function(key,val)
                    {
                        //$('ul').append('<li>'+val["linkText"]+'</li>');
                        csvFolderNames += (isFirst)?val["folderName"]:','+val["folderName"];
                        csvFileNames += (isFirst)?val["fileName"]:','+val["fileName"];
                        csvListItemPageIds += (isFirst)?val["indexes"]:'|'+val["indexes"];
                        isFirst = false;
                    }
                );
                $('#folderNamesHidden').attr('value',csvFolderNames);
                $('#fileNamesHidden').attr('value',csvFileNames);
                $('#listItemPageIdsHidden').attr('value',csvListItemPageIds);                                
                setListItem(timerObj);    
                loadAjaxFromHtml();
                setMultiSelector();
                setInitialSelectedObjColors();      
            }
        );
        setQ4Nav();
    } 
);
function setPlayPauseControl(timerObj)
{
    $('#playPause').css('cursor','pointer').attr('src','images/pause2s.png').attr('title','Click to stop demo').click(
                        function(event)
                        {
                            var action  =  ($('#playPause').attr('src') == 'images/pause2s.png')?'play':'pause';
                            if (action == 'play')
                            {
                                $('#playPause').attr('src','images/play2s.png').attr('title','Click to stop demo');
                                clearInterval(timerObj.timer);
                            }
                            else
                            {
                                $('#playPause').attr('src','images/pause2s.png').attr('title','Click to stop demo');
                                $.extend(timerObj, {timer: theRotator()});
                                $('#timerHidden').attr('value',timerObject.timer);
                                $('div.rotator').fadeIn(1000);
                                $('div.rotator ul li').fadeIn(1000); // tweek for IE
                            }
                            event.stopPropagation();
                        }
     );   
}
function setQ4Nav()
{
        $('#previousToolTipSpan,#nextToolTipSpan').addClass('toolTipText');
        $('#previousIconSpan,#nextIconSpan').addClass('toolTippedObject').css('display','none');
        toolTipEvent('#nextIconSpan','#nextToolTipSpan');
        toolTipEvent('#previousIconSpan', '#previousToolTipSpan');
        $('#previousIconSpan').click(
            function(event)
            {  
                if($('p.pQ4:visible').prev('p.pQ4').is(':not(:empty)'))
                {
                    var $currentElem = $('p.pQ4:visible');
                    var $prevElem = $currentElem.prev('p.pQ4');
                    $currentElem.toggle();
                    $prevElem.toggle();
                    $('#nextIconSpan').show();
                    if($prevElem.prev('p.pQ4').index() == -1)
                    {
                        $('#previousIconSpan').toggle();
                        $('span.paragraphCounter').empty().text('paragraph: 1 - '+$('p.pQ4').length+'  ');
                    }
                    else
                    {
                        $('span.paragraphCounter').empty().text('paragraph: '+($currentElem.index('p.pQ4'))+' - '+$('p.pQ4').length+'  ');                        
                    }
                    clearInterval($('#timerHidden').attr('value'));
                    $('#playPause').attr('src','images/play2s.png').attr('title','Click to run demo');
                }
                event.stopPropagation();                
            }
        );
        $('#nextIconSpan').click(
            function(event)
            {
                if($('p.pQ4:visible').next('p.pQ4').is(':not(:empty)'))
                {
                    var $currentElem = $('p.pQ4:visible');
                    var $nextElem = $currentElem.next('p.pQ4');
                    $currentElem.toggle();
                    $nextElem.toggle();
                    $('#previousIconSpan').show();
                    if($nextElem.next('p.pQ4').index() == -1)
                    {
                        $('#nextIconSpan').toggle();
                        $('span.paragraphCounter').empty().text('paragraph: '+$('p.pQ4').length+' - '+$('p.pQ4').length+'  ');
                    }
                   else  $('span.paragraphCounter').empty().text('paragraph: '+($nextElem.index('p.pQ4')+1)+' - '+$('p.pQ4').length+'  ');
                    clearInterval($('#timerHidden').attr('value'));
                    $('#playPause').attr('src','images/play2s.png').attr('title','Click to run demo');
                }
                event.stopPropagation();                
            }
        );            
}
function toolTipEvent(id1,id2)
{
    $(id1).hover
    (
            function(event)
            {  
                $(this).removeClass('toolTippedObject').addClass('hoveredToolTippedObject');
                $(id2).removeClass('toolTipText').addClass('hoveredToolTipText');
                event.stopPropagation();
            },
            function(event)
            {
                $(this).removeClass('hoveredToolTippedObject').addClass('toolTippedObject');
                $(id2).removeClass('hoveredToolTipText').addClass('toolTipText');
                event.stopPropagation();
            }
    ); 
}
function toggleImageSelectorColor(selectedIndex,color)
{
  $('div.imageSelector span:eq('+selectedIndex+')').css('color',color);
}
function setImageSelector(timerObj)
{
    $('div.imageSelector span').attr('title','Click to stop demo and display corresponding image').addClass('imageSelectorSpan'
    ).hover(
        function(event)
        {
            $(this).removeClass('imageSelectorSpan').addClass('hoverImageSelectorSpan');
            event.stopPropagation();
        },
        function(event)
        {
            $(this).removeClass('hoverImageSelectorSpan').addClass('imageSelectorSpan');
            event.stopPropagation();
        }
    ).click(
        function(event)
        {   
            toggleImageSelectorColor(getHiddenImageSelectedIndex(),'#666633');
            setQ2Image($(this).text(),timerObj);
            setImageSelectedIndexHidden($(this).index());
            toggleImageSelectorColor($(this).index(),'maroon');
            $('#playPause').attr('src','images/play2s.png').attr('title','Click to run demo');
            event.stopPropagation();
        }
    );
}
function setQ2Image(indexValue,timerObj)
{
    clearInterval(timerObj.timer);
    $('div.rotator ul li.show').removeClass('show').css({opacity: 0.0});
    $('div.rotator ul li:eq('+(parseInt(indexValue)-1)+')').addClass('show').css({opacity: 1.0});
}
function initializePageHiddenVars()
{
    $('#selectedListItemFolderHidden').attr('value','0');
    $('#selectedFileIndexHidden').attr('value','1'); 
    $('#imageSelectedIndexHidden').attr('value','0');
}
function setInitialSelectedObjColors()
{
   // $('div.imageSelector span:eq(0)').css('color','maroon');
    $('div.multiSelector span:eq(0)').css('color','maroon');
    $('ul li:eq(0)').css('color','maroon');
}
function setMultiSelector()
{
    $('div.multiSelector').empty();
    var delimitedIds = getListItemPageIds(getHiddenSelectedItemFolderIndex());
    var pageIds = (delimitedIds.indexOf(',') > 0)?delimitedIds.split(','):delimitedIds;
    $.each(pageIds,
        function(index,value)
        {
            $('div.multiSelector').append('<span>'+value+'</span>');
            $('div.multiSelector span').attr('title','Click to stop demo and display in the 4th quadrant corresponding item content of selected category') .addClass('multiSelectorSpan'
                ).hover(
                    function(event)
                    {
                        $(this).removeClass('multiSelectorSpan').addClass('hoverMultiSelectorSpan');
                        event.stopPropagation();
                    },
                    function()
                    {
                        $(this).removeClass('hoverMultiSelectorSpan').addClass('multiSelectorSpan');
                        event.stopPropagation();
                    }
                ).click(
                    function(event)
                    {  
                        clearInterval($('#timerHidden').attr('value'));
                        $('#playPause').attr('src','images/play2s.png').attr('title','Click to run demo');
                        $('div.multiSelector span:eq('+(getHiddenSelectedFileIndex()-1)+')').css('color','#666633');
                        setSelectedFileIndexHidden($(this).text());
                        loadAjaxFromHtml();
                        $(this).css('color','maroon');
                        event.stopPropagation();
                    }
                );
        }
    );
}
function toggleListItemColor(listIndex,color)
{

   $('div.q3Div ul li:eq('+listIndex+')').css('color',color);
}
function setListItem(timerObj)
{
    $("div.q3Div ul li").attr('title','Click to stop demo and display in the 4th quadrant first item content of selected category').addClass('li-links').click(
        function(event)
        {
            $('#playPause').attr('src','images/play2s.png').attr('title','Click to run demo');         
            toggleListItemColor(getHiddenSelectedItemFolderIndex(),'#666633');
            toggleListItemColor($(this).index(),'maroon');
            setHiddenSelectedItemFolderIndex($(this).index());
            setQ2Image($(this).index()+1,timerObj);
            setSelectedFileIndexHidden('1');
            loadAjaxFromHtml();
            setMultiSelector();
            $('div.multiSelector span:eq(0)').css('color','maroon');
            event.stopPropagation();
        }
    );  
}
function getFilePath()
{
    var folderNamesArray = $('#folderNamesHidden').attr('value').split(',');    
    var fileNamesArray = $('#fileNamesHidden').attr('value').split(','); 
    return  folderNamesArray[getHiddenSelectedItemFolderIndex()]+'/'+
            fileNamesArray[getHiddenSelectedItemFolderIndex()]+'_'+
            getHiddenSelectedFileIndex()+'.html';
}
function loadAjaxFromHtml()
{
    $('#q4_Div').load(getFilePath(),
        function()
        {    
            $('span.paragraphCounter').empty();
            $('#nextIconSpan,#previousIconSpan').css('display','none');
            if ($('p.pQ4').length > 1)
            {
                $('#nextIconSpan').css('display','inline');
                $('span.paragraphCounter').text('paragraph: 1 - '+$('p.pQ4').length+'  ');
            }
            $('p.pQ4:gt(0)').css('display','none');
        }
    ); 
}
function setSelectedFileIndexHidden(indexValue)
{
    $('#selectedFileIndexHidden').attr('value',indexValue); 
}
function setHiddenSelectedItemFolderIndex(indexValue)
{
    $('#selectedListItemFolderHidden').attr('value',indexValue);
}
function getHiddenSelectedItemFolderIndex()
{
    return  $('#selectedListItemFolderHidden').attr('value');
}
function getHiddenSelectedFileIndex()
{
    return $('#selectedFileIndexHidden').attr('value');
}
function getListItemPageIds(indexValue)
{
    var pageIdsArray = $('#listItemPageIdsHidden').attr('value').split('|');    
    return pageIdsArray[indexValue];
}
function setImageSelectedIndexHidden(indexValue)
{
    $('#imageSelectedIndexHidden').attr('value',indexValue);
}
function getHiddenImageSelectedIndex()
{
    return $('#imageSelectedIndexHidden').attr('value');
}