function loadImages(){

    insertGalleryImagesXML();
}

function setVideoDimensions(width, height){
    window.PORT_VIDEO_HEIGHT = height;
    window.PORT_VIDEO_WIDTH = width;
}

//gets image.xml file, parses it, and inserts li
//that are configured to show up in the gallery
function insertGalleryImagesXML(){
    $.ajax({
        type: "GET",
        url: "ajax/images.xml",
        dataType: "xml",
        success: function(xml){
            //process the xml
            var image_folder = $(xml).find("config").attr("image_folder_url");
            var vid_height = $(xml).find("config").attr("video_height");
            var vid_width = $(xml).find("config").attr("video_width");
            setVideoDimensions(vid_width, vid_height);
            
            var images = "";
            var i = 1;
            $(xml).find("image_definition").each(function(){
            
                var title = $(this).find("title").text();
                var filename = $(this).find("filename").text();
                var type = $(this).find("type").text();
                var description = $(this).find("description").text();
                
                var fimg = $(this).find("full_image");
                var fvid = $(this).find("full_video_embed");
                
                img_url = image_folder + '/' + filename;
                
                if (fvid.length != 0) {
                    full_vid_title = fvid.attr("title");
                    full_vid_url = fvid.text();
                    images += '<li data-id="id-' + i + '" data-type="' + type + '"> <a class="iframe_cbox" href="';
                    images += full_vid_url;
                    images += '" title="' + full_vid_title + '">'
                    images += '<img src="'
                    images += img_url;
                    images += '" alt="" /></a> <div class="info"><h2>' + title + '</h2><p>' + description + '</p></div></li>';
                    
                }
                else {
                    /* Populate the image values. */
                    var full_image_url;
                    var full_image_title;
                    
                    if (fimg.length != 0) {
                        full_image_url = image_folder + '/' + fimg.text();
                        full_image_title = fimg.attr("title");
                    }
                    else {
                        full_image_url = img_url;
                        full_image_title = "";
                    }
                    
                    images += '<li data-id="id-' + i + '" data-type="' + type + '"> <a href="';
                    images += full_image_url;
                    images += '" title="' + full_image_title + '">'
                    images += '<img src="'
                    images += img_url;
                    images += '" alt="" /></a> <div class="info"><h2>' + title + '</h2><p>' + description + '</p></div></li>';
                }
                i += 1;
            });
            
            $('ul.columns').html(images);
            
            // DOMContentLoaded
            
            //setup the initial filter
            
            // bind radiobuttons in the form
            var $filterLink = $('.filter');
            
            // get the first collection
            var $galleryList = $('#gallery-list');
            
            // clone applications to get a second collection
            var $data = $galleryList.clone();
            
            // Filter on the basis of the URL hash
            if (window.location.hash) {
                var $filterType = window.location.hash.replace('#', '');
                var $filteredData;
                if ($filterType == 'ALL') {
                    $filteredData = $data.find('li');
                }
                else {
                    var $fullLen = $data.find('li').length;
                    $filteredData = $data.find('li[data-type=' + $filterType + ']');
                    var $diff = $fullLen - $filteredData.length;
                    for (i = 0; i < $diff; i++) {
                        $data.append('<li class="placeholder" data-id="' + 'holder' + i + '" data-type="' + $filterType + '"><div></div></li>');
                        //$data.append('<li data-type="' + $filterType  + '"><img src="images/gallery_placeholder.png"/></li>');
                    }
                    $filteredData = $data.find('li[data-type=' + $filterType + ']');
                }
                
                
                
                // finally, call quicksand
                $galleryList.quicksand($filteredData, {
                    duration: 800,
                    easing: 'easeInOutQuad'
                }, function(){
                    //!!!!!!!!!!!!! ADD JS FUNCTIONAL IMPROVMENTS !!!!!!!!!!!!
                    addGalleryFunctionality();
                });
                
                $('.selected-filter').removeClass('selected-filter');
                $('a[href=' + window.location.hash + ']').addClass('selected-filter');
            }
            else {
                $('a[href=#ALL]').addClass('selected-filter');
            }
            
            // attempt to call Quicksand on every link click
            $filterLink.click(function(e){
            
                $data.find('.placeholder').remove();
                var $filterType = $(this).attr('href').replace('#', '');
                var $filteredData;
                if ($filterType == 'ALL') {
                    $filteredData = $data.find('li');
                }
                else {
                    var $fullLen = $data.find('li').length;
                    $filteredData = $data.find('li[data-type=' + $filterType + ']');
                    var $diff = $fullLen - $filteredData.length;
                    for (i = 0; i < $diff; i++) {
                        $data.append('<li class="placeholder" data-id="' + 'holder' + i + '" data-type="' + $filterType + '"><div></div></li>');
                        
                        //$data.append('<li class="placeholder" data-id="' + 'holder' + i + '" data-type="' + $filterType + '"><img src="images/gallery_placeholder.png"/></li>');
                        //$data.append('<li data-type="' + $filterType  + '"><img src="images/gallery_placeholder.png"/></li>');
                    }
                    $filteredData = $data.find('li[data-type=' + $filterType + ']');
                }
                
                // finally, call quicksand
                $galleryList.quicksand($filteredData, {
                    duration: 800,
                    easing: 'easeInOutQuad'
                }, function(){
                    //!!!!!!!!!!!!! ADD JS FUNCTIONAL IMPROVMENTS !!!!!!!!!!!!
                    addGalleryFunctionality();
                });
                
                $('.selected-filter').removeClass('selected-filter');
                $(this).addClass('selected-filter');
                
            });
            
            //Adds Colorbox, Cufon, etc to gallery items
            addGalleryFunctionality();
        }
    });
}