var articles = [];
var embed1 = '<iframe title="YouTube video player" marginheight="0px" marginwidth="0px" width="480px" height="390px" src="http://www.youtube.com/embed/';
var embed2 = '" frameborder="0" style="height:390px;width:480px" allowfullscreen></iframe>';
var videos = [];


function hideLoadingFlower() {
    jQuery('body #modaloverlay').fadeOut(200, function() {
        jQuery('body #modaloverlay').remove();
    });
    jQuery('body #spinnergraphicbody').fadeOut(200, function() {
        jQuery('body #spinnergraphicbody').remove();
    });
}

function modalShow() {
    $('body').append("<div id='modaloverlay' style='position:absolute;top:0;left:0;height:98%;width:98%;background-color:gray;opacity:0.0;filter:alpha(opacity=0);z-index:1000;'></div>");
}

function modalRemove() {
    $("#modaloverlay").remove();
}

function showLoadingFlower() {
    $('body').append("<div id='modaloverlay' style='position:absolute;top:0;left:0;background-color:gray;opacity:0.1;filter:alpha(opacity=10);z-index:1000;visibility:hidden;'></div>");
    $('body').append("<img id='spinnergraphicbody' src='css/loading.gif' style='position:absolute;height:32px;width:32px;top:50%;left:50%;margin-top:-16px;margin-left:-16px;z-index:1001;visibility:hidden;' />");
    $('#modaloverlay').hide();
    $('#modaloverlay').css('visibility', 'visible');
    $('#spinnergraphicbody').hide();
    $('#spinnergraphicbody').css('visibility', 'visible');
    $('#modaloverlay').css('height', jQuery(window).height());
    $('#modaloverlay').css('width', jQuery(window).width());
    $('#modaloverlay').fadeIn(200);
    $('#spinnergraphicbody').fadeIn(200);

}


function displayMusic(data) {
    hideLoadingFlower();
    $('#soundcloud').html(data.html)
    $('#soundcloud').fadeIn(500);
    hideLoadingFlower();
}

function displayVideos(data) {
     hideLoadingFlower();
    $.each(data.feed.entry, function(index, entry) {
        var thumbnail = entry.media$group.media$thumbnail[1];
        var video = {
            id: index,
            title: entry.title.$t,
            content: entry.id.$t.replace('http://gdata.youtube.com/feeds/api/videos/', ''),
            description: entry.content.$t
        };
        videos.push(video);


        $('#videos-list').append(
           '<div class="video">' +
              '<input class="video-id" type="hidden" value="' + index + '" />' +
              '<div class="thumbnail video-link left-floater"><img src="' + thumbnail.url + '"></img></div>' +
              '<div class="video-info left-floater">' +
                 '<div class="video-title video-link" onClick="">' + video.title + '</div>' +
                 '<div class="video-description">' + video.description + '</div>' +
              '</div>' +
           '</div>');

    });
    $("#videos-list").fadeIn(500);
    hideLoadingFlower();
}


function displayArticles(data) {
    hideLoadingFlower();
    data.feed.entry.sort(function(a, b) {
        var A = a.title.$t;
        var B = b.title.$t;
        if (A < B) {
            return -1;
        } else if (A > B) {
            return 1;
        } else {
            return 0;
        }

    });

    $.each(data.feed.entry, function(index, entry) {
        var article = {
            id: index,
            title: "<span class='publication'>" + entry.title.$t.substring(5, entry.title.$t.indexOf(",")) + "</span>" + entry.title.$t.substring(entry.title.$t.indexOf(","), entry.title.$t.length),
            date: entry.published.$t.substring(0, 10),
            content: entry.content.$t
        };
        articles.push(article);

        $('#articles').append(
           '<div class="article">' +
              '<input class=\"article-id\" type=\"hidden\" value=\"' + index + '\" \/>' +
              '<span class="article-list-title" onClick="">' + article.title + '</span>' + 
	  	   '</div>');
    });

    $("#articles").fadeIn(500);
    hideLoadingFlower();
}

 




function loadMusic() {
    //showLoadingFlower();
    $.ajax({ url: 'http://soundcloud.com/oembed?url=http%3A%2F%2Fsoundcloud.com%2Fcesare-syjuco%2Fsets%2Fa-sudden-rush-of-genius&show_comments=false&format=js&callback=?',
        type: 'get',
        dataType: "json",
        success: function(data) { displayMusic(data); },
        error: function(a, b, c) { alert(c); },
        data: {}
    });
}


function loadVideos() {
    //showLoadingFlower();
    $.ajax({ url: 'http://gdata.youtube.com/feeds/api/videos?alt=json-in-script&author=CAXSyjuco&max-results=50',
        type: 'get',
        dataType: "jsonp",
        success: function(data) { displayVideos(data); },
        data: {}
    });
}

function loadArticles() {
    //showLoadingFlower();

    var paras = { alt: 'json-in-script' };

    $.ajax({
        url: 'http://cesaresyjuconews.blogspot.com/feeds/posts/default',
        type: 'get',
        dataType: "jsonp",
        data: paras,
        success: function(data) { displayArticles(data); }
    });
}

function loadGallery() {
    $("#pics").EmbedPicasaGallery('cesare.syjuco', {
        msg_back: 'Loading images...',
        msg_loading_list: 'Loading galleries...',
        size: 144
    });
}

function hideContent() {
    $(".back-home").fadeOut(300, function() {
        $(".partial-content-main").fadeOut(300, function() {
            $(".content-header").fadeOut(300, function() {
                $("#content").addClass("hidden");
                $("#menu").removeClass("hidden");
                showNavigationMenuFade();
            });
        });
    });
}


function showVideos() {
    $("#content").load("videos.html #videos-partial", function() {
        $("#content").removeClass("hidden");
        $("#content .content-header").fadeIn(500, function() {
            $("#content .partial-content-main").fadeIn(500, function() {
                loadVideos();
            });
        });
    });
}


function showMusic() {
    $("#content").load("music.html #music-partial", function() {
        $("#content").removeClass("hidden");
        $("#content .content-header").fadeIn(500, function() {
            $("#content .partial-content-main").fadeIn(500, function() {
                loadMusic();
            });
        });
    });
}


function showPhotos() {
    $("#content").load("photos.html #photos-partial", function() {
        hideLoadingFlower();
        $("#content").removeClass("hidden");
        $("#content .content-header").fadeIn(500, function() {
            $("#content .partial-content-main").fadeIn(500, function() {
                loadGallery();
            });
        });
    });
}


function showArchives() {
    $("#content").load("archives.html #archives-partial", function() {
        $("#content").removeClass("hidden");
        $("#content .content-header").fadeIn(500, function() {
            $("#content .partial-content-main").fadeIn(500, function() {
                loadArticles();
            });
        });
    });
}


function showAbout() {
    showLoadingFlower();
    $("#content").load("about.html #about-partial", function() {
        hideLoadingFlower();
        $("#content").removeClass("hidden");
        $("#content .content-header").fadeIn(500, function() {
            $("#content .partial-content-main").fadeIn(500);
        });
    });
}


function showContent(target) {
    $("#menu").addClass("hidden");
       
    switch(parseInt(target)) {
    case 1:
       showAbout();
       break;
    case 2:
       showArchives();
       break;
   case 3:
       showPhotos();
       break;
   case 4:
       showMusic();
       break;
   case 5:
       showVideos();
       break;   
   }
}


function showNavigationMenuFade() {
    modalShow();
    $('#quote1').delay(1500).fadeIn(2000);
    $(".overlay").fadeOut(1);
    $("#about-patch").fadeOut(300, function() {
        $("#archives-patch").fadeOut(300, function() {
            $("#photos-patch").fadeOut(300, function() {
                $("#music-patch").fadeOut(300, function() {
                    $("#videos-patch").fadeOut(300, function() {
                        $(".quote").removeClass("veryhidden").delay(2000);
                        showQuotes(1);
	      modalRemove();
                    });
                });
            });
        });
    });
}

function hideNavigationMenuFade(target) {
    $("#about-patch").fadeIn(300, function() {
        $("#archives-patch").fadeIn(300, function() {
            $("#photos-patch").fadeIn(300, function() {
                $("#music-patch").fadeIn(300, function() {
                    $("#videos-patch").fadeIn(300, function() {
                        showLoadingFlower();
                        $('#modaloverlay').hide();
                        showContent(target);
                    });
                });
            });
        });
    });
}


function showQuotes(start) {
    var callback;
    if (start < 5) {
        callback = function() { showQuotes(start + 1); };
    } else {
        callback = function() { showQuotes(1); };
    }

    if ($("#quote" + start).hasClass("veryhidden") == false) {
        $("#quote" + start).fadeIn(2000).delay(2000).fadeOut(1000, function() { callback.call(); });
    } else {
        $(".quote").hide();
        return;
    }  
}


function addEventHandlers() {
    $('.menu-item').hover(function() {
        var target = "#overlay" + $(this).attr("alt");
        $(target).css('filter', 'alpha(opacity=40)');
        $(target).fadeIn(1000);
    }, function() {
        var target = "#overlay" + $(this).attr("alt");
        $(target).css('filter', 'alpha(opacity=40)');    
        $(target).fadeOut(1000);
    });

    // hide animation effect when a menu is clicked
    $('.menu-item').live('click', function() {
        var target = $(this).attr("alt");

        // hide quotes
        $(".quote").addClass("veryhidden");
        hideNavigationMenuFade(target);
        
    });

  $('#filter').live('change', function() {
    var selected = $(this).val();

    $(".album-title").parent().hide();

    if(selected == 'Works'){
      $(".album-title:contains('Work')").parent().show();
      $(".album-title:contains('WORK')").parent().show();
      $(".album-title:contains('work')").parent().show();
    }

    if(selected == 'Events'){
      $(".album-title:contains('Event')").parent().show();
      $(".album-title:contains('EVENT')").parent().show();
      $(".album-title:contains('event')").parent().show();
    }

    if(selected == 'Posters'){
      $(".album-title:contains('Poster')").parent().show();
      $(".album-title:contains('POSTER')").parent().show();
      $(".album-title:contains('poster')").parent().show();
    }

    if(selected == 'Features'){
      $(".album-title:contains('Feature')").parent().show();
      $(".album-title:contains('FEATURE')").parent().show();
      $(".album-title:contains('feature')").parent().show();
    }

    if(selected == 'View All'){
      $(".album-title").parent().show();
    }
  });

    $(".back-home").live('click', function() {
        $('#videos-detail').html("");
        hideContent();
    });

     
    // PHOTOS PAGE EVENT HANDLERS 
    $('#back-photos').live('click', function() {
        $(this).fadeOut(500);
        $("#breadcrumb").text("albums");
        $("#filter-section").fadeIn(500);
        $("#album-sub").fadeIn(500);
        loadGallery();
    });

    $(".album-cover img").live('click', function() {
        $("#breadcrumb").text($(this).parent().children(".album-title").text());
        $(".back-previous").fadeIn(500);
        $("#filter-section").fadeOut(500);
        $("#album-sub").fadeOut(500);
    });



    // ARCHIVES PAGE EVENT HANDLERS
    $('#back-archives').live('click', function() {
        $(this).fadeOut(500, function() {
            $('#article-detail').fadeOut(500, function() {
                $("#articles").fadeIn(500);
            });
        });
    });

    $(".article-list-title").live('click', function() {
        var id = $(this).parent().children(".article-id").val();
        $("#articles").fadeOut(500, function() {
            var article = articles[id];
            $('#article-detail').html("");
            $('#article-detail').append(
           	          '<div class="article">' +
			             '<div class="article-title">' + article.title + '</div>' +
		                 '<div class="content">' + article.content + '</div>' +
				      '</div>');
            $('#article-detail').fadeIn(500);
            $('.back-previous').fadeIn(500);
        });

    });



    // VIDEOS PAGE EVENT HANDLERS
    $('#back-videos').live('click', function() {
        $(this).fadeOut(500, function() {
            $('#videos-detail').fadeOut(500, function() {
                $('#videos-detail').html("");
                $("#videos-list").fadeIn(500);
            });
        });
    });

    $(".video-link").live('click', function() {
        var id = $(this).parents(".video").children(".video-id").val();
        $("#videos-list").fadeOut(500, function() {
            var video = videos[id];
            $('#videos-detail').html("");
            $('#videos-detail').append(
           	          '<div class="youtube-video">' +
			             '<div class="video-detail-title">' + video.title + '</div>' +
		                 '<div class="video-content">' + embed1 + video.content + embed2 + '</div>' +
				      '</div>');
            $('#videos-detail').fadeIn(500);
            $('.back-previous').fadeIn(500);
        });

    });
}


function cacheImages() {
   var varimage;
   var percentcomplete;
   var loadedimagecount = 0;
   var totalimages =  11;

   $(".image-loader").each(function(index, elem) {
      varimage = $(elem).css("background-image").replace(/^url\(['"](.+)['"]\)/, '$1');
      $('body').append('<img class="tempimage hidden" src="' + varimage + '"></img>');
   });

   $('.tempimage').load(function() {
       loadedimagecount = loadedimagecount + 1;
       $(this).remove();

       percentcomplete = parseInt((loadedimagecount / totalimages) * 100);

       $('#loading').html(percentcomplete + '%');

       if (loadedimagecount >= totalimages) {
           $('#loading').fadeOut(500, function() {
               $('#menu').removeClass("hidden");
               showNavigationMenuFade();
           });
       }
   });
}


$(document).ready(function() {
    addEventHandlers();
    cacheImages();
});