$(document).ready(function() {	 
	$('#itemIntroduction h4').click(function(){	    
		if( $(this).siblings('#introductionPanel').html() == '' )
		{			    			
	        $.ajax({
                type: "POST",
                cache: true,
                url: "/RedvisitorAjax.aspx/GetCityGuideIntroduction",
                data: "{contentIdValue:'" +  $("#contentID").val() + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(data)
                {
                    var htmlSnippet = "<div class=\"description\">";
                    htmlSnippet += "<h3>" + data.Title + "</h3>";
                    htmlSnippet += data.Sell;
                    if (data.Gallery.length > 0)
                    {
                        htmlSnippet += "<div class=\"slideshowControl\"><h4>More Photos</h4>";
                        if (data.Gallery.length > 1)
                        {
                            htmlSnippet += "<ul><li><a class=\"previous\" href=\"#\" id=\"previous\">Previous</a></li></ul>";
                        }
                        htmlSnippet += "<ul class=\"slideshowPager\">";
                        for (var i = 0; i < data.Gallery.length; i++)
                        {
                            if (i == 0)
                                htmlSnippet += "<li class=\"active\">";
                            else
                                htmlSnippet += "<li>";
                            htmlSnippet += "<a class=\"page" + (i+1) + "\">" + (i+1) + "</a></li>";
                        }
                        htmlSnippet += "</ul>";
                        if (data.Gallery.length > 1)
                        {
                            htmlSnippet += "<ul><li><a class=\"next\" href=\"#\" id=\"next\">Next</a></li></ul>";
                        }
                        htmlSnippet += "</div>";
                    }
                    htmlSnippet += "</div>";
                    $('#introductionPanel').append(htmlSnippet);
                    htmlSnippet = "<div class=\"slideshow\" id=\"slideshowIntroduction\">";
                    for (var j = 0; j < data.Gallery.length; j++)
                    {
                        htmlSnippet += "<img src=\"" + data.Gallery[j].Url + "\" alt=\"" + data.Gallery[j].AltText + "\" width=\"" + data.Gallery[j].Width + "\" height=\"" + data.Gallery[j].Height + "\" />";
                    }
                    htmlSnippet += "</div>"; 
                    $('#galleryPanel').append(htmlSnippet);
                    
                    $('#slideshowIntroduction').show();
			        $('#slideshowIntroduction').cycle({ 
				        fx:     'fade', 
				        speed:  900, 
				        timeout: 0, 
				        next:   '#itemIntroduction .next', 
				        prev:   '#itemIntroduction .previous',
				        pager:  '#itemIntroduction .slideshowPager', 
				        pagerEvent: 'click',
				        pauseOnPagerHover: 1, 
				        pagerAnchorBuilder: function(idx, slide) { 
					        // return selector string for existing anchor 
					        return '#itemIntroduction .slideshowPager li:eq(' + idx + ')'; 
				        } 
			        });                          
                }
            });
        }        
		if ( !$(this).hasClass('activeItem') ) {
			$('#slideshowLocalExperts, #slideshowHighlights').cycle('destroy');
			$('#slideshowLocalExperts, #slideshowHighlights, #videoContent').hide();
			$('#slideshowIntroduction').show();
			$('#slideshowIntroduction').cycle({ 
				fx:     'fade', 
				speed:  900, 
				timeout: 0, 
				next:   '#itemIntroduction .next', 
				prev:   '#itemIntroduction .previous',
				pager:  '#itemIntroduction .slideshowPager', 
				pagerEvent: 'click',
				pauseOnPagerHover: 1, 
				pagerAnchorBuilder: function(idx, slide) { 
					// return selector string for existing anchor 
					return '#itemIntroduction .slideshowPager li:eq(' + idx + ')'; 
				} 
			});
			if ($('#itemLocalExperts').hasClass('activeItem'))
			{
	            var videoPlayer = document.getElementById('myytplayer');
	            if (videoPlayer != null && videoPlayer.getCurrentTime() > 0)
	            {
	                videoPlayer.stopVideo();
	            }			            
	        }
		}				
	});
	
	
	$('#itemLocalExperts h4').click(function(){
		if( $(this).siblings('#localExpertsPanel').html() == '' )
		{
		    $.ajax({
                type: "POST",
                cache: true,
                url: "/RedvisitorAjax.aspx/GetCityGuideLocalExperts",
                data: "{contentIdValue:'" +  $("#contentID").val() + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(data)
                {
                    var htmlSnippet = "<div class=\"description\"><div id=\"pages\">";
                    for (var i = 0; i < data.length; i++)
                    {
                        if (i == 0)
                            htmlSnippet += "<div class=\"page" + (i+1) + "\" style=\"display: block\">";
                        else
                            htmlSnippet += "<div class=\"page" + (i+1) + "\" style=\"display: none\">";
                        htmlSnippet += "<h3>" + (i+1) + ". " + data[i].Title;
                        if (data[i].SubTitle != undefined)
                            htmlSnippet += " <span class=\"grey\">" + data[i].SubTitle + "</span>";
                        htmlSnippet += "</h3>" + data[i].Sell + "</div>";
                    }                            
                    htmlSnippet += "</div>";
                    if (data.length > 0)
                    {
                        htmlSnippet += "<div class=\"slideshowControl\"><h4>More Videos</h4>";
                        if (data.length > 1)
                        {
                            htmlSnippet += "<ul><li><a class=\"previous\" href=\"#\" id=\"previousLocalExperts\">Previous</a></li></ul>";
                        }
                        htmlSnippet += "<ul class=\"slideshowPager\" id=\"localExpertsPager\">";
                        for (var j = 0; j < data.length; j++)
                        {
                            if (j == 0)
                                htmlSnippet += "<li class=\"active\">";
                            else
                                htmlSnippet += "<li>";
                            htmlSnippet += "<a class=\"page" + (j+1) + "\">" + (j+1) + "</a></li>";
                        }
                        htmlSnippet += "</ul>";
                        if (data.length > 1)
                        {
                            htmlSnippet += "<ul><li><a class=\"next\" href=\"#\" id=\"nextLocalExperts\">Next</a></li></ul>";
                        }
                        htmlSnippet += "</div>";
                    }
                    htmlSnippet += "</div>";
                    $('#localExpertsPanel').append(htmlSnippet);
                    htmlSnippet = "<div class=\"slideshow\" id=\"slideshowLocalExperts\">";
                    for (var k = 0; k < data.length; k++)
                    {
                        htmlSnippet += "<span class=\"page" + (k+1) + "\">" + data[k].VideoId + "</span>";
                    }
                    htmlSnippet += "</div>";
                    if (data.length > 0)
                    {
                        htmlSnippet += "<div id=\"videoContent\"><div id=\"ytapiplayer\"><p>";
                        if (data[0].Image != undefined)
                            htmlSnippet += "<img src=\"" + data[0].Image.Url + "\" alt=\"" + data[0].Image.AltText + "\" width=\"" + data[0].Image.Width + "\" height=\"" + data[0].Image.Height + "\" />";
                        htmlSnippet += "</p></div></div>";
                    }
                    $('#galleryPanel').append(htmlSnippet);
                    
                    if (document.getElementById('myytplayer') == null)
                    {
                        var swfUrl = "http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=ytapiplayer"
                        var flashvars = { };
                        var params = { allowScriptAccess: "always", menu: false, wmode: "transparent" };
                        var attributes = { id: "myytplayer" };
                        	    	
                        swfobject.embedSWF(swfUrl, "ytapiplayer", "655", "437", "9", "/swf/expressInstall.swf", flashvars, params, attributes);
                    }
                    $('#slideshowLocalExperts').show();
		            $('#slideshowLocalExperts').cycle({ 
			            fx:     'fade', 
			            speed:  100, 
			            timeout: 0, 
			            next:   '#itemLocalExperts .next', 
			            prev:   '#itemLocalExperts .previous',
			            pager:  '#itemLocalExperts .slideshowPager', 
			            pagerEvent: 'click',
			            pauseOnPagerHover: 1, 
			            pagerAnchorBuilder: function(idx, slide) { 
				            // return selector string for existing anchor 
				            return '#itemLocalExperts .slideshowPager li:eq(' + idx + ')'; 
			            },
				        prevNextClick: localExpertPrevNextClick,
				        pagerClick: localExpertPagerClick
		            });
                }
            });
		}
		
		if ( !$(this).hasClass('activeItem') ) {
			$('#slideshowIntroduction, #slideshowHighlights').cycle('destroy');
			$('#slideshowIntroduction, #slideshowHighlights').hide();
			$('#slideshowLocalExperts, #videoContent').show();
			$('#slideshowLocalExperts').cycle({ 
				fx:     'fade', 
				speed:  100, 
				timeout: 0, 
				next:   '#itemLocalExperts .next', 
				prev:   '#itemLocalExperts .previous',
				pager:  '#itemLocalExperts .slideshowPager', 
				pagerEvent: 'click',
				pauseOnPagerHover: 1, 
				pagerAnchorBuilder: function(idx, slide) { 
					// return selector string for existing anchor 
					return '#itemLocalExperts .slideshowPager li:eq(' + idx + ')'; 
				},
				prevNextClick: localExpertPrevNextClick,
				pagerClick: localExpertPagerClick
			});
		}	
        $("#localExpertsPanel #pages>div").hide();
        $("#localExpertsPanel .page1").show();
	});
	
	 function localExpertPagerClick(zeroBasedSlideIndex)
	 {
	    updateLocalExpert(zeroBasedSlideIndex);
	 }		
	
	function localExpertPrevNextClick(isNext, zeroBasedSlideIndex)
	{
	    updateLocalExpert(zeroBasedSlideIndex);
	}
	
	function updateLocalExpert(zeroBasedSlideIndex)
	{
	    $("#localExpertsPanel #pages>div").hide();	
	    videoID = $("#slideshowLocalExperts span.page" + (zeroBasedSlideIndex + 1)).html();
		document.getElementById('myytplayer').cueVideoById(videoID, 1);
		$("#localExpertsPanel .page" + (zeroBasedSlideIndex + 1)).fadeIn();                
	}
	
	$('#itemHighlights h4').click(function(){
	    if( $(this).siblings('#topTenHighlightsPanel').html() == '' )
		{				    			
	        $.ajax({
                type: "POST",
                cache: true,
                url: "/RedvisitorAjax.aspx/GetCityGuideTopTenFeatures",
                data: "{contentIdValue:'" +  $("#contentID").val() + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(data)
                {
                    var htmlSnippet = "<div class=\"description\"><div id=\"pages\">";
                    for (var i = 0; i < data.length; i++)
                    {
                        if (i == 0)
                            htmlSnippet += "<div class=\"page" + (i+1) + "\" style=\"display: block\">";
                        else
                            htmlSnippet += "<div class=\"page" + (i+1) + "\" style=\"display: none\">";
                        htmlSnippet += "<h3>" + (i+1) + ". " + data[i].Title + "</h3>" + data[i].Sell;
                        htmlSnippet += "&nbsp;<a href=\"" + data[i].Link + "\">Read More</a>" + "</div>";
                    }                            
                    htmlSnippet += "</div>";
                    if (data.length > 0)
                    {
                        htmlSnippet += "<div class=\"slideshowControl\"><h4>More Top Ten Highlights</h4>";
                        if (data.length > 1)
                        {
                            htmlSnippet += "<ul><li><a class=\"previous\" href=\"#\" id=\"previous\">Previous</a></li></ul>";
                        }
                        htmlSnippet += "<ul class=\"slideshowPager\">";
                        for (var j = 0; j < data.length; j++)
                        {
                            if (j == 0)
                                htmlSnippet += "<li class=\"active\">";
                            else
                                htmlSnippet += "<li>";
                            htmlSnippet += "<a class=\"page" + (j+1) + "\">" + (j+1) + "</a></li>";
                        }
                        htmlSnippet += "</ul>";
                        if (data.length > 1)
                        {
                            htmlSnippet += "<ul><li><a class=\"next\" href=\"#\" id=\"next\">Next</a></li></ul>";
                        }
                        htmlSnippet += "</div>";
                    }
                    htmlSnippet += "</div>";
                    $('#topTenHighlightsPanel').append(htmlSnippet);
                    htmlSnippet = "<div class=\"slideshow\" id=\"slideshowHighlights\">";
                    for (var k = 0; k < data.length; k++)
                    {
                        htmlSnippet += "<img src=\"" + data[k].Image.Url + "\" alt=\"" + data[k].Image.AltText + "\" width=\"" + data[k].Image.Width + "\" height=\"" + data[k].Image.Height + "\" />";
                    }
                    htmlSnippet += "</div>"; 
                    $('#galleryPanel').append(htmlSnippet);
                    
                    $('#slideshowHighlights').show();
			        $('#slideshowHighlights').cycle({ 
				        fx:     'fade', 
				        speed:  900, 
				        timeout: 0, 
				        next:   '#itemHighlights .next', 
				        prev:   '#itemHighlights .previous',
				        pager:  '#itemHighlights .slideshowPager', 
				        pagerEvent: 'click',
				        pauseOnPagerHover: 1, 
				        pagerAnchorBuilder: function(idx, slide) { 
					        // return selector string for existing anchor 
					        return '#itemHighlights .slideshowPager li:eq(' + idx + ')'; 
				        },
				        pagerClick: topTenPagerClick,
				        prevNextClick: topTenPrevNextClick
			        });                       
                }
            });
		}
		if ( !$(this).hasClass('activeItem') ) {
			$('#slideshowIntroduction, #slideshowLocalExperts').cycle('destroy');
			$('#slideshowIntroduction, #slideshowLocalExperts, #videoContent').hide();
			$('#slideshowHighlights').show();
			$('#slideshowHighlights').cycle({ 
				fx:     'fade', 
				speed:  900, 
				timeout: 0, 
				next:   '#itemHighlights .next', 
				prev:   '#itemHighlights .previous',
				pager:  '#itemHighlights .slideshowPager', 
				pagerEvent: 'click',
				pauseOnPagerHover: 1, 
				pagerAnchorBuilder: function(idx, slide) { 
					// return selector string for existing anchor 
					return '#itemHighlights .slideshowPager li:eq(' + idx + ')'; 
				},
				pagerClick: topTenPagerClick,
				prevNextClick: topTenPrevNextClick
			});		
            $("#topTenHighlightsPanel #pages>div").hide();
            $("#topTenHighlightsPanel .page1").show();
			if ($('#itemLocalExperts').hasClass('activeItem'))
			{
	            var videoPlayer = document.getElementById('myytplayer');
	            if (videoPlayer != null && videoPlayer.getCurrentTime() > 0)
	            {
	                videoPlayer.stopVideo();
	            }			            
	        }
		}				
	});	
	 function topTenPagerClick(zeroBasedSlideIndex)
	 {
	    updateTopTenHighlight(zeroBasedSlideIndex);
	 }	
	function topTenPrevNextClick(isNext, zeroBasedSlideIndex)
	{
	    updateTopTenHighlight(zeroBasedSlideIndex);
	}
	function updateTopTenHighlight(zeroBasedSlideIndex)
	{
	    $("#topTenHighlightsPanel #pages>div").hide();
	    $("#topTenHighlightsPanel .page" + (zeroBasedSlideIndex + 1)).fadeIn();
	}	
	$('.accordionItem').click(function(){
		if ( !$(this).hasClass('activeItem') ) {
			$('.activeItem').animate({height: "40px"}, {duration:500});
			$('.activeItem').children('div').hide();
			$(this).animate({height: "356px"}, {duration:500});
			$(this).children('div').show();
			$('.activeItem').removeClass('activeItem');
			$(this).addClass('activeItem');
		    return false;
		}
	});
 });