String.prototype.endsWith = function (suffix) {
    return this.indexOf(suffix, this.length - suffix.length) !== -1;
};
$.ajaxSetup({
    cache: false
});

$(document).ready(function () {

    $('a[rel=open-portfolio]').unbind('click').click(loadPopup);

});

function loadPopup() {

    $('#popup').load('/portfolio/template.html #popup-portfolio', function (response, status, xhr) {

        $('#popup').show();
        $('#popup-portfolio').slideDown(400, function () { 
            $('#popup-top div').fadeIn(200);
            $('#popup a[rel=close-popup]').unbind('click').click(popupClose_click);

            $.ajax({

                type: 'GET',
                url: '/portfolio/data.xml',
                dataType: 'xml',
                cache: false,
                success: function (xml) {

                    $('#popup-top > div > ul').html('');
                    $(xml).find('category').each(function () {
                        $('#popup-top > div > ul').append('<li><a href="javascript:;" title="' + $(this).attr('title') + '" rel="cat-' + $(this).attr('title') + '">' + $(this).attr('title') + '</li>');
                    });
                    $('#popup-top > div > ul > li > a').unbind('click').click(category_click);
                    $('#popup-top > div > ul > li:first > a').click();

                },
                error: function (xhr, status, error) {
                }
            });
        });

    });

}
function loadItems(key, index, setupPager) {

    $('#popup-body').hide();
    $('#popup-body-text').html('');
    $('#popup-body-content').html('');
    $('#popup-body-content').attr('class', '');


    if (setupPager) {
        $('#popup-pager').hide();
        $('#instruction').hide();
    }

    $.ajax({
        type: 'GET',
        url: '/portfolio/data.xml',
        dataType: 'xml',
        cache: false,
        success: function (xml) {

            var category = $(xml).find('category[title="' + key + '"]')
            var items = $(category).find('item');
            if (items.length > 0) {

                var item = items[index];
                var title = $(item).attr('title');
                var subtitle = $(item).attr('subtitle');
                var url = $(item).attr('url');
                var text = $(item).find('summary');
                var media = $(item).find('media');

                $('#popup-body-text').append('<h3>' + title + '</h3>');

                if (subtitle != undefined && subtitle.length > 0)
                    $('#popup-body-text').append('<h4>' + subtitle + '</h4>');

                if (text != undefined && text.length > 0)
                    $('#popup-body-text').append($(text[0]).text());

                if (url != undefined && url.length > 0)
                    $('#popup-body-text').append('<p class="visit-site"><a href="' + url + '" target="_blank" title="">Visit Site <img src="/images/arrow-green-right.png" alt="" /></a></p>');

                if (media != undefined && media.length > 0) {
                    var first = $(media[0]).text();

                    if (first.endsWith('.jpg') || first.endsWith('.jpeg') || first.endsWith('.png')) {
                        $('#popup-body-content').attr('class', 'popup-body-image');
                        $('#popup-body-content').append('<img src="/portfolio/images/' + first + '" alt="" />');
                    } else {
                        var code = '<object type="application/x-shockwave-flash" style="width:652px; height:400px;" data="' + first + '?rel=0&amp;autoplay=1&amp;showsearch=0&amp;showinfo=0&amp;version=3&amp;modestbranding=1" allowscriptaccess="always" allowfullscreen="true">';
                        code += '<param name="movie" value="' + first + '?rel=0&amp;autoplay=1&amp;showsearch=0&amp;showinfo=0&amp;version=3&amp;modestbranding=1" />';
                        code += '<param name="allowFullScreen" value="true" />';
                        code += '<param name="allowscriptaccess" value="always" />';
                        code += '</object>';

                        $('#popup-body-content').attr('class', 'popup-body-video');
                        $('#popup-body-content').append(code);
                        $('#popup-body-content').append('<span class="category-name">' + key + '</span>');
                    }

                    if (media.length > 1) {
                        $('#popup-body-content').append('<div></div>');
                        $('#popup-body-content div').append('<ul></ul>');
                        for (var i = 0; i < media.length; i++) {
                            $('#popup-body-content div ul').append('<li><a href="javascript:;" title=""><img src="/portfolio/images/' + $(media[i]).text() + '" alt="" /></a></li>');
                        }

                        $('#popup-body-content div ul li:first a').attr('class', 'active');
                        $('#popup-body-content div a').unbind('click').click(image_click);
                        $('#popup-body-content > img').unbind('mouseover').mouseover(img_mouseover);
                        $('#instruction').show();
                    }
                }

                if (setupPager) {

                    $('#popup-pager ul').html('');

                    if (items.length > 1) {

                        $('#popup-pager').show();

                        for (var i = 0; i < items.length; i++) {
                            $('#popup-pager > ul').append('<li><a href="javascript:;" title="" rel="item-' + i + '">' + (i + 1).toString() + '</li>');
                        }

                        $('#popup-pager li a').unbind('click').click(pager_click);
                        $('#popup-pager > a[id^=popup]').unbind('click').click(pagerNav_click);

                        $($('#popup-pager li a')[index]).attr('class', 'active');
                    } else {
                        $('#popup-pager').hide();
                    }
                }

                if (index == (items.length - 1))
                    $('#popup-pager-next').attr('style', 'visibility: hidden;');
                else
                    $('#popup-pager-next').attr('style', 'visibility: visible;');

                if (index == 0)
                    $('#popup-pager-prev').attr('style', 'visibility: hidden;');
                else
                    $('#popup-pager-prev').attr('style', 'visibility: visible;');

                $('#popup-body').fadeIn(750);
            }
        },
        error: function (xhr, status, error) {
        }
    });

}

function category_click(e) {

    $('#popup-top > div > ul > li > a').attr('class', '');
    $(this).attr('class', 'active');

    var key = $(this).attr('rel').replace('cat-', '');

    loadItems(key, 0, true);
}
function image_click(e) {
    $('#popup-body-content div a').attr('class', '');
    $(this).attr('class', 'active');

    //$('#popup-body-content div').animate({ opacity: 'hide', height: 'hide' }, 500, function () { $('#popup-body-content input[type=image]').fadeIn(250); });

    var image = $(this).children('img:first');
    $('#popup-body-content > img').attr('src', image.attr('src'));
}
function images_mouseleave(e) {
    $(this).animate({ opacity: 'hide', height: 'hide' }, 500);
    setTimeout(function () { $('#popup-body-content > img').unbind('mouseover').mouseover(img_mouseover); }, 500);
}
function img_mouseover(e) {
    $(this).unbind('mouseover'); 
    $('#popup-body-content div').unbind('mouseleave')

    $('#popup-body-content div').animate({ opacity: 'show', height: 'show' }, 500, function () { $('#popup-body-content div').unbind('mouseleave').mouseleave(images_mouseleave); });
}
function pager_click(e) {

    $('#popup-pager li a').attr('class', '');
    $(this).attr('class', 'active');
    
    var key = $('#popup-top > div > ul > li > a.active').attr('rel').replace('cat-', '');
    var index = $(this).attr('rel').replace('item-', '');

    loadItems(key, index, false);

}
function pagerNav_click(e) {

    var key = $('#popup-top > div > ul > li > a.active').attr('rel').replace('cat-', '');
    var index = parseInt($('#popup-pager li a.active').attr('rel').replace('item-', ''));

    if ($(this).attr('id') == 'popup-pager-next')
        index++;
    else
        index--;

    $('#popup-pager li a').attr('class', '');
    $($('#popup-pager li a')[index]).attr('class', 'active');

    loadItems(key, index, false);
}

function popupClose_click(e) {
    $('#popup-body').fadeOut(150, function () { $('#popup-top div').fadeOut(250, function () { $('#popup-portfolio').slideUp(400, function () { $('#popup').hide(); }) }) });
}