Array.prototype.contains = function (value) {
    var length = this.length;
    for (var i = 0; i < length; i++) {
        if (this[i] === value) {
            return true
        }
    }
    return false
};
var portfolioSetter = {
    xmlSource: 'portfolio.xml',
    pageWrapperClass: 'page_wrapper',
    pageHolderId: 'page_holder',
    navigationId: 'portfolio_pagination',
    categoriesId: 'portfolio_categories',
    itemClass: 'portfolio_item',
    itemsPerPage: 12,
    pageWidth: 980,
    showCategories: true,
    allText: 'ALL',
    easing: '',
    animationSpeed: 500,
    categories: [],
    items: [],
    pageWrappers: [],
    pageHolder: null,
    imagesLoaded: 0,
    main: this,
    counter: 0,
    ie: false,
    categoryHolder: null,
    init: function () {
        $('#' + this.pageHolderId).append('<div class="loading"></div>');
        this.loadItems()
    },
    loadItems: function () {
        $.ajax({
            type: 'GET',
            url: this.xmlSource,
            dataType: 'xml',
            success: function (xml) {
                if ($(xml).find('show_categories:first').text() === 'off') {
                    portfolioSetter.showCategories = false
                }
                portfolioSetter.allText = $(xml).find('all_text:first').text();
                portfolioSetter.easing = $(xml).find('animation_easing:first').text();
                portfolioSetter.animationSpeed = Number($(xml).find('animation_speed:first').text());
                portfolioSetter.itemsPerPage = Number($(xml).find('items_per_page:first').text());
                if (portfolioSetter.showCategories) {
                    $(xml).find('categories').eq(0).find('category').each(function (i) {
                        var current = $(this);
                        var category = {
                            id: current.attr('id'),
                            name: current.text()
                        };
                        portfolioSetter.categories.push(category)
                    })
                }
                $(xml).find('item').each(function (i) {
                    var current = $(this);
                    var thum = current.find('thumbnail:first').text();
                    var prev = current.find('preview:first').text();
                    var cat = current.find('category:first').text().split(',');
                    var desc = current.find('description:first').text();
                    var item = {
                        thumbnail: thum,
                        preview: prev,
                        category: cat,
                        description: desc,
                        obj: $('<div class="' + portfolioSetter.itemClass + '" style="background-image:url(' + thum + ');"><a rel="lightbox" class="single_image" href="' + prev + '" title="' + desc + '"><img class="hidden" /></a></div>')
                    };
                    portfolioSetter.items.push(item)
                });
                portfolioSetter.setSetter()
            }
        })
    },
    setSetter: function () {
        if ($.browser.msie) {
            this.ie = true
        }
        this.pageHolder = $('#' + portfolioSetter.pageHolderId);
        this.pageHolder.after('<div id="' + this.navigationId + '"><ul></ul></div>');
        if (this.showCategories) {
            this.displayCategories()
        }
        this.loadImages()
    },
    displayCategories: function () {
        this.categoryHolder = $('<div id="' + this.categoriesId + '"></div>');
        this.categoryHolder.append('<ul></ul>');
        this.pageHolder.before(this.categoryHolder);
        var catUl = this.categoryHolder.find('ul');
        var allLink = $('<li>' + this.allText + '</li>');
        catUl.append(allLink);
        this.showSelectedCat(allLink);
        allLink.bind({
            'click': function () {
                portfolioSetter.displayItems();
                portfolioSetter.showSelectedCat($(this))
            },
            'mouseover': function () {
                $(this).css({
                    cursor: 'pointer'
                })
            }
        });
        var catNumber = this.categories.length;
        for (var i = 0; i < catNumber; i++)(function (i) {
            var category = $('<li>' + portfolioSetter.categories[i].name + '</li>');
            catUl.append(category);
            category.bind({
                'click': function () {
                    portfolioSetter.displayItems(portfolioSetter.categories[i].id);
                    portfolioSetter.showSelectedCat($(this))
                },
                'mouseover': function () {
                    $(this).css({
                        cursor: 'pointer'
                    })
                }
            })
        })(i)
    },
    showSelectedCat: function (selected) {
        var prevSelected = this.categoryHolder.find('ul li.selected');
        if (prevSelected[0]) {
            var prevHtml = prevSelected.find('div.port_cat').html();
            prevSelected.html(prevHtml);
            prevSelected.removeClass('selected')
        }
        var html = selected.html();
        selected.html('<div class="port_cat_active"><div class="port_cat_l"></div><div class="port_cat">' + html + '</div><div class="port_cat_r"></div> </div>');
        selected.addClass('selected')
    },
    loadImages: function () {
        var imageCount = this.items.length;
        for (var i in this.items) {
            if (this.items.hasOwnProperty(i)) {
                var img = new Image();
                $(img).load(function () {
                    portfolioSetter.imagesLoaded++;
                    if (portfolioSetter.imagesLoaded === imageCount) {
                        portfolioSetter.displayItems()
                    }
                }).attr('src', portfolioSetter.items[i].thumbnail)
            }
        }
    },
    displayItems: function () {
        var filterCat = arguments.length === 0 ? false : true;
        $('.' + this.itemClass).css({
            display: 'none'
        });
        this.pageHolder.html('');
        this.pageHolder.width(200);
        portfolioSetter.pageWrappers = [];
        portfolioSetter.pageHolder.animate({
            marginLeft: 0
        });
        var length = this.items.length;
        portfolioSetter.counter = 0;
        var catId = arguments[0];
        for (var i = 0; i < length; i++)(function (i, filterCat, catId) {
            if (!filterCat || (filterCat && portfolioSetter.items[i].category.contains(catId))) {
                if (portfolioSetter.counter % portfolioSetter.itemsPerPage === 0) {
                    portfolioSetter.pageHolder.width(portfolioSetter.pageHolder.width() + portfolioSetter.pageWidth);
                    var wrapper = $('<div class="' + portfolioSetter.pageWrapperClass + '"></div>');
                    portfolioSetter.pageWrappers.push(wrapper);
                    portfolioSetter.pageHolder.append(wrapper)
                }
                if (portfolioSetter.ie) {
                    var obj = $('<div class="' + portfolioSetter.itemClass + '" style="background-image:url(' + portfolioSetter.items[i].thumbnail + ');"><a rel="lightbox" class="single_image" href="' + portfolioSetter.items[i].preview + '" title="' + portfolioSetter.items[i].description + '"></a><img class="hidden"/></div>');
                    portfolioSetter.pageWrappers[portfolioSetter.pageWrappers.length - 1].append(obj);
                    portfolioSetter.items[i].obj = obj
                } else {
                    portfolioSetter.pageWrappers[portfolioSetter.pageWrappers.length - 1].append(portfolioSetter.items[i].obj)
                }
                if (portfolioSetter.counter >= portfolioSetter.itemsPerPage) {
                    portfolioSetter.items[i].obj.show()
                } else {
                    portfolioSetter.items[i].obj.fadeIn().animate({
                        opacity: 1
                    }, 0)
                }
                portfolioSetter.counter++
            }
        })(i, filterCat, catId);
        $("a[rel='lightbox']").colorbox({
            current: "{current}/{total}"
        });
        $('.portfolio_item').corner();
        this.showNavigation();
        this.setHoverFunctionality()
    },
    showNavigation: function () {
        var navUl = $('#' + this.navigationId + ' ul');
        navUl.html('');
        var pageNumber = this.pageWrappers.length;
        if (pageNumber > 1) {
            for (var i = 0; i < pageNumber; i++)(function (i) {
                var li = $('<li></li>');
                navUl.append(li);
                li.bind({
                    'click': function () {
                        var marginLeft = i * portfolioSetter.pageWidth + i * 8;
                        portfolioSetter.pageHolder.animate({
                            marginLeft: [-marginLeft, portfolioSetter.easing]
                        }, portfolioSetter.animationSpeed);
                        navUl.find('li.selected').removeClass('selected');
                        $(this).addClass('selected')
                    },
                    'mouseover': function () {
                        $(this).css({
                            cursor: 'pointer'
                        })
                    }
                })
            })(i);
            navUl.find('li:first').addClass('selected');
            var buttonWidth = 21;
            var marginLeft = (this.pageWidth - 20) / 2 - pageNumber * buttonWidth / 2;
            navUl.css({
                marginLeft: marginLeft
            })
        }
    },
    setHoverFunctionality: function () {
        $('.portfolio_item').hover(function () {
            $(this).stop().animate({
                opacity: 0.7
            })
        }, function () {
            $(this).stop().animate({
                opacity: 1
            })
        })
    }
};