var vidIdx = 0;
var vidsPerPage = 5;
var videos = new Array();
var youTubeVideoId;
var youTubeInited = false;
var vidPages = 0;
var frIdx = 0;
var frPerPage = 16;
var frImages = new Array();
var frPages = 0;
var flickrInited = false;
var camsIdx = 0;
var camsPerPage = 5;
var camsImages = new Array();
var camsPages = 0;
var camsInited = false;

$('li.mediaTab').click(function () {
    if (!$(this).hasClass('active')) {
        var thisGallery = $(this).parents('div.mediaGalleryContainer');
        var panesContainer = $(thisGallery).find('div.mediaGalleryPanesContainer');
        var allTabs = $(thisGallery).find('li.mediaTab');
        var allPanes = $(panesContainer).find('div.mediaGalleryPane');
        var thisTabIndex = $(this).index();
        var visiblePane = $(panesContainer).find('div.mediaGalleryPane:visible');
        var nextPane = $(allPanes)[thisTabIndex];
        var nextHeight = $(nextPane).actual('height');
        var nextWidth = $(nextPane).actual('width');
        var activeTab = $(this);

        // fade out currently-visible pane, fade this one in
        $(allTabs).removeClass('active');
        $(this).addClass('active');
        $(panesContainer).css('height', $(visiblePane).height() + 'px').css('width', '653px').css('border','1px solid transparent');

        $(visiblePane).fadeOut(250, function () {
            $(this).removeClass('active');
            $(panesContainer).animate({
                height: nextHeight
            }, 250, function () {

                $(nextPane).fadeIn('fast', function () {
                    $(this).addClass('active');
                    // reinitialize select menus to get around weird scrolling bug
                    $('select.mediaCategoryDropdown').selectmenu({
                        style: 'dropdown',
                        width: 240
                    });

                    // what gallery are we showing?
                    if ($(activeTab).hasClass('youTube')) {

                    }
                    else if ($(activeTab).hasClass('flickr')) {
                        if (!flickrInited) {
                            bindFrThumbs();
                            flickrInited = true;
                        }
                    }
                    else if ($(activeTab).hasClass('webCam')) {
                        if (!camsInited) {
                            bindCamsThumbs();
                            camsInited = true;
                        }
                    }

                    var thisHeight = $(this).height();
                    if (thisHeight != $(panesContainer).height()) {
                        $(panesContainer).animate({
                            height: thisHeight
                        }, 100);
                    }

                });
            });
        });
    }
});
$('select.mediaCategoryDropdown').selectmenu({
    style: 'dropdown',
    width: 240
});
// flickr thumbs
$('div.flickrThumb a').fancybox();
// webcams
$('div.camThumbImage a').fancybox();

function initYouTube() {
    if (!youTubeInited) {
        youTubeInited = true;
        bindVideoThumbs(false);
    }
}
function bindVideoThumbs(autoplay) {
    var wrapperTemplate = $('div.videoThumbnailWrapper.template');
    var template = $(wrapperTemplate).find('div.videoThumb');

    $('div.videoThumbnailWrapper.active').fadeOut(350, function () {
        $('div.videoThumbnailWrapper').not($('div.videoThumbnailWrapper.template')).remove();
        $.each(
			gallery.Playlists,
			function (idx, p) {
			    if (p.Id == playlistId) {
			        var totalVideos = p.Videos.length;
			        vidPages = Math.ceil(totalVideos / vidsPerPage);
			        $('div.videosPane span.promoCount').html(vidPages);
			        $('div.videosPane span.promoIndex').html('1');

			        vidIdx = 0;

			        for (i = 0; i < vidPages; i++) {
			            vidIdx = vidsPerPage * i;
			            var newWrapper = $(wrapperTemplate).clone();
			            $(newWrapper).children().remove();
			            $(newWrapper).removeClass('template');

			            var vids = p.Videos.slice(vidIdx, vidIdx + vidsPerPage);

			            $.each(
						    vids,
						    function (vIdx, v) {
						        var vidDate = new Date(parseInt(v.Uploaded.substr(6)));
						        var newContainer = $(template).clone();
						        $(newContainer).find('a').attr('title', v.Title);
						        //$(newContainer).find('a').attr('rel', v.VideoId + '|' + v.ViewCount + '|' + dateFormat(vidDate, 'mmm d, yyyy'));

						        $(newContainer).find('div.videoDate').html(dateFormat(vidDate, 'mmm d'));
						        $(newContainer).find('div.videoYear').html(dateFormat(vidDate, 'yyyy'));
						        $(newContainer).find('a').attr('href', 'http://www.youtube.com/v/' + v.VideoId + '?autoplay=1');
						        $(newContainer).find('div.videoTitle').html(v.Title);

						        $(newContainer).find('a').fancybox({
						            'titleShow': false,
						            'transitionIn': 'elastic',
						            'transitionOut': 'elastic',
						            'href': this.href,
						            'type': 'swf',
						            'swf': { 'wmode': 'transparent', 'allowfullscreen': 'true' }
						        });

						        $(newContainer).find('img.thumb').hide();
						        $(newContainer).find('img.thumb').load(function () {
						            $(this).fadeIn(350);
						        });

						        $(newContainer).find('img.thumb').attr('src', v.Thumbnail.ImageUrl);

						        if (vIdx == vidsPerPage - 1) {
						            $(newContainer).addClass('last');
						        }

						        $(newWrapper).append($(newContainer));

						        if (i == 0 && vIdx == 0 && autoplay) {
						            //$(newContainer).find('a').trigger('click');
						        }
						    }
					    );
			            $('div.videoItems').append($(newWrapper));
			            if (i == 0) {
			                $(newWrapper).fadeIn(350, function () {
			                    $(this).addClass('active');
			                    if (autoplay) {
			                        //$(this).find('div.videoThumb a:first').trigger('click');
			                    }
			                });
			            }
			        }
			        $('div.youTubeCarouselNavigation').fadeIn('fast');
			        return false;
			    }
			}
		);
    });
}
$(function () {
    $('.ddlPlaylists').change(function () {
        playlistId = $(this).val();
        vidIdx = 0;
        bindVideoThumbs(true);
    });
    $('.ddlSets').change(function () {
        setId = $(this).val();
        frIdx = 0;
        bindFrThumbs();
    });
    $('.ddlResorts').change(function () {
        resortId = $(this).val();
        camsIdx = 0;
        bindCamsThumbs();
    });
});
function changeVideo(a) {
    var title = $(a).attr('title');
    var tempdata = $(a).attr('rel');
    var videoId = tempdata.split('|')[0];
    var views = tempdata.split('|')[1];
    var date = tempdata.split('|')[2];
}
function bindFrThumbs() {
    var sets = module.FlickrSets;
    var wrapperTemplate = $('div.flickrThumbnailWrapper.template');
    var template = $(wrapperTemplate).find('div.flickrThumb');

    $('div.flickrThumbnailWrapper.active').fadeOut(350, function () {
        $('div.flickrThumbnailWrapper').not($('div.flickrThumbnailWrapper.template')).remove();
        $.each(
			sets,
			function (idx, s) {
			    if (s.Id == setId) {

			        var totalImages = s.Images.length;
			        frPages = Math.ceil(totalImages / frPerPage);
			        $('div.flickrPane span.promoCount').html(frPages);
			        $('div.flickrPane span.promoIndex').html('1');
			        
			        frIdx = 0;

			        for (f = 0; f < frPages; f++) {
			            frIdx = frPerPage * f;

			            var newWrapper = $(wrapperTemplate).clone();
			            $(newWrapper).children().remove();
			            $(newWrapper).removeClass('template');

			            var imgs = s.Images.slice(frIdx, frIdx + frPerPage);
			            frImages = s.Images;
			            
			            $.each(
						    imgs,
						    function (iIdx, i) {
						        var newContainer = $(template).clone();

						        if (iIdx == 7) {
						            $(newContainer).addClass('last');
						        }
						        var a = $(newContainer).find('a');
						        var img = $(newContainer).find('img');

						        $(a).attr('title', i.Caption);
						        $(a).attr('rel', 'fr');
						        $(a).attr('href', i.ImageUrl);
						        $(a).fancybox({ type: 'image' });
						        $(img).hide();
						        $(img).load(function () {
						            $(this).fadeIn(350);
						            
						        });
						        $(img).attr('src', i.ThumbnailUrl);
						        $(newWrapper).append($(newContainer));
						    }
					    );
			            $('div.flickrItems').append($(newWrapper));
			            if (f == 0) {
			                $(newWrapper).fadeIn(350, function () {
			                    $(this).addClass('active');

			                });
			            }
			        }
			        $('div.flickrCarouselNavigation').fadeIn('fast');
			        return false;
			    }
			}
		);
    });
}
function bindCamsThumbs() {
    var resorts = cams.Resorts[0].WebcamGroups;
    var wrapperTemplate = $('div.camThumbnailWrapper.template');
    var template = $(wrapperTemplate).find('div.camThumb');

    $('div.camThumbnailWrapper.active').fadeOut(350, function () {
        $('div.camThumbnailWrapper').not($('div.camThumbnailWrapper.template')).remove();
        $.each(
			resorts,
			function (idx, r) {
			    if (r.Id == resortId) {

			        var totalImages = r.Cams.length;
			        camsPages = Math.ceil(totalImages / camsPerPage);
			        $('div.webcamPane span.promoCount').html(camsPages);
			        $('div.webcamPane span.promoIndex').html('1');

			        camsIdx = 0;

			        for (c = 0; c < camsPages; c++) {
			            camsIdx = camsPerPage * c;

			            var newWrapper = $(wrapperTemplate).clone();
			            $(newWrapper).children().remove();
			            $(newWrapper).removeClass('template');

			            var imgs = r.Cams.slice(camsIdx, camsIdx + camsPerPage);
			            camsImages = r.Cams;

			            $.each(
						    imgs,
						    function (iIdx, i) {
						        var newContainer = $(template).clone();

						        if (iIdx == camsPerPage - 1) {
						            $(newContainer).addClass('last');
						        }
						        var a = $(newContainer).find('a');
						        var img = $(newContainer).find('img');
						        $(newContainer).find('div.camTitle').html(i.Title);
						        $(a).attr('title', i.Title);
						        $(a).attr('rel', 'cams');
						        $(a).attr('href', i.ImageUrl);
						        $(a).fancybox({ type: 'image' });
						        $(img).hide();
						        $(img).load(function () {
						            $(this).fadeIn(350);
						        });
						        $(img).attr('src', i.ImageUrl);
						        $(newWrapper).append($(newContainer));
						    }
					    );
			            $('div.camItems').append($(newWrapper));
			            if (c == 0) {
			                $(newWrapper).fadeIn(350, function () {
			                    $(this).addClass('active');

			                });
			            }
			        }
			        $('div.camsCarouselNavigation').fadeIn('fast');
			        return false;
			    }
			}
		);
    });
}