/* Global Variables */

var pkgDirectory;
var currentPackageIndex = 0;
var packages=[];
var packagesIndex=[];
var pkgsDraggable=[];
var pkgsContentDraggable=[];
var pkgMenuFade;
var menuFade;
var pkgZIndex=0;
var pkgPadding=25;
var pastMousePosition=[];
var dblClickCheck=0;
var mouseOutCheck=0;
var expandedPkgList='';
var expandPkgQue='';
var expandedPanelList='';
var pkgExpandLoadHtmlFlag=[];
var pkgInMotion=[];
var pkgScale1D=[];
var pkgMenuClosePreview=[];
var pkgMenuInfoPreview=[];
var borderFix=1;
var frameRate=30;
var pkgSpacing=10;
var enableAnimations=true;
var defaultPkgAspectRatio=1.25; /* TEMP */
var defaultFilter;

/* ENVIRONMENT */

document.onmousemove = getMousePosition;
window.onresize = adjustCanvas;

function text_resize_init() {
    var iBase = TextResizeDetector.addEventListener(onFontResize,null);	
}

function onFontResize(e,args) {

    adjustCanvas();
}

/* REQUESTS */

function getIEVersion() {
   var rv = -1;
   if (navigator.appName == 'Microsoft Internet Explorer')
   {
      var ua = navigator.userAgent;
      var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
      if (re.exec(ua) != null)
         rv = parseFloat( RegExp.$1 );
   }
   return rv;
}

function getMousePosition(e, axis){
    switch (axis) {
        case 'y':
            var posy = 0;
            if (!e) var e = window.event;
            if (e.pageX || e.pageY) 	{
                return e.pageY;
            }
            else if (e.clientX || e.clientY) 	{
                return e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
            } 
            break;
        default:
            var posx = 0;
            if (!e) var e = window.event;
            if (e.pageX || e.pageY) 	{
                return e.pageX;
            }
            else if (e.clientX || e.clientY) 	{
                return e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
            } 
            break;
    }
}

function getCanvasSize() {
    var canvas = document.getElementById('canvas');
    switch (arguments[0]) {
        case 'w': return canvas.offsetWidth;
            break;
        case 'h': return canvas.offsetHeight;
            break;
        default: return [canvas.offsetWidth,canvas.offsetHeight];
    }
}

function getPkgAspectRatio(id) {

    var aspectRatio = packagesIndex[id][6];
    
    if (aspectRatio==null) {
        aspectRatio = defaultPkgAspectRatio;
        packagesIndex[id][6] = defaultPkgAspectRatio;
    }
    else if (typeof(aspectRatio) == 'string' && aspectRatio.indexOf(':') != -1) {
        var aspectRatioParts = aspectRatio.split(':');
        aspectRatio = aspectRatioParts[0]/aspectRatioParts[1];
    }
    return aspectRatio;
}

function getPkgExpandedSize(id,axis) {
    var pkgMenuHeight = document.getElementById('packageMenu'+id).offsetHeight+.5*pkgSpacing;
    var badgeOffsetWidth = document.getElementById('badge').offsetWidth;
    var canvasHeight=getCanvasSize('h');
    var canvasWidth=getCanvasSize('w');
    var contentRatio = getPkgAspectRatio(id);
    var onePointPanelWidth = 1.4;

    var defaultHeight = canvasHeight-2*pkgPadding-pkgMenuHeight;
    var requiredCanvasWidth = contentRatio*defaultHeight*onePointPanelWidth+.5*badgeOffsetWidth+pkgPadding;

    var outputHeight = defaultHeight;
    if ( canvasWidth-requiredCanvasWidth < 0 ) {
        outputHeight = (1/contentRatio)*(canvasWidth-pkgPadding-.5*badgeOffsetWidth)/onePointPanelWidth;
    }

    switch (axis) {
        case 'w': return contentRatio*outputHeight;
            break;
        case 'hm': return outputHeight+pkgMenuHeight;
        default: return outputHeight;
    }
}

function getpkgPanelWidth(id) {
    return document.getElementById('panel'+id).offsetWidth;
}

function getBadgeMaxOffset() {
    return getCanvasSize('w')-.25*document.getElementById('badge').offsetWidth;
}

function getPackageContainerLeft(id) {
    var pkg = document.getElementById('pkg'+id);
    var pkgContainer = document.getElementById('packageContainer'+id);
    
    var pkgExpandedSize = getPkgExpandedSize(id,'h');

    if ( pkgExpandedSize > pkgContainer.offsetHeight ) {
        return (getCanvasSize('w')-getPkgAspectRatio(id)*pkgExpandedSize)/2;
    }
    else {
        return pkg.offsetLeft+pkgContainer.offsetLeft;
    }
}

function getBadgeOffset(id, request, includePanelWidth) {
    var badge = document.getElementById('badge');
    var pkgPanelWidth = 0;
    if (includePanelWidth == true) {
        pkgPanelWidth = getpkgPanelWidth(id)+1*borderFix;
    }

    var futureBadgeOffset = pkgSpacing*1.5+getPackageContainerLeft(id)+(getPkgExpandedSize(id,'w')+2*borderFix+pkgPanelWidth);
    var badgeOffset = futureBadgeOffset-badge.offsetLeft;
    
    var badgeOffsetMax = getBadgeMaxOffset();

    var offsetRemainder = 0;
    if (futureBadgeOffset > badgeOffsetMax) {
        badgeOffset = badgeOffsetMax-badge.offsetLeft;
        offsetRemainder = -1*(futureBadgeOffset-badgeOffsetMax);
    }
    if ( badgeOffset < -1 ) {
        badgeOffset = -1;
    }
    
    if ( request == 'remainder' ) {
        return offsetRemainder;
    }
    else {
        return badgeOffset;
    }
}

function getPackages() {
    new Ajax.Request('packageIndex.xml', {
        method: 'get',
        contentType: 'application/xml',
        onSuccess: function(transport) {
        
            var xmlroot = transport.responseXML.getElementsByTagName('packages')[0];
            var packageCount = xmlroot.getElementsByTagName('package').length;
            pkgDirectory = xmlroot.getAttribute('directory');
            defaultFilter = xmlroot.getAttribute('defaultFilter');
        
            for( var i = 0; i < packageCount; i++ ) {
                if ( xmlroot.getElementsByTagName('package')[i].getAttribute('visible') != '0' ) {
                    var packageId = 'pkg'+i;
                    var packageDisplayImage = xmlroot.getElementsByTagName('package')[i].getAttribute('name') + '/' + xmlroot.getElementsByTagName('package')[i].getAttribute('images') + '/' + xmlroot.getElementsByTagName('package')[i].getAttribute('defaultImage');
                    var packageName = xmlroot.getElementsByTagName('package')[i].getAttribute('name');

                    packages[i] = [packageId,packageDisplayImage,packageName];
                    packagesIndex[i] = [packageId,packageName,xmlroot.getElementsByTagName('package')[i].getAttribute('title'),xmlroot.getElementsByTagName('package')[i].getAttribute('keywords'),xmlroot.getElementsByTagName('package')[i].getAttribute('year'),xmlroot.getElementsByTagName('package')[i].getAttribute('status'),xmlroot.getElementsByTagName('package')[i].getAttribute('aspectRatio')];
                }
            }
        }
    });
}

function getPackage(pkg) {

    new Ajax.Request(pkgDirectory+'/'+pkg+'/data.xml', {
        method: 'get',
        contentType: 'application/xml',
        onSuccess: function(transport) {
        
                var xmlroot = transport.responseXML.getElementsByTagName('package')[0];


                var id = packages.length;
                var pkgName = xmlroot.getElementsByTagName('name')[0].childNodes[0].nodeValue;
                var pkgTitle = xmlroot.getElementsByTagName('title')[0].childNodes[0].nodeValue;
                var pkgImageDefault = xmlroot.getElementsByTagName('defaultImage')[0].childNodes[0].nodeValue;
                var pkgImageDir = xmlroot.getElementsByTagName('images')[0].getAttribute('directory');
                var pkgKeywords = xmlroot.getElementsByTagName('keywords')[0].childNodes[0].nodeValue;
                var pkgYear = xmlroot.getElementsByTagName('year')[0].childNodes[0].nodeValue;
                var pkgStatus = xmlroot.getElementsByTagName('status')[0].childNodes[0].nodeValue;
                var pkgAspectRatio = xmlroot.getElementsByTagName('aspectRatio')[0].childNodes[0].nodeValue;

                var thumbnailPath = pkgName + '/' + pkgImageDir + '/' + pkgImageDefault;
               
                packages[id] = ['pkg'+id,thumbnailPath,pkgName];
                packagesIndex[id] = ['pkg'+id,pkgName,pkgTitle,pkgKeywords,pkgYear,pkgStatus,pkgAspectRatio];
                
                createPackage(['pkg'+id]);
                expandPkgQue = 'pkg'+id;
                locatePackages(id);       
        }
    });
}

/* CREATE DOM ELEMENTS */

function createPackage(id) {
    var filter = defaultFilter;
    var pkgList = packages;
    var start = 0;
    var end = pkgList.length;
    
    if (id != 'initialize') {
        filter = '';
        start = id;
        end = id+1;
    }
    
    var pkgSize = document.getElementById('badge').offsetHeight;

    for( var i = start; i < end; i++ ) {
        if (pkgList[i]!=undefined) {
        
            var keyWords = packagesIndex[i][3];
            if (keyWords.indexOf(filter) != -1 && keyWords.indexOf('hidden') == -1) {

                var package = document.createElement('div');
                package.className = 'package';
                package.id = packages[(i+currentPackageIndex)][0];
                
                var packageContainer = document.createElement('div');
                packageContainer.onmousedown = jsStoreMousePosition;
                packageContainer.onmouseover = jsShowPackage;
                packageContainer.className = 'container';
                packageContainer.id = 'packageContainer'+(i+currentPackageIndex);
                
                var packagePanel = document.createElement('div');
                packagePanel.className = 'panel';
                packagePanel.id = 'panel'+(i+currentPackageIndex);
                
                var packagePanelContent = document.createElement('div');
                packagePanelContent.className = 'content';
                packagePanelContent.id = 'packagePanelContent'+(i+currentPackageIndex);
                
                var packageDisplay = document.createElement('div');
                packageDisplay.onclick = jsTriggerPackage;
                packageDisplay.className = 'display';
                packageDisplay.id = 'packageDisplay'+(i+currentPackageIndex);
                
                var packageDisplayContent = document.createElement('div');
                packageDisplayContent.id = 'packageDisplayContent'+(i+currentPackageIndex);
                packageDisplayContent.className = 'content';
                
                var packageDisplayImagePreview = document.createElement('img');
                packageDisplayImagePreview.alt = '';
                packageDisplayImagePreview.id = 'packageDisplayImagePreview'+(i+currentPackageIndex);
                packageDisplayImagePreview.className = 'packageDisplayImagePreview';
                if (!Prototype.Browser.IE) {
                    packageDisplayImagePreview.src = 'resources/blank.jpg';
                }

                var packageDisplayImage = document.createElement('img');
                packageDisplayImage.alt = 'package';
                packageDisplayImage.id = 'packageDisplayImage'+(i+currentPackageIndex);
                packageDisplayImage.className = 'packageDisplayImage';
                
                var packageDisplayBorder = document.createElement('div');
                packageDisplayBorder.id = 'packageDisplayBorder' + (i+currentPackageIndex);
                packageDisplayBorder.className = 'packageDisplayBorder';
                
                var packageMenu = document.createElement('div');
                packageMenu.className = 'packageMenu';
                packageMenu.id = 'packageMenu'+(i+currentPackageIndex);

                var canvas = document.getElementById('canvas');
                canvas.appendChild(package);
                
                package.appendChild(packageContainer);
                packageContainer.appendChild(packageMenu);
                packageContainer.appendChild(packagePanel);
                packagePanel.appendChild(packagePanelContent);
                packageContainer.appendChild(packageDisplay);
                packageDisplay.appendChild(packageDisplayContent);
                packageDisplayContent.appendChild(packageDisplayImagePreview);
                packageDisplayContent.appendChild(packageDisplayImage);
                packageDisplay.appendChild(packageDisplayBorder);
                
                var pkgAspectRatio = getPkgAspectRatio(i+currentPackageIndex);
                var imageHeight = packageDisplay.offsetHeight;
                var imageCenterOffset = (pkgSize-(pkgSize*pkgAspectRatio))/2;
                var imageCenterTOffset = 0;
                if (imageCenterOffset > 0) {
                    imageCenterOffset = 0;
                    imageCenterTOffset = (pkgSize-(pkgSize/pkgAspectRatio))/2;
                    packageDisplayImagePreview.style.width = '100%';
                    packageDisplayImagePreview.style.height = 'auto';
                    imageHeight = packageDisplay.offsetHeight*(1/pkgAspectRatio);
                }
                
                packageDisplayImagePreview.style.left = imageCenterOffset+'px';
                packageDisplayImagePreview.style.top = imageCenterTOffset+'px';
        
                packageDisplayImagePreview.src = 'scripts/getImage.php?src='+packages[(i+currentPackageIndex)][1]+'&h='+imageHeight;

                var indexList = document.getElementById('indexList');      
                var indexRow = document.createElement('tr');
                indexList.appendChild(indexRow);  
                var cellCount = 5;
                for( var j = 0; j < cellCount; j++ ) {
                    var indexCell = document.createElement('td');
                    indexRow.appendChild(indexCell);
                    switch (j) {
                        case 0:
                            indexCell.appendChild(document.createTextNode((i+currentPackageIndex)));
                            break;
                        case 1:
                            var itemHref = document.createElement('a');
                            itemHref.href = 'javascript:jsRepairCanvas('+(i+currentPackageIndex)+')';
                            indexCell.appendChild(itemHref);
                            itemHref.appendChild(document.createTextNode(packagesIndex[(i+currentPackageIndex)][2]));
                            break;
                        case 2:
                            var description = packagesIndex[(i+currentPackageIndex)][3];
                            description = description.replace('ksu','Kent State University');
                            description = description.replace('saed','School of Architecture + Environmental Design');
                            description = description.replace('caed','College of Architecture + Environmental Design');
                            description = description.replace('yu','Yale University');
                            description = description.replace('soa','Yale School of Architecture');
                            indexCell.appendChild(document.createTextNode(description));
                            break;
                        case 3:
                            indexCell.appendChild(document.createTextNode(packagesIndex[(i+currentPackageIndex)][4]));
                            break;
                        case 4:
                            indexCell.appendChild(document.createTextNode(packagesIndex[(i+currentPackageIndex)][5]));
                            break;
                    }
                }
            }
        }
    }
    //currentPackageIndex = currentPackageIndex+pkgList.length;
}

function populatePackageMenu(id, delay) {

    var packageMenu = document.getElementById('packageMenu'+id);
    if ( packageMenu.hasChildNodes() == false ) {

        new Ajax.Request(pkgDirectory + '/' + packages[id][2] + '/data.xml', {
            method: 'get',
            contentType: 'application/xml',
            onSuccess: function(transport) {

                var xmlroot = transport.responseXML.getElementsByTagName('package')[0];
                
                var packageMenuClose = document.createElement('div');
                packageMenuClose.onclick = jsTriggerPackage;
                packageMenuClose.onmouseover = jsPreviewClose;
                packageMenuClose.onmouseout = jsPreviewClose;
                packageMenuClose.className = 'packageMenuClose';
                packageMenuClose.id = 'packageMenuClose'+id;
                
                packageMenu.appendChild(packageMenuClose);
                packageMenuClose.appendChild(document.createTextNode('x'));
                
                var packageMenuInfo = document.createElement('div');
                packageMenuInfo.onclick = jsTriggerTitle;
                packageMenuInfo.onmouseover = jsPreviewInfo;
                packageMenuInfo.onmouseout = jsPreviewInfo;
                packageMenuInfo.className = 'packageMenuInfo';
                packageMenuInfo.id = 'packageMenuInfo'+id;
                
                packageMenu.appendChild(packageMenuInfo);
                packageMenuInfo.appendChild(document.createTextNode('i'));
                
                var packageTitle = 'title';
                var packageDescription = '_description';
                
                if (xmlroot.getElementsByTagName('title')[0] != null) {
                    packageTitle = xmlroot.getElementsByTagName('title')[0].childNodes[0].nodeValue;
                }
                if (xmlroot.getElementsByTagName('description')[0] != null) {
                    packageDescription = xmlroot.getElementsByTagName('description')[0].childNodes[0].nodeValue;
                }
                
                var packageMenuTitle = document.createElement('div');
                packageMenuTitle.className = 'packageMenuTitle';
                packageMenuTitle.id = 'packageMenuTitle'+id;
                
                var packageMenuTitleText = document.createElement('div');
                
                var packageMenuTitleBold = document.createElement('span');
                packageMenuTitleBold.className = 'bold';
                
                packageMenu.appendChild(packageMenuTitle);
                packageMenuTitle.appendChild(packageMenuTitleText);
                packageMenuTitleText.appendChild(packageMenuTitleBold);
                
                packageMenuTitleBold.appendChild(document.createTextNode(packageTitle.toUpperCase()+' '));
                
                var packageDescriptionArray = packageDescription.split('_');
                
                for( var i = 0; i < packageDescriptionArray.length; i++ ) {
                    if (i != 0 ) {
                        packageMenuTitleText.appendChild(document.createElement('br'));
                    }
                    packageMenuTitleText.appendChild(document.createTextNode(packageDescriptionArray[i]));
                }
                
                var packageContainer = document.getElementById('packageContainer'+id);
                
                var packageKind = xmlroot.getAttribute('kind');
                switch (packageKind) {
                    case 'album':
                    
                        var xmlThumbnails = xmlroot.getElementsByTagName('photographs')[0];
                        var thumbnailCount = xmlThumbnails.getElementsByTagName('photograph').length;
                        
                        if ( thumbnailCount > 0 ) {
                            packageMenuInfo.onclick = jsTriggerPanel;
                        }
                        
                        var packagePanel = document.getElementById('panel'+id);
                        packagePanel.style.width = '12em';
                        
                        var packageMenuCaption = document.createElement('div');
                        packageMenuCaption.id = 'packageMenuCaption' + id;
                        packageMenuCaption.className = 'packageMenuCaption';
                        var packageMenuCaptionBold = document.createElement('span');
                        packageMenuCaptionBold.className = 'bold';
                        packageMenuCaption.appendChild(document.createTextNode('caption: '));
                        packageMenuCaption.appendChild(packageMenuCaptionBold);
                        packageMenuCaptionBold.appendChild(document.createTextNode('text'));
                        packageMenuCaption.appendChild(document.createTextNode(', location, '));
                        packageMenuCaption.appendChild(document.createTextNode('© 2005 dy'));
                        packageMenu.appendChild(packageMenuCaption);
                        
                        break;
                    
                    default: /* portfolio */

                        var xmlImages = xmlroot.getElementsByTagName('images')[0];
                        var imageCount = xmlImages.getElementsByTagName('image').length;

                        var xmlSupplements = xmlroot.getElementsByTagName('supplements')[0];
                        var supplementCount = xmlSupplements.getElementsByTagName('supplement').length;

                        var imageHeight = getPkgExpandedSize(id, 'y');
                        var imageWidthThumbnail = (1/imageCount)*getPkgExpandedSize(id, 'x');

                        var packageMenuItems = document.createElement('div');
                        packageMenuItems.id = 'packageMenuItems' + id;
                        packageMenuItems.className = 'packageMenuItems';
                        packageMenu.appendChild(packageMenuItems);

                        if (imageCount > 1) {

                            for( var i = 0; i < imageCount; i++ ) {
                                var imageFilterString = "";
                                var imagePath = packages[id][2] + '/' + xmlImages.getElementsByTagName('image')[i].getAttribute('src');
                                var itemType = xmlImages.getElementsByTagName('image')[i].getAttribute('type');
                                var currentPreviewSrc = document.getElementById('packageDisplayImage'+id).src;
                                var currentImageSrc = document.getElementById('packageDisplayImagePreview'+id).src;
                                if (currentPreviewSrc.indexOf(imagePath) != -1 || currentImageSrc.indexOf(imagePath) != -1 ) {
                                    switch(itemType) {
                                        case 'text/html':
                                            pkgExpandLoadHtmlFlag[id] = ['packageDisplayImage'+id,pkgDirectory+'/'+xmlImages.getElementsByTagName('image')[i].getAttribute('data'),'text/html'];
                                            break;
                                     }
                                }
                                var imageFilters = xmlImages.getElementsByTagName('image')[i].getAttribute('thumbnailFilters');
                                if (imageFilters != null) {
                                    var imageFiltersArray = imageFilters.split(',');

                                    for( var j = 0; j < imageFiltersArray.length; j++ ) {
                                        switch (imageFiltersArray[j]) {
                                            case 'invert': imageFilterString += '&filter_i=true';
                                                break;
                                        }   
                                    }
                                }
                                var packageMenuItem = document.createElement('div');
                                packageMenuItem.className = 'packageMenuItem';
                                packageMenuItem.style.width = 100/(imageCount)+'%';
                                
                                var decimalAspectRatio;
                                var aspectRatio = xmlImages.getElementsByTagName('image')[i].getAttribute('aspectRatio');
                                if (aspectRatio != undefined) {
                                    var aspectRatioParts = aspectRatio.split(':');
                                    decimalAspectRatio = aspectRatioParts[0]/aspectRatioParts[1];
                                }

                                var packageMenuItemHref = document.createElement('a');
                                switch(itemType) {
                                    case 'text/html':
                                        packageMenuItemHref.href = 'javascript:jsCycleDisplay(\''+'packageDisplayImage'+id+'\',\''+pkgDirectory+'/'+xmlImages.getElementsByTagName('image')[i].getAttribute('data')+'\',\'text/html\','+decimalAspectRatio+')';
                                        break;
                                    default:
                                        packageMenuItemHref.href = 'javascript:jsCycleDisplay(\''+'packageDisplayImage'+id+'\',\''+imagePath+'\',\'image/jpeg\','+decimalAspectRatio+')';
                                }
                                
                                packageMenuItemImage = document.createElement('img');
                                packageMenuItemImage.className = 'packageMenuItemImage';
                                packageMenuItemImage.id = 'packageMenu'+id+'ItemImage'+i;
                                packageMenuItemImage.src = 'scripts/getImage.php?src='+imagePath+'&w='+imageWidthThumbnail+imageFilterString;
                                
                                packageMenuItems.appendChild(packageMenuItem);
                                packageMenuItem.appendChild(packageMenuItemHref);
                                packageMenuItemHref.appendChild(packageMenuItemImage);
                            }
                        }
                        else {
                        //DOES NOT BELONG HERE
                            //setTimeout('showPackageMenuTitle('+id+')',delay*1250);
                        }
                        
                        if ( supplementCount > 0 ) {
                                    packageMenuInfo.onclick = jsTriggerPanel;
                        }
                }
            }
        });
    }
}

var albumThumbnailsRefreshTimer;
function jsLoadAlbumThumbnails() {
    clearTimeout(albumThumbnailsRefreshTimer);
    albumThumbnailsRefreshTimer = setTimeout('albumLoadThumbnails(\''+this.id+'\')',100);
}

function albumLoadThumbnails(container) {

    var albumContainer = document.getElementById(container);
    var albumContainerPosition = albumContainer.scrollTop;
    
    var albumThumbnails = albumContainer.childNodes[0];
    var albumThumbnail = albumThumbnails.childNodes;
    var albumThumbnailCount = albumThumbnail.length;
    
    var albumThumbnailsVisibleRows = albumContainer.offsetHeight/albumThumbnail[0].offsetHeight;
    var albumThumbnailsVisibleColumns = albumThumbnails.offsetWidth/albumThumbnail[0].offsetWidth;
    if (parseInt(albumThumbnailsVisibleRows) < albumThumbnailsVisibleRows) {
        albumThumbnailsVisibleRows = parseInt(albumThumbnailsVisibleRows) + 1;
    }
    else {
        albumThumbnailsVisibleRows = parseInt(albumThumbnailsVisibleRows);
    }
    if (parseInt(albumThumbnailsVisibleColumns) < albumThumbnailsVisibleColumns) {
        albumThumbnailsVisibleColumns = parseInt(albumThumbnailsVisibleColumns) + 1;
    }
    else {
        albumThumbnailsVisibleColumns = parseInt(albumThumbnailsVisibleColumns);
    }
    var albumThumbnailsVisibleCount = albumThumbnailsVisibleRows*albumThumbnailsVisibleColumns;
    
    var albumThumbnailsHeight = albumThumbnails.offsetHeight;
    
    var loadStart = parseInt((albumContainerPosition/albumThumbnailsHeight)*albumThumbnailCount);
    var loadFinish = loadStart + albumThumbnailsVisibleCount;
    
    for( var i = loadStart; i < loadFinish; i++ ) {
        var albumThumbnailImage = albumThumbnail[i].childNodes[0].childNodes[0];
        var albumThumbnailSrc = albumThumbnail[i].childNodes[0].childNodes[1].childNodes[0].nodeValue;
        albumThumbnailImage.src = albumThumbnailSrc;
    }
    
    
    
}

function populatePanel(id) {

    var packagePanelContent = document.getElementById('packagePanelContent'+id);
    
    if ( packagePanelContent.hasChildNodes() == false ) {

        new Ajax.Request(pkgDirectory+'/'+packages[id][2]+'/data.xml', {
            method: 'get',
            contentType: 'application/xml',
            onSuccess: function(transport) {

                var xmlroot = transport.responseXML.getElementsByTagName('package')[0];

                var packageKind = xmlroot.getAttribute('kind');
                switch (packageKind) {
                    case 'album':

                        var xmlThumbnails = xmlroot.getElementsByTagName('photographs')[0];
                        var thumbnailCount = xmlThumbnails.getElementsByTagName('photograph').length;
                        
                        var packagePanelThumbnails = document.createElement('div');
                        packagePanelThumbnails.className = 'packagePanelThumbnails';
                        packagePanelContent.appendChild(packagePanelThumbnails);
                            
                        for( var i = 0; i < thumbnailCount; i++ ) {
                        
                            // reverse order
                            //var j = -1*(i-thumbnailCount+1);
                            var j = i;
                        
                            if (xmlThumbnails.getElementsByTagName('photograph')[j].getAttribute('public') == 1) {
                        
                                var imagePath = packages[id][2]+'/'+xmlThumbnails.getAttribute('directory')+'/'+xmlThumbnails.getElementsByTagName('photograph')[j].getAttribute('src');
                                var imageHeight = getPkgExpandedSize(id, 'y');
                                var aspectRatio = xmlThumbnails.getElementsByTagName('photograph')[j].getAttribute('aspectRatio');
                                var aspectRatioParts = aspectRatio.split(':');
                                var decimalAspectRatio = aspectRatioParts[0]/aspectRatioParts[1];
                                
                                var imgCaption = xmlThumbnails.getElementsByTagName('photograph')[j].getAttribute('caption');
                                var imgLocation = xmlThumbnails.getElementsByTagName('photograph')[j].getAttribute('location');
                                var imgAuthor = xmlThumbnails.getElementsByTagName('photograph')[j].getAttribute('author');
                                var imgYear = xmlThumbnails.getElementsByTagName('photograph')[j].getAttribute('year');
                                var imgCopyright = xmlThumbnails.getElementsByTagName('photograph')[j].getAttribute('copyright');
                                
                                var packagePanelThumbnail = document.createElement('div');
                                packagePanelThumbnail.className = 'packagePanelThumbnail';
                                packagePanelThumbnail.id = 'package'+id+'PanelThumbnail'+i;
                                
                                var packagePanelThumbnailHref = document.createElement('a');
                                packagePanelThumbnailHref.href = 'javascript:jsCycleDisplay(\''+'packageDisplayImage'+id+'\',\''+imagePath+'\',\'image/jpeg\','+decimalAspectRatio+',\''+imgCaption+'\',\''+imgLocation+'\',\''+imgAuthor+'\',\''+imgYear+'\',\''+imgCopyright+'\')';

                                var packagePanelThumbnailImage = document.createElement('img');
                                //packagePanelThumbnailImage.src = 'scripts/getImage.php?src='+imagePath+'&w='+getpkgPanelWidth(id)/2+'&h='+getpkgPanelWidth(id)/2;
                                packagePanelThumbnailImage.src = 'resources/blank.png';
                                
                                var packagePanelThumbnailSrc = document.createElement('div');
                                packagePanelThumbnailSrc.className = 'packagePanelThumbnailSrc';
                                
                                packagePanelThumbnails.appendChild(packagePanelThumbnail);
                                packagePanelThumbnail.appendChild(packagePanelThumbnailHref);
                                packagePanelThumbnailHref.appendChild(packagePanelThumbnailImage);
                                packagePanelThumbnailHref.appendChild(packagePanelThumbnailSrc);
                                packagePanelThumbnailSrc.appendChild(document.createTextNode('scripts/getImage.php?src='+imagePath+'&w='+getpkgPanelWidth(id)/2+'&h='+getpkgPanelWidth(id)/2));
                            }
                        }
                        packagePanelContent.onscroll = jsLoadAlbumThumbnails;
                        setTimeout('albumLoadThumbnails(\'packagePanelContent'+id+'\')',1000);
                        break;
                    
                    default: /* portfolio */

                        var xmlSupplements = xmlroot.getElementsByTagName('supplements')[0];
                        var supplementCount = xmlSupplements.getElementsByTagName('supplement').length;

                        for( var i = 0; i < supplementCount; i++ ) {
                            var supplementType = xmlSupplements.getElementsByTagName('supplement')[i].getAttribute('type');

                            switch(supplementType) {
                            
                                case 'image/jpeg': case 'image':
                                    var imagePath = packages[id][2]+'/'+xmlSupplements.getElementsByTagName('supplement')[i].getAttribute('src');
                                    
                                    var packagePanelContentItem = document.createElement('div');
                                    packagePanelContentItem.id = 'package'+id+'PanelContentItem'+i;
                                    packagePanelContentItem.className = 'item';
                                    
                                    var packagePanelContentImage = document.createElement('img');
                                    packagePanelContentImage.id = 'package'+id+'PanelContentImage'+i;
                                    packagePanelContentImage.className = 'packagePanelContentImage';
                                    packagePanelContentImage.src = 'scripts/getImage.php?src='+imagePath+'&w='+getpkgPanelWidth(id);

                                    packagePanelContentItem.appendChild(packagePanelContentImage);
                                    packagePanelContent.appendChild(packagePanelContentItem);
                                    break;
                                    
                                case 'text':
                                    var xmlParagraphs = xmlSupplements.getElementsByTagName('supplement')[i];
                                    var paragraphCount = xmlParagraphs.getElementsByTagName('p').length;
                                    
                                    var packagePanelContentItem = document.createElement('div');
                                    packagePanelContentItem.id = 'package'+id+'PanelContentItem'+i;
                                    packagePanelContentItem.className = 'item';
                                    packagePanelContent.appendChild(packagePanelContentItem);
                                    
                                    var paragraphTitle = document.createElement('p');
                                    paragraphTitle.className = 'text title';
                                    packagePanelContentItem.appendChild(paragraphTitle);
                                    paragraphTitle.appendChild(document.createTextNode(xmlSupplements.getElementsByTagName('supplement')[i].getAttribute('title')));
                                    
                                    for( var j = 0; j < paragraphCount; j++ ) {
                                        var paragraph = document.createElement('p');
                                        paragraph.className = 'text';
                                        
                                        packagePanelContentItem.appendChild(paragraph);
                                        paragraph.appendChild(document.createTextNode(xmlParagraphs.getElementsByTagName('p')[j].childNodes[0].nodeValue));
                                    }
                                    break;
                                case 'video/mp4': case 'video':
                                    var posterPath = packages[id][2]+'/'+xmlSupplements.getElementsByTagName('supplement')[i].getAttribute('poster');
                                    var packagePanelContentItem = document.createElement('div');
                                    packagePanelContentItem.id = 'package'+id+'PanelContentItem'+i;
                                    packagePanelContentItem.className = 'item';
                                                                
                                    packagePanelContent.appendChild(packagePanelContentItem);
                                    
                                    var packagePanelContentItemPoster = document.createElement('img');
                                    packagePanelContentItemPoster.src = 'scripts/getImage.php?src='+posterPath+'&w='+getpkgPanelWidth(id);
                                    packagePanelContentItemPoster.width = '100%';
                                    packagePanelContentItemPoster.className = 'packagePanelContentPoster';
                                    packagePanelContentItemPoster.onclick = jsPlayVideo;
                                    packagePanelContentItemPoster.id = 'package'+id+'PanelContentPoster'+i;
                                    
                                    var packagePanelContentItemVideo = document.createElement('video');
                                    packagePanelContentItemVideo.style.width = '100%';
                                    packagePanelContentItemVideo.id = 'package'+id+'PanelContentVideo'+i;
                     
                                    var packagePanelContentItemVideoSource = document.createElement('source');
                                    packagePanelContentItemVideoSource.setAttribute('src',pkgDirectory+'/'+packages[id][2]+'/'+xmlSupplements.getElementsByTagName('supplement')[i].getAttribute('src'));
                                    
                                    if (xmlSupplements.getElementsByTagName('supplement')[i].getAttribute('altsrc') != null) {
                                        var packagePanelContentItemVideoAltSource = document.createElement('source');
                                        packagePanelContentItemVideoAltSource.setAttribute('src',pkgDirectory+'/'+packages[id][2]+'/'+xmlSupplements.getElementsByTagName('supplement')[i].getAttribute('altsrc'));
                                    }
                                    var packagePanelContentItemUpgrade = document.createElement('img');
                                    packagePanelContentItemUpgrade.src = 'scripts/getImage.php?src='+posterPath+'&w='+getpkgPanelWidth(id);
                                    packagePanelContentItemUpgrade.width = '100%';
                                    packagePanelContentItemUpgrade.className = 'packagePanelContentImage';
                                    
                                    packagePanelContentItem.appendChild(packagePanelContentItemPoster);
                                    packagePanelContentItem.appendChild(packagePanelContentItemVideo);
                                    packagePanelContentItemVideo.appendChild(packagePanelContentItemVideoSource);
                                    if (packagePanelContentItemVideoAltSource != undefined) {
                                        packagePanelContentItemVideo.appendChild(packagePanelContentItemVideoAltSource);
                                    }
                                    packagePanelContentItemVideo.appendChild(packagePanelContentItemUpgrade);
                                    break;
                                case 'application/x-shockwave-flash': case 'flash':
                                    
                                    break;
                            }

                            if (supplementType=='image' || supplementType=='video' || supplementType=='flash') {
                                var title = xmlSupplements.getElementsByTagName('supplement')[i].getAttribute('title');                                                
                                var description = xmlSupplements.getElementsByTagName('supplement')[i].getAttribute('description');
                                var packageDescriptionTitleArray = description.split('+title+');
                                
                                var packagePanelContentDescription = document.createElement('div');
                                packagePanelContentDescription.className = 'description';
                                
                                for( var j = 0; j < packageDescriptionTitleArray.length; j++ ) {
                                    if ( packageDescriptionTitleArray.length == 0 && j == 0 ) {
                                        var packagePanelContentDescriptionBold = document.createElement('span');
                                        packagePanelContentDescriptionBold.className = 'bold';
                                        packagePanelContentDescription.appendChild(packagePanelContentDescriptionBold);
                                        packagePanelContentDescriptionBold.appendChild(document.createTextNode('^ '+title));
                                    }
                                    else if ( packageDescriptionTitleArray.length > 0 && j == 0 ) {
                                        packagePanelContentDescription.appendChild(document.createTextNode('^ '));
                                    }
                                    var packageDescriptionBreakArray = packageDescriptionTitleArray[j].split('_');                
                                    for( var k = 0; k < packageDescriptionBreakArray.length; k++ ) {
                                        if (k != 0 ) {
                                            packagePanelContentDescription.appendChild(document.createElement('br'));
                                        }
                                        packagePanelContentDescription.appendChild(document.createTextNode(packageDescriptionBreakArray[k]));
                                    }
                                    if ( packageDescriptionTitleArray.length > 0 && j ==0 ) {
                                        var packagePanelContentDescriptionBold = document.createElement('span');
                                        packagePanelContentDescriptionBold.className = 'bold';
                                        packagePanelContentDescription.appendChild(packagePanelContentDescriptionBold);
                                        packagePanelContentDescriptionBold.appendChild(document.createTextNode(title));
                                    }
                                    
                                    packagePanelContentItem.appendChild(packagePanelContentDescription);
                                }
                            }
                    }
                }
            }
        });
    }
}

function destroyPackage(element) {
    var id = element;
    if ( typeof(id) == 'object' ) {
        var pkgId = element.element.id;
        id = pkgId.replace('pkg','');
    }
    var pkg = document.getElementById('pkg'+id);
    var canvas = document.getElementById('canvas');
    canvas.removeChild(pkg);
}
    
/* STATIC POSITION */

function locateBadge() {
    var badge = document.getElementById('badge');
    badge.style.left = (getCanvasSize('w')-badge.offsetWidth-pkgPadding)+'px';
    badge.style.top = pkgPadding+'px';

    var badgeTail = document.getElementById('badgeTail');
    badgeTail.style.left = (1-badgeTail.offsetWidth-pkgPadding)+'px';
    badgeTail.style.top = pkgPadding+'px';
}
    
function locateSearch() {
    var search = document.getElementById('search');
    var searchDisplayInput = document.getElementById('searchDisplayInput');
    var searchDisplayOutput = document.getElementById('searchDisplayOutput');

    searchDisplayInput.style.width = searchDisplayOutput.offsetWidth-2*borderFix+'px';
    searchDisplayOutput.style.top = -1*(.5*pkgSpacing+searchDisplayOutput.offsetHeight)+'px';

    search.style.left = (getCanvasSize('w')-searchDisplayInput.offsetWidth-pkgPadding)+'px';
    search.style.top = (getCanvasSize('h')-searchDisplayInput.offsetHeight-pkgPadding+1*borderFix)+'px';
}

function locateNotice() {
    var notice = document.getElementById('menu');
    notice.style.left = pkgPadding+'px';
    notice.style.top = (getCanvasSize('h')-notice.offsetHeight-pkgPadding)+'px';
}

function locatePackages(pkg) {
    var pkgStart = 0;
    var pkgEnd = packages.length;
    
    if (pkg != 'initialize') {
        filter = '';
        pkgStart = pkg;
        pkgEnd = pkg+1;
    }
    
    var pkgSize = document.getElementById('badgeTail').offsetHeight;
    
    var availableWidth = getCanvasSize('w')-document.getElementById('badge').offsetWidth-3*pkgPadding-pkgSize;
    var availableHeight = getCanvasSize('h')-3*pkgPadding-pkgSize;

    for( var i = pkgStart; i < pkgEnd; i++ ) {

        var pkg_i = document.getElementById(packages[i][0]);
        if (pkg_i !=null) {

            pkg_i.style.left = pkgPadding+availableWidth*Math.random()+'px';
            pkg_i.style.top = pkgPadding+availableHeight*Math.random()+'px';
            
            /* bug fix */
            if (pkgsDraggable[i]!=undefined) {
                pkgsDraggable[i].destroy();
            }
            
            if (expandPkgQue != 'pkg'+i) {
                pkg_i.style.visibility = 'hidden';
                setTimeout("document.getElementById(packages["+i+"][0]).style.visibility='visible'", 100*(i+1));
                pkgsDraggable[i] = new Draggable(pkg_i);
            }
            else {
                var id = expandPkgQue.replace('pkg','');
                jsShowPackage(id)
                setTimeout('expandPackage('+id+')',1000);
                expandPkgQue = "";               
            }
        }
    }
}

function locatePackageMenuItems(elementId) {

    var packageMenuId = elementId.element.id;
    var id = packageMenuId.replace('packageMenu', '')

    var packageMenu = document.getElementById('packageMenu'+id);        
    var packageMenuClose = document.getElementById('packageMenuClose'+id);
    var packageMenuInfo = document.getElementById('packageMenuInfo'+id);
    var packageMenuItems = document.getElementById('packageMenuItems'+id);
    var packageMenuTitle = document.getElementById('packageMenuTitle'+id);
    
    packageMenu.style.visibility = 'visible';
    packageMenuInfo.style.left = (packageMenu.offsetWidth-packageMenuInfo.offsetWidth-2*borderFix)+'px';
    if (packageMenuItems != null) {
        packageMenuItems.style.width = (packageMenu.offsetWidth-packageMenuClose.offsetWidth-packageMenuInfo.offsetWidth)+'px';
        packageMenuItems.style.left = packageMenuClose.offsetWidth+'px';
    }
    if (packageMenuTitle != null) {
        packageMenuTitle.style.left = packageMenu.offsetWidth+'px';
    }
    if (packageMenuItems != null) {
        if ( document.getElementById('packageMenu'+id+'ItemImage0') != null && document.getElementById('packageMenu'+id+'ItemImage0').offsetHeight > 2 ) {
            var packageMenuItemImageHeight = document.getElementById('packageMenu'+id+'ItemImage0').offsetHeight;
            packageMenuItems.style.top = -.5*(packageMenuItemImageHeight-(packageMenu.offsetHeight-2*borderFix))+'px';
        }
        else {
            packageMenuItems.style.top = 0+'px';
        }
    }
    
    if ((packageMenuItems != null && packageMenuItems.hasChildNodes() == false) || packageMenuItems == null) {
        setTimeout('showPackageMenuTitle('+id+')',1050);
        
    }
    if (document.getElementById('packageMenuCaption'+id) != null) {
        setTimeout('expandPanel('+id+')',2150);
    }
}
    
/* DYNAMIC POSITIONS */

function centerPkgImage(id,pkgSize) {
    if(id!=undefined) {
        if(pkgSize==undefined) {
            pkgSize = document.getElementById('badge').offsetHeight;
        }
        var aspectRatio = getPkgAspectRatio(id);
        var imgObject = 'packageDisplayImage';
        if (document.getElementById('packageDisplayImage'+id).style.display != 'block') {
            imgObject = 'packageDisplayImagePreview';
        }
        
        var lOffset = (pkgSize-(pkgSize*aspectRatio))/2;
        var tOffset = 0;
        if (lOffset > 0) {
            lOffset = 0;
            tOffset = (pkgSize-(pkgSize/aspectRatio))/2;
        }
        
/*EFF*/ new Effect.Move(imgObject+id, { x: lOffset, y: tOffset, mode: 'absolute', transition: Effect.Transitions.sinoidal, duration: 1, framerate: frameRate });
    }
}

function displacePackage(id) {

    var pkg = document.getElementById('pkg'+id);
    if (pkg!=null) {

        var pkgSize = document.getElementById('badge').offsetHeight;    
        var cPkgWidth = pkg.offsetWidth;
        
        var availableWidth = getCanvasSize('w')-3*pkgPadding-2*pkgSize;

        if (cPkgWidth == pkgSize) {
/*EFF*/     new Effect.Move('pkg'+id, { x: pkgPadding+availableWidth*Math.random(), y: pkgPadding+.2*id, mode: 'absolute', transition: Effect.Transitions.sinoidal, duration: 1, fps: frameRate });
        }
        else {
            var scaleFrom = (cPkgWidth/pkgSize)*100;
/*EFF*/     new Effect.Parallel([
                new Effect.Scale('pkg'+id, 100, { sync: true, scaleContent: false, scaleMode: { originalHeight: pkgSize, originalWidth: pkgSize }, scaleFrom: scaleFrom, transition: Effect.Transitions.sinoidal }),
                new Effect.Move('pkg'+id, { sync: true, x: pkgPadding+availableWidth*Math.random(), y: pkgPadding+.2*id, mode: 'absolute', transition: Effect.Transitions.sinoidal })
            ], {
                duration: 1,
                fps: frameRate
            });
        }
        centerPkgImage(id);
    }
}

function randomizePackage(id, availableWidth, availableHeight) {
    var pkgSize = document.getElementById('badgeTail').offsetHeight;

    var offsetLeft = pkgPadding+availableWidth*Math.random();
    var offsetTop = pkgPadding+availableHeight*Math.random();
    
    var currentPackageWidth = document.getElementById('pkg'+id).offsetWidth;
    
    if (currentPackageWidth == pkgSize) {
        new Effect.Move('pkg'+id, { x: offsetLeft, y: offsetTop, mode: 'absolute', transition: Effect.Transitions.sinoidal, duration: 1, fps: frameRate });
    }
    else {
        var scaleFrom = (currentPackageWidth/pkgSize)*100;
        new Effect.Parallel([
            new Effect.Scale('pkg'+id, 100, { sync: true, scaleContent: false, scaleMode: { originalHeight: pkgSize, originalWidth: pkgSize }, scaleFrom: scaleFrom, transition: Effect.Transitions.sinoidal }),
            new Effect.Move('pkg'+id, { x: offsetLeft, y: offsetTop, mode: 'absolute', transition: Effect.Transitions.sinoidal })
        ], {
            duration: 1,
            fps: frameRate
        });        
    }
    centerPkgImage(id);
}

function randomizePackages() {
    var pkgSize = document.getElementById('badgeTail').offsetHeight;
    
    var availableWidth = getCanvasSize('w')-2*pkgSize-3*pkgPadding;
    var availableHeight = getCanvasSize('h')-3*pkgPadding-pkgSize;
    
    for( var i = 0; i < packages.length; i++ ) {
    
        if (document.getElementById('pkg'+i)!=null) {

            var offsetLeft = pkgPadding+availableWidth*Math.random();
            var offsetTop = pkgPadding+availableHeight*Math.random();
            
            var currentPackageWidth = document.getElementById('pkg'+i).offsetWidth;
            
            if (currentPackageWidth == pkgSize) {
                new Effect.Move('pkg'+i, { x: offsetLeft, y: offsetTop, mode: 'absolute', transition: Effect.Transitions.sinoidal, duration: 1, fps: frameRate });
            }
            else {
                var scaleFrom = (currentPackageWidth/pkgSize)*100;
                new Effect.Parallel([
                    new Effect.Scale('pkg'+i, 100, { sync: true, scaleContent: false, scaleMode: { originalHeight: pkgSize, originalWidth: pkgSize }, scaleFrom: scaleFrom, transition: Effect.Transitions.sinoidal }),
                    new Effect.Move('pkg'+i, { x: offsetLeft, y: offsetTop, mode: 'absolute', transition: Effect.Transitions.sinoidal })
                ], {
                    duration: 1,
                    fps: frameRate
                });        
            }
        }
    }
}


function centerPackages(pkgs) {

    var pkgSize = document.getElementById('badgeTail').offsetHeight;
    var defaultSize = pkgSize;
    
    var canvasCenterWidth = getCanvasSize('w')/2;
    var canvasCenterHeight = getCanvasSize('h')/2;
    
    var offsetLeft = pkgPadding; /* 2*pkgPadding+pkgSize */
    var offsetRight = 2*pkgPadding+pkgSize;
    var offsetTop = 2*pkgPadding+pkgSize; 
    var offsetBottom = 2*pkgPadding;
    
    var availableWidth = getCanvasSize('w')-offsetLeft-offsetRight;
    var availableHeight = getCanvasSize('h')-offsetTop-offsetBottom;
        
    var noGood = true;
    while (noGood==true) {

        var maxNumberColumns = parseInt((availableWidth+pkgSpacing)/(pkgSize+pkgSpacing));
        var maxNumberRows = parseInt((availableHeight+pkgSpacing)/(pkgSize+pkgSpacing));
        
        var availableSpots = maxNumberColumns*maxNumberRows;
        var reqPackages = pkgs.length;
        
        var reqNumberColumns = maxNumberColumns;
        if(reqPackages < maxNumberColumns && reqPackages != 0) {
            reqNumberColumns = reqPackages;
        }
        else if((maxNumberColumns-2)*maxNumberRows >= reqPackages) {
            reqNumberColumns = maxNumberColumns - 2;
        }
        else if((maxNumberColumns-1)*maxNumberRows >= reqPackages) {
            reqNumberColumns = maxNumberColumns - 1;
        }
        
        var reqNumberRows = parseInt(reqPackages/reqNumberColumns);
        if (reqPackages/reqNumberColumns != parseInt(reqPackages/reqNumberColumns)) {
            reqNumberRows = reqNumberRows +1;
        }
        
        var reqHeight = pkgSize*reqNumberRows+pkgSpacing*(reqNumberRows-1);
        var reqWidth = pkgSize*reqNumberColumns + pkgSpacing*(reqNumberColumns-1);
        var newHeight = 1*pkgSize*(availableHeight/reqHeight);
        var newReqWidth = newHeight*reqNumberColumns + pkgSpacing*(reqNumberColumns-1);
        var newWidth = 1*pkgSize*(availableWidth/reqWidth);
        var newReqHeight = newWidth*reqNumberRows + pkgSpacing*(reqNumberRows-1);
        
        if (availableHeight > reqHeight && newReqWidth < availableWidth) {
            pkgSize = newHeight;
        }
        else if(availableHeight > reqHeight && newReqHeight < availableWidth) {
            pkgSize = newWidth;
        }
        
        if (reqNumberRows <= maxNumberRows) {
            noGood = false;
        }
        else {
            newMaxNumberColumns = maxNumberColumns + 1;
            pkgSize = parseInt(((availableWidth+pkgSpacing)/newMaxNumberColumns)-pkgSpacing);
        }
    }
    
    var requiredWidth = pkgSize*reqNumberColumns + pkgSpacing*(reqNumberColumns-1);
    var requiredHeight = pkgSize*reqNumberRows + pkgSpacing*(reqNumberRows-1);
    
    var centerLeft = (availableWidth-requiredWidth)/2;
    var centerTop = (availableHeight - requiredHeight)/2;
    if (centerTop < 0) {
        centerTop = 0;
    }
    for( var i = 0; i < pkgs.length; i++ ) {
    
        if (document.getElementById('pkg'+pkgs[i]) != null) {

            var currentRow = parseInt(((i+1)-1)/reqNumberColumns)+1;
            var currentColumn = (i+1)-((currentRow-1)*reqNumberColumns);
        
            var posX = (currentColumn-1)*(pkgSize+pkgSpacing);
            var posY = (currentRow-1)*(pkgSize+pkgSpacing);
            
            var imageObject = 'packageDisplayImage';
            if (document.getElementById('packageDisplayImage'+pkgs[i]).style.display != 'block') {
                
                imageObject = 'packageDisplayImagePreview';
                if(defaultSize < pkgSize) {
                    var imagePreview = document.getElementById(imageObject+pkgs[i]);
                    var preLoadImageCache = new Image();
                    preLoadImageCache.src = 'scripts/getImage.php?src='+packages[pkgs[i]][1]+'&h='+pkgSize;
                    imagePreview.src = preLoadImageCache.src;
                }
            }
            var imageCenterOffset = (pkgSize-(pkgSize*getPkgAspectRatio(pkgs[i])))/2;
            if (imageCenterOffset > 0) {
                imageCenterOffset = 0;
            }
            
            if(defaultSize != pkgSize) {
                
                defaultSize = document.getElementById('pkg'+pkgs[i]).offsetHeight;
                var scaleFactor = (pkgSize/defaultSize)*100;
                
                new Effect.Parallel([
                    new Effect.Move(imageObject+pkgs[i], { sync: true, x: imageCenterOffset, y: 0, mode: 'absolute', transition: Effect.Transitions.sinoidal }),
                    new Effect.Scale('pkg'+pkgs[i], scaleFactor, { sync: true, scaleContent: false, scaleMode: { originalHeight: defaultSize, originalWidth: defaultSize }, scaleFrom: 100, transition: Effect.Transitions.sinoidal }),
                    new Effect.Move('pkg'+pkgs[i], { sync: true, x: offsetLeft+centerLeft+posX, y: offsetTop+centerTop+posY, mode: 'absolute', transition: Effect.Transitions.sinoidal })
                ], {
                    duration: 1,
                    fps: frameRate
                });
            }
            else {
                new Effect.Move('pkg'+pkgs[i], { x: offsetLeft+centerLeft+posX, y: offsetTop+centerTop+posY, mode: 'absolute', transition: Effect.Transitions.sinoidal, duration: 1, fps: frameRate });
            }
        }
    }
}

function expandPackage(id) {

    jsShowPackage(id);
    var pkg = document.getElementById('pkg'+id);
    var pkgHeight = document.getElementById('pkg'+id).offsetHeight;
    var pkgSize = getPkgExpandedSize(id,'h');
    var pkgHeightwMenu = getPkgExpandedSize(id,'hm');
    var pkgAspectRatio = getPkgAspectRatio(id);
    var aspectRatioScale = 100*pkgAspectRatio;
    var badgeOffset = getBadgeOffset(id,'',false)
    if ( badgeOffset >= 0 ) {
        badgeOffset = badgeOffset-.5*pkgSpacing;
    }
    else {
        badgeOffset = 1;
    }
    
    var scaleFactor = 100*(pkgSize/pkg.offsetHeight);
    var scaleFrom = 100*(document.getElementById('packageContainer'+id).offsetHeight/pkgHeight);
    var pkgTop = (getCanvasSize('h')-(pkgHeightwMenu))/2-pkg.offsetTop;
    
    var imageFactor = 100;
    if (aspectRatioScale < 100) {
        imageFactor = aspectRatioScale;
    }
    
    var preLoadImageCache = new Image(); 
    preLoadImageCache.src = 'scripts/getImage.php?src='+packages[id][1]+'&h='+pkgSize;
    
    var imageObject = 'packageDisplayImage';
    if (document.getElementById('packageDisplayImage'+id).style.display != 'block') {
        imageObject = 'packageDisplayImagePreview';
        document.getElementById(imageObject+id).style.cursor = 'auto';
    }
    
    var imageCenterOffset = (pkgSize-(pkgSize*pkgAspectRatio))/2;
    var imageCenterTOffset = 0;
    if (imageCenterOffset > 0) {
        imageCenterOffset = 0;
        imageCenterTOffset = (pkgSize-(pkgSize/pkgAspectRatio))/2;
    }

    pkgInMotion[id] = new Effect.Parallel([
        new Effect.Scale('packageContainer'+id, scaleFactor, { sync: true, scaleContent: false, scaleMode: { originalHeight: pkgHeight, originalWidth: pkgHeight }, scaleFrom: scaleFrom, transition: Effect.Transitions.sinoidal }),
        new Effect.Move('packageContainer'+id, { sync: true, x: (getCanvasSize('w')-pkgSize*1)/2-pkg.offsetLeft, y: pkgTop, mode: 'absolute', transition: Effect.Transitions.sinoidal }),
        new Effect.Move(imageObject+id, { sync: true, x: imageCenterOffset, y: imageCenterTOffset, mode: 'absolute', transition: Effect.Transitions.sinoidal })

    ], {
        duration: 1,
        fps: frameRate
    });
    if(Prototype.Browser.IE==true) {
         pkgScale1D[id] = new Effect.Parallel([ 
            new Effect.Move(imageObject+id, { sync: true, x: 0, y: 0, mode: 'absolute', transition: Effect.Transitions.sinoidal, afterFinish: cleanUpPackageImage }),
            new Effect.Scale('packageContainer'+id, aspectRatioScale, { sync: true, scaleX: true, scaleY: false, scaleFromCenter: true, scaleContent: false, transition: Effect.Transitions.sinoidal }),
            //new Effect.Scale(imageObject+id, imageFactor, { sync: true, scaleX: true, scaleY: true, scaleFromCenter: true, scaleContent: false, transition: Effect.Transitions.sinoidal }),
            new Effect.Opacity('canvasMask', { sync: true, from: 0, to: .75, afterSetup: cleanUpEngageMask })
        ], { 
            delay: 2,
            duration: 1,
            fps: frameRate
        });   
    }
    else {
        pkgScale1D[id] = new Effect.Parallel([ 
            new Effect.Move(imageObject+id, { sync: true, x: 0, y: 0, mode: 'absolute', transition: Effect.Transitions.sinoidal, afterFinish: cleanUpPackageImage }),
            new Effect.Scale('packageContainer'+id, aspectRatioScale, { sync: true, scaleX: true, scaleY: false, scaleFromCenter: true, scaleContent: false, transition: Effect.Transitions.sinoidal }),
            //new Effect.Scale(imageObject+id, imageFactor, { sync: true, scaleX: true, scaleY: true, scaleFromCenter: true, scaleContent: false, transition: Effect.Transitions.sinoidal }),
            new Effect.Opacity('packageContainer'+id, { sync: true, to: 1, afterFinish: cleanUpOpacity }),
            new Effect.Opacity('canvasMask', { sync: true, from: 0, to: .75, afterSetup: cleanUpEngageMask })
        ], { 
            delay: 2,
            duration: 1,
            fps: frameRate
        });
    }
    if(Prototype.Browser.IE==true) {
        document.getElementById('packageDisplay'+id).onclick = '';
        document.getElementById(imageObject+id).style.cursor = 'auto';
    }
    document.getElementById('packageDisplayBorder'+id).style.pointerEvents = 'none';
    if(pkgsDraggable[id] != undefined) {
        pkgsDraggable[id].destroy();
    }
    expandedPkgList += 'pkg'+id;

    showPackageMenu(id,3);
    moveBadge(badgeOffset-1,2,'Container');
}

function collapsePackage(id) {
    var pkgContainer = document.getElementById('packageContainer'+id);
    var pkgHeight = document.getElementById('pkg'+id).offsetHeight;
    var pkgAspectRatio = getPkgAspectRatio(id);
    var aspectRatioScale = 100*(1/pkgAspectRatio);
    var collapsePackageDelay = 0;
    
    var scaleFactor = ((pkgContainer.offsetHeight-2*borderFix)/pkgHeight)*100;

    var imageObject = 'packageDisplayImage';
    if ( document.getElementById('packageDisplayImage'+id).style.display != 'block' ) {
        imageObject = 'packageDisplayImagePreview';
    }
    
    document.getElementById(imageObject+id).removeAttribute('width');
    document.getElementById(imageObject+id).style.width = '';   
    if ( expandedPanelList.indexOf('panel'+id) != -1) {
        collapsePanel(id);
        collapsePackageDelay = 1.25;
    }

    var imageCenterTOffsetPkg = 0;
    var imageCenterOffsetPkg = (pkgHeight-(pkgHeight*pkgAspectRatio))/2;
    if (imageCenterOffsetPkg > 0) {
        imageCenterTOffsetPkg = (pkgHeight-(pkgHeight/pkgAspectRatio))/2;
        imageCenterOffsetPkg = 0;
    }
    var imageCenterTOffset = 0;
    var imageCenterOffset = ((pkgContainer.offsetHeight-2*borderFix)-((pkgContainer.offsetHeight-2*borderFix)*pkgAspectRatio))/2;
    if (imageCenterOffset > 0) {
        imageCenterTOffset = ((pkgContainer.offsetHeight-2*borderFix)-((pkgContainer.offsetHeight-2*borderFix)/pkgAspectRatio))/2;
        imageCenterOffset = 0;
    }
    if (aspectRatioScale > 100) {
        document.getElementById(imageObject+id).style.width = '100%';
        document.getElementById(imageObject+id).style.height = 'auto';
    }
    
    if (pkgContainer.offsetWidth != pkgContainer.offsetHeight) {
        if(Prototype.Browser.IE==true) {
           pkgScale1D[id] = new Effect.Parallel([
                new Effect.Move(imageObject+id, { sync: true, x: imageCenterOffset, y: imageCenterTOffset, mode: 'absolute', transition: Effect.Transitions.sinoidal }),
                new Effect.Scale('packageContainer'+id, aspectRatioScale, { sync: true, scaleX: true, scaleY: false, scaleFromCenter: true, scaleContent: false, transition: Effect.Transitions.sinoidal }),
                new Effect.Opacity('canvasMask', { sync: true, from: .75, to: 0, afterFinish: cleanUpReleaseMask })
            ], {
                delay: collapsePackageDelay,
                duration: 1,
                fps: frameRate 
            });        
        }
        else {
            pkgScale1D[id] = new Effect.Parallel([ 
                new Effect.Move(imageObject+id, { sync: true, x: imageCenterOffset, y: imageCenterTOffset, mode: 'absolute', transition: Effect.Transitions.sinoidal }),
                new Effect.Scale('packageContainer'+id, aspectRatioScale, { sync: true, scaleX: true, scaleY: false, scaleFromCenter: true, scaleContent: false, transition: Effect.Transitions.sinoidal }),
                new Effect.Opacity('packageContainer'+id, { sync: true, to: 1 }),
                new Effect.Opacity('canvasMask', { sync: true, from: .75, to: 0, afterFinish: cleanUpReleaseMask })
            ], {
                delay: collapsePackageDelay,
                duration: 1,
                fps: frameRate 
            });
        }
     }
    pkgInMotion[id] = new Effect.Parallel([
        new Effect.Move(imageObject+id, { sync: true, x: imageCenterOffsetPkg, y: imageCenterTOffsetPkg, mode: 'absolute', transition: Effect.Transitions.sinoidal }),
        new Effect.Move('packageContainer'+id, { sync: true, x: 0, y: 0, mode: 'absolute', transition: Effect.Transitions.sinoidal }), 
        new Effect.Scale('packageContainer'+id, 100, { sync: true, scaleContent: false, scaleMode: { originalHeight: pkgHeight, originalWidth: pkgHeight }, scaleFrom: scaleFactor, transition: Effect.Transitions.sinoidal, afterFinish: cleanUpPkgContainerDim })
    ], {
        duration: 1.25,
        delay: 1+collapsePackageDelay,
        fps: frameRate
    });
    
    if(Prototype.Browser.IE==true) {
        document.getElementById('packageDisplay'+id).onclick = jsTriggerPackage;
        document.getElementById(imageObject+id).style.cursor = 'pointer';
    }
    document.getElementById('packageDisplayBorder'+id).style.pointerEvents = 'auto';
    if (pkgsContentDraggable[id] != undefined) { pkgsContentDraggable[id].destroy() };
    pkgsDraggable[id] = new Draggable('pkg'+id);
    expandedPkgList = expandedPkgList.replace('pkg'+id,'');

    hidePackageMenu(id,0);
    moveBadge(0,1,'Container');
}

function expandPanel(id) {
    document.getElementById('panel'+id).style.display = 'block';
    document.getElementById('panel'+id).style.left = getPkgExpandedSize(id, 'w') - document.getElementById('panel'+id).offsetWidth;

    var packageShift = getBadgeOffset(id,'remainder',true);
    if ( packageShift > -1 ) {
        packageShift = -1;
    }

    var packageMenuWidth = document.getElementById('packageMenu'+id).offsetWidth;
    var pkgPanelWidth = document.getElementById('panel'+id).offsetWidth;
    var pkgExpandedSize = getPkgExpandedSize(id,'w');

    var menuScaleFactor = 100*(packageMenuWidth+pkgPanelWidth+.5*pkgSpacing-2*borderFix)/packageMenuWidth;
    var menuInfoLeft = (packageMenuWidth-document.getElementById('packageMenuInfo'+id).offsetWidth)-borderFix+pkgPanelWidth+.5*pkgSpacing-1*borderFix;

    populatePanel(id);      
    moveBadge(getBadgeOffset(id,'',true)-document.getElementById('badgeContainer').offsetLeft);

    new Effect.Parallel([
        new Effect.Move('packageDisplay'+id, { sync: true, x: packageShift, y: -1, mode: 'absolute', transition: Effect.Transitions.sinoidal }),
        new Effect.Move('panel'+id, { sync: true, x: pkgExpandedSize+packageShift+.5*pkgSpacing+borderFix*2, y: -1, mode: 'absolute', transition: Effect.Transitions.sinoidal }),
        new Effect.Move('packageMenu'+id, { sync: true, x: packageShift, y: document.getElementById('packageMenu'+id).offsetTop, mode: 'absolute', transition: Effect.Transitions.sinoidal, afterFinish: cleanUpPackageInfo }),
        new Effect.Scale('packageMenu'+id, menuScaleFactor, { sync: true, scaleX: true, scaleY: false, scaleFromCenter: false, scaleContent: false, transition: Effect.Transitions.sinoidal }),
        new Effect.Move('packageMenuInfo'+id, { sync: true, x: menuInfoLeft, y: 0, mode: 'absolute', transition: Effect.Transitions.sinoidal, afterFinish: showPackageMenuTitle })
    ], {
        duration: 1.1,
        delay: 0,
        fps: frameRate
    });
    
    expandedPanelList += 'panel'+id;
}

function collapsePanel(id) {
    var pkgMenu = document.getElementById('packageMenu'+id);
    var pkgExpandedSize = getPkgExpandedSize(id,'w');

    var menuScaleFactor = 100*((pkgExpandedSize) / pkgMenu.offsetWidth);
    var menuInfoLeft = (pkgExpandedSize-document.getElementById('packageMenuInfo'+id).offsetWidth);

    new Effect.Parallel([
        new Effect.Move('packageDisplay'+id, { sync: true, x: -1, y: -1, mode: 'absolute', transition: Effect.Transitions.linear }),
        new Effect.Move('panel'+id, { sync: true, x: pkgExpandedSize-document.getElementById('panel'+id).offsetWidth, y: -1, mode: 'absolute', transition: Effect.Transitions.linear, afterFinish: cleanUpDisplayNone }),
        new Effect.Move('packageMenu'+id, { sync: true, x: -1, y: pkgMenu.offsetTop, mode: 'absolute', transition: Effect.Transitions.sinoidal }),
        new Effect.Scale('packageMenu'+id, menuScaleFactor, { sync: true, scaleX: true, scaleY: false, scaleFromCenter: false, scaleContent: false, transition: Effect.Transitions.linear, afterFinish: cleanUpMenuWidth }),
        new Effect.Move('packageMenuInfo'+id, { sync: true, x: menuInfoLeft, y: 0, mode: 'absolute', transition: Effect.Transitions.linear, afterFinish: hidePackageMenuTitle })
    ], {
        duration: 1,
        delay: 0,
        fps: frameRate
    });
    
    moveBadge('-1',1);
    document.getElementById('packageMenuInfo'+id).childNodes[0].nodeValue='';
    expandedPanelList = expandedPanelList.replace('panel'+id, '');
}

function expandBadge() {
    var badge = document.getElementById('badge');
    var badgeHeight = badge.offsetHeight;
    var scaleFactorX = 2.2;
    var scaleFactorY = 1.85;
    var newTop = -1;
    var newLeft = -1*(scaleFactorX-1)*badgeHeight;
    
    pkgZIndex = pkgZIndex + 1;
    badge.style.zIndex = pkgZIndex;
    
    new Effect.Parallel([
        new Effect.Move('badgeDisplay', { sync: true, x: newLeft, y: newTop, mode: 'absolute', transition: Effect.Transitions.sinoidal }), 
        new Effect.Scale('badgeDisplay', 100*scaleFactorX, { sync: true, scaleX: true, scaleY: false, scaleContent: false, scaleMode: { originalHeight: badgeHeight, originalWidth: badgeHeight }, scaleFrom: 100, transition: Effect.Transitions.sinoidal }),
        new Effect.Scale('badgeDisplay', 100*scaleFactorY, { sync: true, scaleX: false, scaleY: true, scaleContent: false, scaleMode: { originalHeight: badgeHeight, originalWidth: badgeHeight }, scaleFrom: 100, transition: Effect.Transitions.sinoidal })
    ], {
        duration: 1,
        fps: frameRate
    });
}

function collapseBadge() {
    var badgeHeight = document.getElementById('badge').offsetHeight;
    var expandedSizeX = 100*(document.getElementById('badgeDisplay').offsetWidth/badgeHeight);
    var expandedSizeY = 100*(document.getElementById('badgeDisplay').offsetHeight/badgeHeight);
    new Effect.Parallel([
        new Effect.Move('badgeDisplay', { sync: true, x: -1, y: -1, mode: 'absolute', transition: Effect.Transitions.sinoidal }), 
        new Effect.Scale('badgeDisplay', 100, { sync: true, scaleX: true, scaleY: false, scaleContent: false, scaleMode: { originalHeight: badgeHeight, originalWidth: badgeHeight }, scaleFrom: expandedSizeX, transition: Effect.Transitions.sinoidal }),
        new Effect.Scale('badgeDisplay', 100, { sync: true, scaleX: false, scaleY: true, scaleContent: false, scaleMode: { originalHeight: badgeHeight, originalWidth: badgeHeight }, scaleFrom: expandedSizeY, transition: Effect.Transitions.sinoidal })
    ], {
        duration: 1,
        fps: frameRate
    });
}
    
function moveBadge(badgeOffset, wait, depth) {
    var delay = wait;
    if (delay == null) {
        delay = 0;
    }
    var badge = 'badgeDisplay';
    var badgeTail = 'badgeTailDisplay';
    var search = 'searchDisplay';
    var yOffset = -1*borderFix;

    if (depth == 'Container') {
        badge = 'badgeContainer';
        badgeTail = 'badgeTailContainer';
        search = 'searchContainer';
        yOffset = 0;
    }

    new Effect.Parallel([ 
        new Effect.Move(badge, { sync: true, x: badgeOffset, y: yOffset, mode: 'absolute', transition: Effect.Transitions.sinoidal }),
        new Effect.Move(badgeTail, { sync: true, x: badgeOffset, y: yOffset, mode: 'absolute', transition: Effect.Transitions.sinoidal }),
        new Effect.Move(search, { sync: true, x: badgeOffset, y: yOffset, mode: 'absolute', transition: Effect.Transitions.sinoidal })
    ], { 
        delay: delay,
        fps: frameRate
    });
}

function fitContainerToContent(pkgContainerId, scaleFactor) {

    var id = pkgContainerId.replace('packageContainer','');
    var packageContainer = document.getElementById(pkgContainerId);
    var packageMenu = document.getElementById(pkgContainerId.replace('packageContainer','packageMenu'));
    var packagePanel = document.getElementById(pkgContainerId.replace('packageContainer','panel'));
    
    packagesIndex[id][6] = scaleFactor;

    var pkgHeight = packageContainer.offsetHeight;
    var panelLeft = scaleFactor*pkgHeight+.5*pkgSpacing+1*borderFix;
    var packageMenuNewWidth = panelLeft+packagePanel.offsetWidth-2*borderFix;
    var menuScaleFactor = 100*(packageMenuNewWidth/packageMenu.offsetWidth);
    var menuInfoLeft = (packageMenuNewWidth-document.getElementById('packageMenuInfo'+id).offsetWidth);
    
    var packageShift = document.getElementById('packageDisplay'+id).offsetLeft;
    
    var pkgContainerLeft = (getCanvasSize('w')-getPkgExpandedSize(id,'w'))/2-document.getElementById('pkg'+id).offsetLeft;
    
    var scaleFrom = 100*(packageContainer.offsetWidth/packageContainer.offsetHeight);
    
    new Effect.Parallel([ 

        new Effect.Move('packageContainer'+id, { sync: true, x: pkgContainerLeft, y: packageContainer.offsetTop, mode: 'absolute', transition: Effect.Transitions.sinoidal }), 
        new Effect.Move('panel'+id, { sync: true, x: panelLeft+packageShift, y: -1, mode: 'absolute', transition: Effect.Transitions.sinoidal }),
        new Effect.Scale('packageMenu'+id, menuScaleFactor, { sync: true, scaleX: true, scaleY: false, scaleFromCenter: false, scaleContent: false, transition: Effect.Transitions.sinoidal }),
        new Effect.Move('packageMenuInfo'+id, { sync: true, x: menuInfoLeft, y: 0, mode: 'absolute', transition: Effect.Transitions.sinoidal, afterFinish: showPackageMenuTitle }),
        new Effect.Scale(pkgContainerId, scaleFactor*100, { sync: true, scaleX: true, scaleY: false, scaleMode: { originalHeight: pkgHeight, originalWidth: pkgHeight }, scaleFrom: scaleFrom, scaleContent: false, transition: Effect.Transitions.sinoidal })
    ], {
        fps: frameRate
    });
    
    moveBadge(getBadgeOffset(id,'',true)-document.getElementById('badgeContainer').offsetLeft);
}

function makeDraggable(pkgImage) {
    var pkgImageId = pkgImage.id;
    pkgsContentDraggable[pkgImageId.replace('packageDisplayImage','')] = new Draggable(pkgImage, {starteffect: cleanUpDraggableNoFade(pkgImage), endeffect: cleanUpDraggableNoFade(pkgImage), constraint: 'horizontal', 
        snap: function(x, y, draggable) { 
            function constrain(n, lower, upper) {
                if (n > upper) return upper;
                else if (n < lower) return lower;
                else return n-(n%10);
            }
        var thisWidth = draggable.element.offsetWidth;
        var thisHeight = draggable.element.offsetHeight;
        var parentWidth = draggable.element.parentNode.offsetWidth;
        var parentHeight = draggable.element.parentNode.offsetHeight;
        return [
            constrain(x, parentWidth-thisWidth-1,0),
            0];
 
        }
    });
}
    
function showPackageMenu(id, delay) {
    if (expandedPkgList.indexOf('pkg'+id) != -1) {
    
        var packageMenu = document.getElementById('packageMenu'+id);
        packageMenu.style.display = 'block';
        packageMenu.style.top = getPkgExpandedSize(id,'h')+1*borderFix+.5*pkgSpacing+'px';        

        populatePackageMenu(id, delay);
        
        if (pkgMenuFade != undefined) {
            pkgMenuFade.cancel();
        }
        pkgMenuFade = new Effect.Opacity('packageMenu'+id, { from: 0.0, to: 1.0, duration: 1, delay: delay, afterSetup: locatePackageMenuItems });
    }
}

function hidePackageMenu(id, delay) {
    if (pkgMenuFade != undefined) {
            pkgMenuFade.cancel();
    }
    var fadeFrom = 1;
    if (document.getElementById('packageContainer'+id).offsetWidth == document.getElementById('packageContainer'+id).offsetHeight) {
        fadeFrom = 0;
    }
    pkgMenuFade = new Effect.Opacity('packageMenu'+id, { from: fadeFrom, to: 0.0, duration: 1, afterFinish: cleanUpHidePackageMenu });
}
    
function showPackageMenuTitle(element) {
    var id = element;
    if ( typeof(id) == 'object' ) {
        var packageMenuInfoId = element.element.id;
        id = packageMenuInfoId.replace('packageMenuInfo','');
    }
    
    var packageMenu = document.getElementById('packageMenu'+id);
    var packageMenuTitle = document.getElementById('packageMenuTitle'+id);
    var packageMenuTitleWidthRequired = packageMenuTitle.offsetWidth;

    var packageMenuItems = document.getElementById('packageMenuItems'+id);
    
    if (packageMenuItems != null) {
    
        var packageMenuTitleLeft = document.getElementById('packageMenuItems'+id).offsetLeft + document.getElementById('packageMenuItems'+id).offsetWidth;
        var packageMenuTitleWidth = document.getElementById('packageMenuInfo'+id).offsetLeft - packageMenuTitleLeft;
    
        var packageMenuItemsWidth = packageMenuItems.offsetWidth;
        if (packageMenuTitleWidth < packageMenuTitleWidthRequired) {
            var shift = packageMenuTitleWidthRequired - packageMenuTitleWidth;

            packageMenuItemsWidth = packageMenuItemsWidth-shift;
            packageMenuTitleWidth = packageMenuTitleWidthRequired;
            packageMenuTitleLeft = packageMenuTitleLeft-shift;
        }
        var packageMenuItemsScaleFactor = 100*packageMenuItemsWidth/packageMenuItems.offsetWidth;
        var packageMenuItemsTopOffset = (packageMenuItemsScaleFactor/100)*packageMenuItems.offsetTop;  
        var packageMenuItemList = document.getElementById(packageMenuItems.id).childNodes;
        var packageMenuItemWidth = parseInt((1/packageMenuItemList.length)*packageMenuItemsWidth);
        var packageMenuItemHeight = parseInt(packageMenuItemWidth*(1/getPkgAspectRatio(id)));
        var packageMenuItemHeightDifference = packageMenuItemHeight-((packageMenu.offsetHeight-2*borderFix)+-1*packageMenuItemsTopOffset);
        if (packageMenuItemHeightDifference < 0) {
            packageMenuItemsTopOffset = packageMenuItemsTopOffset-packageMenuItemHeightDifference;
        }
        if (packageMenuItemsTopOffset > 0) {
            packageMenuItemsTopOffset = 0;        
        }
        packageMenuTitle.style.width = packageMenuTitleWidth+'px';
        
        if (enableAnimations) {
            new Effect.Scale(packageMenuItems.id, packageMenuItemsScaleFactor, { scaleX: true, scaleY: false, scaleFromCenter: false, scaleContent: false, transition: Effect.Transitions.sinoidal });
            new Effect.Move(packageMenuItems.id, { x: packageMenuItems.offsetLeft, y: packageMenuItemsTopOffset, mode: 'absolute', transition: Effect.Transitions.sinoidal }); 
        }
        else {
            packageMenuItems.style.width = packageMenuItemsWidth+'px';
            packageMenuItems.style.top = packageMenuItemTopOffset+'px';
        }        
    }
    else {
        var packageMenuTitleLeft = document.getElementById('packageMenuInfo'+id).offsetLeft - packageMenuTitle.offsetWidth;
    }
    
    if (enableAnimations) {
        new Effect.Move(packageMenuTitle.id, { x: packageMenuTitleLeft, y: 0, mode: 'absolute', transition: Effect.Transitions.sinoidal });
    }
    else {
        packageMenuTitle.style.left = packageMenuTitleLeft+'px';
    }
}

function hidePackageMenuTitle(element) {
    var id = element;
    if ( typeof(id) == 'object' ) {
        var packageMenuInfoId = element.element.id;
        id = packageMenuInfoId.replace('packageMenuInfo','');
    }

    var packageMenu = document.getElementById('packageMenu'+id);
    var packageMenuWidth = document.getElementById('packageMenu'+id).offsetWidth;
    var packageMenuTitle = document.getElementById('packageMenuTitle'+id);
    var packageMenuItems = document.getElementById('packageMenuItems'+id);
    var packageMenuTitleLeft = packageMenuWidth;
    
    if (packageMenuItems != null) {

        var packageMenuItemsWidth = packageMenuWidth-document.getElementById('packageMenuClose'+id).offsetWidth-document.getElementById('packageMenuInfo'+id).offsetWidth;
        var packageMenuItemsScaleFactor = 100*packageMenuItemsWidth/packageMenuItems.offsetWidth;
        var packageMenuItemTopOffset = packageMenuItems.offsetTop;
        if ( document.getElementById('packageMenu'+id+'ItemImage0') != null ) {
            packageMenuItemTopOffset = parseInt(-.5*((document.getElementById('packageMenu'+id+'ItemImage0').offsetHeight*(parseInt(packageMenuItemsScaleFactor)/100))-(packageMenu.offsetHeight-2*borderFix)));
        }
        
        if (enableAnimations) {
            new Effect.Scale(packageMenuItems.id, packageMenuItemsScaleFactor, { scaleX: true, scaleY: false, scaleFromCenter: false, scaleContent: false, transition: Effect.Transitions.sinoidal });
            new Effect.Move(packageMenuItems.id, { x: packageMenuItems.offsetLeft, y: packageMenuItemTopOffset, mode: 'absolute', transition: Effect.Transitions.sinoidal }); 
        }
        else {
            packageMenuItems.style.width = packageMenuItemsWidth+'px';
            packageMenuItems.style.top = packageMenuItemTopOffset+'px';
        }
    }
    if (packageMenuItems != null && packageMenuItems.hasChildNodes()) {
        new Effect.Move(packageMenuTitle.id, { x: packageMenuTitleLeft, y: 0, mode: 'absolute', transition: Effect.Transitions.sinoidal });
    }
    else {
        showPackageMenuTitle(id);
    }
}

function dropCanvas() {
    var canvasBottom = getCanvasSize('h');

    new Effect.Move('canvasBackground', { x: 0, y: canvasBottom, mode: 'absolute', transition: Effect.Transitions.sinoidal, fps: frameRate });
    new Effect.Move('badge', { x: document.getElementById('badge').offsetLeft, y: canvasBottom, mode: 'absolute', transition: Effect.Transitions.sinoidal, fps: frameRate });
    new Effect.Move('badgeTail', { x: document.getElementById('badgeTail').offsetLeft, y: canvasBottom, mode: 'absolute', transition: Effect.Transitions.sinoidal, fps: frameRate });
    new Effect.Move('search', { x: document.getElementById('search').offsetLeft, y: canvasBottom+document.getElementById('searchDisplayOutput').offsetHeight, mode: 'absolute', transition: Effect.Transitions.sinoidal, fps: frameRate });
}

function repairCanvas() {
    var canvasBottom = getCanvasSize('h');
    var searchTop = getCanvasSize('h')-document.getElementById('searchDisplayInput').offsetHeight-pkgPadding+2*borderFix;
    
    new Effect.Move('canvasBackground', { x: 0, y: 0, mode: 'absolute', transition: Effect.Transitions.sinoidal, fps: frameRate, afterFinish: cleanUpRepairCanvas });
    new Effect.Move('badge', { x: document.getElementById('badge').offsetLeft, y: pkgPadding, mode: 'absolute', transition: Effect.Transitions.sinoidal, fps: frameRate });
    new Effect.Move('badgeTail', { x: document.getElementById('badgeTail').offsetLeft, y: pkgPadding, mode: 'absolute', transition: Effect.Transitions.sinoidal, fps: frameRate });
    new Effect.Move('search', { x: document.getElementById('search').offsetLeft, y: searchTop, mode: 'absolute', transition: Effect.Transitions.sinoidal, fps: frameRate });
}

function dropPackage(id) {
  
    var wipeDelay = Math.random();
    new Effect.Move(document.getElementById(packages[id][0]), { x: 0, y: getCanvasSize('h'), mode: 'relative', transition: Effect.Transitions.sinoidal, delay: wipeDelay, fps: frameRate, afterFinish: destroyPackage });
}

function dropPackages() {
    var canvasBottom = getCanvasSize('h');
       
    for( var i = 0; i < packages.length; i++ ) {
        if (document.getElementById('pkg'+i)!=null) {

            wipeDelay = .5 + (i/25);
            new Effect.Move(document.getElementById(packages[i][0]), { x: 0, y: canvasBottom, mode: 'relative', transition: Effect.Transitions.sinoidal, delay: wipeDelay, fps: frameRate });
        }
    }
}

/* HTML CALLS */

function jsRepairCanvas(expand) {
    repairCanvas();
    
    if (expand !== "") {
        expandPkgQue = 'pkg'+expand;
    }
}

function jsInitializeCanvas() {
    TextResizeDetector.TARGET_ELEMENT_ID = 'menu';
    TextResizeDetector.USER_INIT_FUNC = text_resize_init;

    jsHideMenu('initial');

    locateBadge();
    locateSearch();
    locateNotice();

    getPackages();
    setTimeout ('createPackage(\'initialize\')',2500);
    setTimeout ('locatePackages(\'initialize\')',2500);
    var userAgent = navigator.userAgent;
    if (Prototype.Browser.Gecko && userAgent.indexOf('Windows') == -1 ) {
        var brokenElements=document.getElementsByClassName('title');
        for (i=0; i<brokenElements.length; i++) {
            brokenElements[i].className = 'titleGecko';
        }    
    }
    else if (Prototype.Browser.Gecko && userAgent.indexOf('Windows') != -1 ) {
        var brokenElements=document.getElementsByClassName('title');
        for (i=0; i<brokenElements.length; i++) {
            brokenElements[i].className = 'titleGeckoWin';
        }    
    }
    else if ((Prototype.Browser.IE && getIEVersion() != 7) || (Prototype.Browser.WebKit && userAgent.indexOf('Linux') != -1 )) {
        var brokenElements=document.getElementsByClassName('title');
        for (i=0; i<brokenElements.length; i++) {
            brokenElements[i].className = 'titleNotWebkit';
        }
    }
    else if (Prototype.Browser.IE && getIEVersion() == 7) {
        var brokenElements=document.getElementsByClassName('title');
        for (i=0; i<brokenElements.length; i++) {
            brokenElements[i].className = 'titleIE7';
        }
    }
    
    document.getElementById('txtEa').appendChild(document.createTextNode('\u0069\u0040\u0064\u0061\u006e\u0079\u006f\u0064\u0065\u0072\u002e\u0063\u006f\u006d'));
    document.getElementById('txtEb').appendChild(document.createTextNode('\u0069\u0020\u0061\u0074\u0020\u0064\u0061\u006e\u0079\u006f\u0064\u0065\u0072\u002e\u0063\u006f\u006d'));
}

function adjustCanvas() {

    if (document.getElementById('canvasBackground').offsetTop == 0) {
        locateBadge();
        locateSearch();
        locateNotice();
        /* locatePackages(); */
        randomizePackages();
        jsSearchItemSelect();
        /* var elements = document.getElementsByClassName('searchDisplayOutputEntry');
        elements[0].className = 'searchDisplayOutputEntrySelected'; */
    }
}

function jsStoreMousePosition(event) {
    pastMousePosition[0] = getMousePosition(event,'x');
    pastMousePosition[1] = getMousePosition(event,'y');
}

function jsShowPackage(id) {
    if (expandedPkgList == "") {
        if (typeof(id) == 'string' || typeof(id) == 'number') {
            var pkgContainer = document.getElementById('packageContainer'+id);
            var pkg = document.getElementById('pkg'+id);
        }
        else {
            var pkgContainer = this;
            var pkgContainerId = this.id;
            var pkg = document.getElementById(pkgContainerId.replace('packageContainer','pkg'));
        }
        pkgZIndex = pkgZIndex + 1;
        pkgContainer.style.zIndex = pkgZIndex;
        pkg.style.zIndex = pkgZIndex;
    }
}


function jsTriggerAbout() {
    if (document.getElementById('badge').offsetWidth == document.getElementById('badgeDisplay').offsetWidth) {
        expandBadge();
    }
    else {
        collapseBadge();        
    }
}

function jsCollapseExpandedPackages() {
    if (expandedPkgList.length > 0) {
        collapsePackage(expandedPkgList.replace('pkg',''));
    }
}

function jsTriggerPackage(event) {

    var triggerid = this.id;
    var id = triggerid.replace('packageDisplay','');
    id = id.replace('packageMenuClose','');
    
    if ( pastMousePosition[0] - getMousePosition(event,'x') == 0 && dblClickCheck == 0 && expandedPkgList.indexOf('pkg'+id) == -1 && expandedPkgList == "") {
        if (pkgScale1D[id] != undefined) {
            pkgScale1D[id].cancel();
        }
        if (pkgInMotion[id] != undefined) {
            pkgInMotion[id].cancel();
        }
        expandPackage(id);
        dblClickCheck = 1;
        setTimeout('dblClickCheck = 0','500');
    }
    else if ( pastMousePosition[0] - getMousePosition(event,'x') == 0 && dblClickCheck == 0 && expandedPkgList.indexOf('pkg'+id) != -1) {
        if (pkgScale1D[id] != undefined) {
            pkgScale1D[id].cancel();
        }
        if (pkgInMotion[id] != undefined) {
            pkgInMotion[id].cancel();
        }
        collapsePackage(id);
        dblClickCheck = 1;
        setTimeout('dblClickCheck = 0','500');
    }
}

function jsTriggerPanel(event) {
    var triggerid = this.id;
    var id = triggerid.replace('packageMenuInfo','');
    
    if ( expandedPanelList.indexOf('panel'+id) == -1 && mouseOutCheck == 0) {
        expandPanel(id);
        mouseOutCheck = 1;
        setTimeout ("mouseOutCheck = 0",'1500');
    }
    else if ( expandedPanelList.indexOf('panel'+id) != -1 && mouseOutCheck == 0) {
        collapsePanel(id);   
        mouseOutCheck = 1;
        setTimeout ("mouseOutCheck = 0",'1500');
    }
}

function jsTriggerTitle(event) {

    var triggerid = this.id;
    var id = triggerid.replace('packageMenuInfo','');

    if ( document.getElementById('packageMenu'+id).offsetWidth <= document.getElementById('packageMenuTitle'+id).offsetLeft+1 ) {
        showPackageMenuTitle(id);        
    }
    else {
        hidePackageMenuTitle(id);
    }
}

function jsCycleDisplay(imageId, imageSrc, type, aspectRatio, caption, location, author, year, copyright) {
    var currentObject = document.getElementById(imageId);
    var parent = currentObject.parentNode;
    var id = imageId.replace('packageDisplayImage','');
    
    
    if (aspectRatio==null) {
        aspectRatio = defaultPkgAspectRatio;
    }
    var currentAspectRatio = packagesIndex[id][6];
    
    switch (type) {
        case 'text/html':

                var newObject = document.createElement('object');
                newObject.setAttribute('id',currentObject.id);
                newObject.className = 'packageDisplayWindow';
                newObject.setAttribute('type','text/html');
                newObject.setAttribute('data',imageSrc);
                newObject.style.width = parent.offsetWidth+'px';
                if (pkgsContentDraggable[id] != undefined) { pkgsContentDraggable[id].destroy() };
                parent.removeChild(currentObject);
                parent.appendChild(newObject);
                document.getElementById(imageId.replace('Image','ImagePreview')).style.display = 'none';

            break;
        default:
            
                var newObject = document.createElement('img');
                newObject.setAttribute('id',currentObject.id);
                newObject.className = 'packageDisplayImage';
                newObject.style.display = 'block';
                newObject.src = 'scripts/getImage.php?src='+imageSrc+'&h='+getPkgExpandedSize(id,'h');;
                                
                if (pkgsContentDraggable[id] != undefined) { pkgsContentDraggable[id].destroy() };
                parent.removeChild(currentObject);
                parent.appendChild(newObject);
                document.getElementById(imageId.replace('Image','ImagePreview')).style.display = 'block';
                makeDraggable(newObject);
                
                var pkgContainerId = imageId.replace('packageDisplayImage','packageContainer');
                
                if(currentAspectRatio != aspectRatio) {
                    fitContainerToContent(pkgContainerId,aspectRatio);
                }
                var packageMenuCaption = document.getElementById('packageMenuCaption'+id);
                if (packageMenuCaption != null) {
                    packageMenuCaption.childNodes[0].nodeValue = 'caption: ';
                    if (caption != undefined || location != undefined) {
                        if (caption != undefined) {
                            packageMenuCaption.childNodes[1].childNodes[0].nodeValue = caption;
                        }
                        else {
                            packageMenuCaption.childNodes[1].childNodes[0].nodeValue = '';
                        }
                        if (location != undefined) {
                            var locationStart = ', ';
                            console.log(caption);
                            if (caption == '(an empty string)' || caption == '') {
                                locationStart = '';
                            }
                            packageMenuCaption.childNodes[2].nodeValue = locationStart+location+', ';
                        }
                        else {
                            packageMenuCaption.childNodes[2].nodeValue = '';
                        }
                    }
                    else {
                        packageMenuCaption.childNodes[0].nodeValue = '';
                        packageMenuCaption.childNodes[1].childNodes[0].nodeValue = '';
                        packageMenuCaption.childNodes[2].nodeValue = '';
                    }
                    if (copyright == 'arr') {
                        packageMenuCaption.childNodes[3].nodeValue = '© '+year+' '+author;
                    }
                    else {
                        packageMenuCaption.childNodes[3].nodeValue = '';
                    }
                }
                
                packages[id][1] = imageSrc;
    }
}

function jsShowSearchResults() {
/*    document.getElementById('searchDisplayOutput').style.height = 'auto';
    locateSearch(); */
    document.getElementById('searchDisplayInput').value = 'dynamic search unavailable';
    document.getElementById('searchDisplayInput').style.cursor = 'default';
}

function jsHideSearchResults() {
/*    setTimeout('document.getElementById(\'searchDisplayOutput\').style.height = \'2.4em\'',500);
    setTimeout('locateSearch()',500); */
    setTimeout('document.getElementById(\'searchDisplayInput\').value = \'find...\'',500);
    document.getElementById('searchDisplayInput').style.cursor = 'pointer';
}

function jsHighlight(element) {
    element.style.color = '#000000';
    element.style.backgroundColor = '#dddddd';
}
function jsUnlight(element) {
    element.style.color = '#000000';
    element.style.backgroundColor = '#ffffff';
}

function jsShowMenu() {
    if (menuFade != undefined) {
        menuFade.cancel();
    }
    menuFade = new Effect.Morph('menu', { style: 'color: #333333;', duration: 0.5 });
    new Effect.Morph('menuHref1', { style: 'color: #555555;', duration: 0.5 });
    new Effect.Morph('menuHref2', { style: 'color: #555555;', duration: 0.5 });
}

function jsHideMenu(state) {
    if (menuFade != undefined) {
        menuFade.cancel();
    }
    switch (state) {
        case 'initial': menuFade = new Effect.Opacity('menu', { to: 1, duration: 2, afterFinish: cleanUpOpacity });
                        break;
        default:        menuFade = new Effect.Morph('menu', { style: 'color: #222222;', duration: 0.5 });
                        new Effect.Morph('menuHref1', { style: 'color: #222222;', duration: 0.5 });
                        new Effect.Morph('menuHref2', { style: 'color: #222222;', duration: 0.5 });
    }
}

function jsEmail() {
    window.location.href='\u006d\u0061\u0069\u006c\u0074\u006f\u003a\u0069\u0040\u0064\u0061\u006e\u0079\u006f\u0064\u0065\u0072\u002e\u0063\u006f\u006d';
}

function jsWipeCanvas() {
    dropPackages();
    dropCanvas();
}

function jsPushBackMask() {
    document.getElementById('canvasMask').style.zIndex = pkgZIndex - 1;
}

function jsPreviewClose() {
    switch(this.childNodes[0].nodeValue) {
        case 'x':
            this.childNodes[0].nodeValue='exit';
            this.style.color='#111111';
            break;
        default:
            this.childNodes[0].nodeValue = 'x';
            this.style.color='#333333';
    }
}

function jsPreviewInfo() {
    switch(this.childNodes[0].nodeValue) {
        case 'i':
            this.childNodes[0].nodeValue='>';
            this.style.color='#111111';
            break;
        case '<':

            this.style.color='#111111';
            break;            
        default:
            this.childNodes[0].nodeValue = 'i';
            this.style.color='#333333';
    }
}

function jsTriggerTag() {
    createTag(this);
    setTimeout("killTag(\'"+this.id+"\')",5000);
}

function jsPlayVideo() {

    var posterId = this.id;
    var video = document.getElementById(posterId.replace('Poster','Video'));
    this.style.visibility = 'hidden';
    video.play();
    video.addEventListener('ended', cleanUpPosterImage);
}

function jsExposePackages(terms, element) {

    if(element.className != 'searchDisplayOutputEntrySelected') {
        var stringTerms = terms+'';
        if(stringTerms.indexOf('random') == -1 ) {
            var centerArray = [];
            var ci = 0;

            for( var i = 0; i < packagesIndex.length; i++ ) {
                if (packagesIndex[i]!=undefined) {
                    var keyWords = packagesIndex[i][3];
                    if (keyWords.indexOf(terms) == -1 && typeof(terms) != 'number') {
                        displacePackage(i);
                    }
                    else if (typeof(terms) == 'number' && 'pkg'+terms != packagesIndex[i][0]) {
                        displacePackage(i);                    
                    }
                    else {
                        if(keyWords.indexOf('hidden') == -1) {
                            if(document.getElementById('pkg'+i)==null) {
                                createPackage(i);
                                locatePackages(i);
                            }
                            centerArray[ci] = i;
                            ci = ci+1;
                        }
                    }
                }
            }
            centerPackages(centerArray);
            
        }
        else {
            var pkgSize = document.getElementById('badgeTail').offsetHeight;
            var availableWidth = getCanvasSize('w')-2*pkgSize-3*pkgPadding;
            var availableHeight = getCanvasSize('h')-3*pkgPadding-pkgSize;
            
            var randomTerms = terms;
            var randomTerm = randomTerms.split(',');
            var term = 'all';
            for ( var i = 0; i < randomTerm.length; i++ ) {
                if (randomTerm[i] != 'random') {
                    term = randomTerm[i];
                }
            }
            
            for( var i = 0; i < packagesIndex.length; i++ ) {
                if (packagesIndex[i]!=undefined) { //(document.getElementById('pkg'+i)!=null) {
                    var keyWords = packagesIndex[i][3];
                    if (keyWords.indexOf(term) != -1) {
                        randomizePackage(i, availableWidth, availableHeight);
                    }
                    else if (term == 'all' && keyWords.indexOf('hidden') == -1) {
                        if (document.getElementById('pkg'+i)==null) {
                            createPackage(i);
                            locatePackages(i);
                        }
                        randomizePackage(i, availableWidth, availableHeight);                        
                    }
                    else {
                        if (document.getElementById('pkg'+i)!=null) {
                            dropPackage(i);
                        }
                    }
                }
            }
        }
    }
}

function jsSearchItemHover(element) {
    if (element.className != 'searchDisplayOutputEntrySelected') {
        element.className = 'searchDisplayOutputEntryHover';
    }
}
function jsSearchItemHoverOut(element) {
    if (element.className != 'searchDisplayOutputEntrySelected') {
        element.className = 'searchDisplayOutputEntry';
    }
}
function jsSearchItemSelect(element) {
    var elements = document.getElementsByClassName('searchDisplayOutputEntrySelected');
    for( var i = 0; i < elements.length; i++ ) {
        elements[i].className = 'searchDisplayOutputEntry';
    }
    if(element != undefined) {
        element.className = 'searchDisplayOutputEntrySelected';
    }
}

function createTag(tagged) {
    var tag = document.createElement('div');
    var parent = tagged.parentNode;
    parent.appendChild(tag);
    var objPosition = findPos(parent);
    var tagTop = getMousePosition(event,'y')-objPosition[1];
    var tagLeft = getMousePosition(event,'x')-objPosition[0];
    tag.className = 'tag';
    tag.id = 'tag'+tagged.id;
    tag.appendChild(document.createTextNode(tagged.src));
    if (tagLeft+tag.offsetWidth > tagged.offsetWidth) {
        tagLeft = tagLeft - tag.offsetWidth;
    }
    tag.style.top = tagTop+'px';
    tag.style.left = tagLeft+'px';
}
function killTag(taggedId) {
    var tagged = document.getElementById(taggedId);
    var tag = document.getElementById('tag'+tagged.id);
    var parent = tagged.parentNode;
    var removed = parent.removeChild(tag);
}
function findPos(obj) {
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		do {
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;
		} while (obj = obj.offsetParent);
	}
	return [curleft,curtop];
}

/* EFFECT SETUP/FINISH SCRIPTS */


function cleanUpDraggableNoFade(element) {
   new Effect.Opacity(element, {from:1.0, to:1.0, duration:0});
}

function cleanUpDisplayNone(elementId) {
    var id = elementId.element.id;
    document.getElementById(id).style.display = 'none';
}

function cleanUpMenuWidth(elementId) {
    var id = elementId.element.id;
    document.getElementById(id).style.width = '100%';
}

function cleanUpHidePackageMenu(elementId) {
    var id = elementId.element.id;
    document.getElementById(id).style.visibility = 'hidden';
}

function cleanUpOpacity(elementId) {
    document.getElementById(elementId.element.id).style.opacity = 1;
}

function cleanUpPackageImagePreview(id) {
    setTimeout("document.getElementById(\'packageDisplayImagePreview"+id+"\').src = \'resources/wait.png\'",2000);
}

function cleanUpPackageImage(elementId) {
    var packageDisplayImagePreviewId = elementId.element.id;
    var id = packageDisplayImagePreviewId.replace('packageDisplayImagePreview','');
    id = id.replace('packageDisplayImage','');
    if (document.getElementById('packageDisplayImage'+id).style.display != 'block') {
        var packageDisplayImagePreview = document.getElementById(packageDisplayImagePreviewId);
        var packageDisplayImage = document.getElementById(packageDisplayImagePreviewId.replace('Preview',''));

        packageDisplayImage.src = 'scripts/getImage.php?src='+packages[packageDisplayImagePreviewId.replace('packageDisplayImagePreview','')][1]+'&h='+getPkgExpandedSize(id,'h');
        packageDisplayImage.onLoad = cleanUpPackageImagePreview(id);
        packageDisplayImage.style.left = packageDisplayImagePreview.offsetLeft;
        packageDisplayImage.style.top = packageDisplayImagePreview.offsetTop;
        packageDisplayImage.style.display = 'block';
        if (pkgExpandLoadHtmlFlag[id]!=null) {
            jsCycleDisplay(pkgExpandLoadHtmlFlag[id][0],pkgExpandLoadHtmlFlag[id][1],pkgExpandLoadHtmlFlag[id][2]);
            pkgExpandLoadHtmlFlag[id] = null;
        }
        else {
            makeDraggable(packageDisplayImage);
        }
    }
}

function cleanUpReleaseMask() {
    document.getElementById('canvasMask').style.display = 'none';
}

function cleanUpEngageMask() {
    document.getElementById('canvasMask').style.display = 'block';
    document.getElementById('canvasMask').style.zIndex = pkgZIndex;
}

function cleanUpPosterImage() {
    var videoId = this.id;
    var poster = document.getElementById(videoId.replace('Video','Poster'));
    poster.style.visibility = 'visible';
    
}

function cleanUpPkgContainerDim(elementId) {
    var packageContainerId = elementId.element.id;
    var packageContainer = document.getElementById(packageContainerId);
    packageContainer.style.height = '100%';
    packageContainer.style.width = '100%';
}

function cleanUpPackageInfo(elementId) {
    var packageMenuId = elementId.element.id;
    var packageMenuInfo = document.getElementById(packageMenuId.replace('packageMenu','packageMenuInfo'));
    
    packageMenuInfo.childNodes[0].nodeValue='<';
    packageMenuInfo.style.color='#111111';
}

function cleanUpRepairCanvas() {
    locatePackages('initialize');
}