album/src/main/webapp/assets/render.js

$(function() {

    function formatTitle(title, currentArray, currentIndex, currentOpts) {
        var captionElement = document.getElementById(title);
        return captionElement.innerHTML;
    }

    function scale(w, h, max) {
        if (w > h) {
            return { w : Math.floor(max), h: Math.floor((max * h + max / 2) / w) };
        } else {
            return { w: Math.floor((max * w + max / 2) / h), h: Math.floor(max) };
        }
    }

    $("#search").each(function (id, el) {
        el.action = location.pathname.replace(/\.album(\?|$)/, '.search');
    });

    $.getJSON(location.pathname.replace(/\.album(\?|$)/, '.json'), function(data, textStatus) {
        
    	$("#name").text(data.name);
    	document.title = data.name;

    	var thmb = 250;
    	var picSize = 800;
    	var movieSize = 640;
        var prevName = null, thisName;
		
		$.each(data.contents, function(idx, entry) {

            if (data.groupPrefix && entry.type == "dir") {
                thisName = entry.earliest;
                if (prevName != null && prevName != thisName) {
                    $("<hr/>").appendTo("body");
                    prevName = null;
                }
                if (prevName == null) {
                    $("<h2></h2>").text(thisName).appendTo("body");
                    prevName = thisName;
                }
            }

			var dim = scale(entry.width, entry.height, thmb);

			var gridDiv = $("<div class=\"grid\">\n"
				            + "   <span class=\"name\">" + entry.name + "</span><br/>\n"
				            + "   <div class=\"imgborder\"><a class=\"ss\" id=\"ent" + idx + "\" href=\"/photo/album" + encodeURIComponent(entry.path) + "?size=" + picSize + "\" title=\"" + entry.name + "\">"
				            + "<img class=\"" + entry.type + "pic\" src=\"/photo/album" + (entry.thumbtype == "movie" ? encodeURIComponent(entry.path) + ".frame" : encodeURIComponent(entry.path)) + "?size=" + thmb + "\" border=\"0\" width=\"" + dim.w + "\" height=\"" + dim.h + "\"/></a></div>\n"
				            + "</div>\n");

            var captionP = $("<p id=\"" + entry.name + "\" class=\"caption\"></p>\n");
            if (entry.caption) {
                captionP.text(entry.caption);
            }
            captionP.appendTo(gridDiv);

            gridDiv.appendTo('body');

		    switch (entry.type) {
		    case "movie":
			    var size = scale(entry.width, entry.height, movieSize);
			    var href = "/photo/album" + escape(entry.path) + ".movie?size=" + movieSize;
		        $("#ent" + idx).attr("rel",  "album").attr("href", href).fancybox({
		          'titlePosition' : 'inside',
		          'transitionIn'  : 'elastic',
		          'transitionOut' : 'elastic',
		          'easingIn'      : 'easeInQuad',
		          'easingOut'     : 'easeOutQuad',
		          'titleFormat'   : formatTitle,
		          'padding'       : 0,
		          'href'          : "/photo/assets/flowplayer/flowplayer-3.0.3.swf",
		          'width'         : size.w,
		          'height'        : size.h,
		          'type'          : 'swf',
		          'swf'           : {
		                   'allowfullscreen'  : 'true',
		                   'wmode'    : 'transparent',
		                   'flashvars':
		                   "config={\
			                    'clip': {\
                                    'url': '" + href + "'\
                                },\
		                        'plugins': {\
		                            'controls': {\
		                                'url': '/photo/assets/flowplayer/flowplayer.controls-3.0.3.swf',\
		                                'backgroundColor': 'transparent',\
		                                'progressColor': 'transparent',\
		                                'bufferColor': 'transparent',\
		                                'play':true,\
		                                'fullscreen':true,\
		                                'autoHide': 'always'\
		                            }\
		                        }\
		                   }"
		              }
		          });
		          break;
		    case "image":
			    var largeDim = scale(entry.width, entry.height, picSize);
			    $("#ent" + idx).attr("rel",  "album").fancybox({
		                  'titlePosition' : 'inside',
		                  'transitionIn'  : 'elastic',
		                  'transitionOut' : 'elastic',
		                  'easingIn'      : 'easeInQuad',
		                  'easingOut'     : 'easeOutQuad',
		                  'titleFormat'   : formatTitle,
		                  'width'         : largeDim.w,
		                  'height'        : largeDim.h,
		                  'type'          : "image",
		                  'href'          : $("#ent" + idx).href
		              });
		        break;
		    case "dir":
		    	$("#ent" + idx).attr("href", location.pathname.replace(/\.album?($|\?)/, "/" + entry.name + ".album"));
		    	break;
		    }

		  });


        function buildButton(direction, destination, transform) {
            var imgName = destination ? direction : direction + "-inactive",
                imgElement = $("<img class=\"nav\" width=\"26\" height=\"32\" src=\"/photo/assets/" + imgName + ".png\"/>");
            if (destination) {
                return $("<a></a>").attr("href", "/photo/album" + destination + ".album").append(imgElement);
            } else {
                return imgElement;
            }
        }
        
        $("#titleBar").html("").append(buildButton("left", data.prev)).append(buildButton("up", data.parent)).append(buildButton("right", data.next)).append(" " + data.name);


        
        var selectedImg = window.location.search;
        var selectedPos = undefined;
        if (/^\?focus=/.test(selectedImg)) {
            selectedImg = selectedImg.substring('?focus='.length);
            $("a.ss").each(function(index) {
                if (selectedImg == $(this).attr("title")) {
                    selectedPos = index;
                }
            });
        }

        if (selectedPos !== undefined) {
            $("#ent" + selectedPos).trigger('click');
        }
	});

});