// Keep some reference pointers
var pointer = p = {
    window: $(window),
    windowW: $(window).width(),
    windowH: $(window).height(),
    document: $(document),
    container: $('.container'),
    topSlider: {
        container: $('#topSlider'),
        intCont: $('#topSlider #intCont')
    },
    navbar: $('#navbar'),
    filter: $('#filter'),
    grid: $('#grid'),
    press: $('#guttenberg')
};

// Create some defaults
var defaults = d = {
    // Slider specifics
    sliderW: p.windowW,
    sliderH: p.windowH,
    sliderImages: [
        'homepage-slider-1.jpg',
        'homepage-slider-2.jpg',
        'homepage-slider-3.jpg'
    ],
    sliderMainText: 'babywalker',
    sliderText: [
        'the eternal collection',
        'the greeks collection',
        'the eternal collection'
    ],
    sliderStar: 'star.png',
    sliderZigZag: 'zigzag-line.png',
    sliderDownArrow: 'down-arrow.png',
    firstSlide: 1, // 1-based (starts with 1, not with 0)
    sliderAnimationSpeed: 1000, // Miliseconds

    // Navbar specifics
    navbarMenu: [
        'products',
        'press',
        'about us',
        'catalogues',
        'contact',
        'limba'
    ],

    // Filter specifics
    filterOptions: {
        defaultExtension: 'jpg',
        defaultDescription: function(filename) {
            var fNE = filename.replace(/.jpg$|.jpeg$|.png$|.gif$|.bmp$/, '').split('-'),
                alphaRegex = /^[a-zA-Z]/,
                returnName = [];

            for (var i = 0, len = fNE.length; i < len; i++) {
                if (fNE[i].match(alphaRegex)) {
                    returnName.push(fNE[i].charAt(0).toUpperCase() + fNE[i].slice(1));
                } else {
                    returnName.push(fNE[i]);
                }
            }

            return returnName.join(' ');
        },
        formatSource: function(filename) {
            return (filename.match(/.jpg$|.jpeg$|.png$|.gif$|.bmp$/))
                ? filename : filename + '.' + this.defaultExtension;
        },
        itemsPerRow: 3
    },
    filterData: {
        'babywalker': [
            ['babywalker-boy-4013.jpg', 'Demonstratie de forta'],
            ['babywalker-boy-4019.jpg'],
            ['babywalker-boy-4020.jpg']
        ],
        'exclusive': [
            ['exclusive-boy-5003.jpg'],
            ['exclusive-boy-5007', 'Alta demonstratie'],
            ['exclusive-boy-5013']
        ],
        'luminosa': [
            ['luminosa-girl-6007']
        ]
    },
    filterBuildGridImageData: null,
    pressPictures: [
        'madamefigaro-babywalker-shoes-240x240',
        'marie1-240x160',
        'marieclaire1-240x160',
        'vaftisi5-240x160',
        'vogue4-240x160'
    ],
    picturesPerRow: 4
};

// Create a custom object
var custom = c = {

};

// Merge the defaults with the custom object (if there is one)
(function() {

    if (!$.isEmptyObject(custom)) {
        window.defaults = $.extend(true, defaults, custom);
    }

})();

// Build and initialize the slider
(function() {

    // Define needed functions (in closure)
    function createSlide(index) {
        var slide = $('<div></div>');

        slide.prop('id', 'slide'+(index+1)).addClass('slide fib').css({
            width: p.windowW,
            height: p.windowH
        });
        slider.intCont.append(slide);
        slider['slide'+(index+1)] = slider.intCont.find('.slide').eq(index);
    }

    function addImageToSlide(index) {
        slider['slide'+(index+1)].css({
            backgroundImage: 'url("images/slider/'+d.sliderImages[index]+'")'
        });
    }

    function addControlButton() {
        var div = $('<div></div>');

        div.addClass('control-button');
        slider.control.append(div);
    }

    function addTextContainer(index) {
        var div = $('<div></div>'),
            leftStar = $('<img>'),
            header = $('<h2></h2>'),
            rightStar = $('<img>'),
            zigzag = $('<img>'),
            p = $('<p></p>');

        div.addClass('text-container five columns');
        leftStar.prop('src', 'images/slider/'+d.sliderStar).addClass('image-star');
        header.text(d.sliderMainText);
        rightStar.prop('src', 'images/slider/'+d.sliderStar).addClass('image-star');
        zigzag.prop('src', 'images/slider/'+d.sliderZigZag).addClass('image-zigzag');
        p.text(d.sliderText[index]);

        slider['slide'+(index+1)].append(
            div.append(leftStar).append(header).append(rightStar).append(zigzag).append(p)
        );
    }

    function addBottomLink(index) {
        var downArrow = $('<img>');

        downArrow.prop('src', 'images/slider/'+d.sliderDownArrow).addClass('image-down-arrow');
        slider['slide'+(index+1)].append(downArrow);
    }

    // Keep slider object as reference
    var slider = p.topSlider;

    // Add the control
    slider.control = slider.container.find('div.control');

    // Resize all slides to fill the entire height of the screen
    slider.intCont.find('.slide').css('height', d.sliderH);

    // Add image, text, bottomLink and control references
    for (var i = 0, len = d.sliderImages.length; i < len; i++) {
        // Create the slide
        createSlide(i);

        // Add the image
        addImageToSlide(i);

        // Add the control button
        addControlButton();

        // Add text container
        addTextContainer(i);

        // Add bottom link
        addBottomLink(i);
    }

    // Reticulate parent slider to contain his absolute positioned children
    slider.container.css('height', p.windowH);

    // Reticulate intermediate container to withold all slides
    slider.intCont.css({
        width: d.sliderImages.length * p.windowW,
        height: p.windowH
    });

    // Reticulate control div to be set on vertical middle
    slider.control.css('top', (p.windowH - slider.control.height()) / 2);

    // Add some function to the slider
    slider.moveTo = function(slideNumber) {
        this.intCont.animate({
            marginLeft: slideNumber * -p.windowW
        }, d.sliderAnimationSpeed);
    }

    slider.control.on('click', 'div', function() {
        var self = $(this),
            index = self.index();

        // Deactivate all other buttons
        slider.control.find('div').removeClass('active');
        // Active current button
        self.addClass('active');

        // Move slider to target slide
        slider.moveTo(index);
    });

    // Set the first slide as active
    slider.control.find('.control-button').eq(d.firstSlide - 1).click();

    // Add behaviour for down arrow within the slides
    slider.intCont.on('click', '.image-down-arrow', function() {
        $('html, body').animate({
            scrollTop: p.navbar.offset().top
        });
    });

})();

// Build and initialize navbar
(function() {

    // Define needed functions (in closure)
    function addMenuItem(item) {
        var li = $('<li></li>'),
            a = $('<a></a>');

        a.prop('href', '#'+item.replace(/ /g, '')).text(item);
        ul.append(li.append(a));
    }

    function addMenuBanner() {
        var li = $('<li></li>'),
            a = $('<a></a>');

        a.prop('href', '#').text(d.sliderMainText).addClass('navlogo');
        ul.find('li').eq(itemsLength / 2 - 1).after(li.append(a));
    }

    var ul = p.navbar.find('nav ul'),
        itemsLength = d.navbarMenu.length;

    // Build menu
    for (var i = 0; i < itemsLength; i++) {
        addMenuItem(d.navbarMenu[i]);
    }
    addMenuBanner();

    p.window.on('scroll', function() {
        var scrollTop = p.window.scrollTop(),
            navbarIsSticky = p.navbar.hasClass('sticky');

        if (scrollTop > p.windowH && !navbarIsSticky) {
            p.navbar.addClass('sticky');
            $('body').addClass('with-padding');
        } else if (scrollTop <= p.windowH && navbarIsSticky) {
            p.navbar.removeClass('sticky');
            $('body').removeClass('with-padding');
        }
    });

})();

// Build and initialize the filters
(function() {

    // Define needed functions (in closure)
    function createFilterSection(section) {
        var li = $('<li></li>'),
            a = $('<a></a>');

        a.prop('href', '#'+section).text(section);
        p.filter.find('ul').append(li.append(a));
    }

    d.filterBuildGridImageData = function(section) {
        var sections = (section === 'all') ? [] : [section],
            fo = d.filterOptions,
            fd = d.filterData,
            iPR = fo.itemsPerRow,
            divRow = $('<div class="row"></div>');

        if (typeof sections[0] === 'undefined') {
            for (category in fd) {
                if (fd.hasOwnProperty(category)) {
                    sections.push(category);
                }
            }
        }

        // Empty the grid
        p.grid.find('div.row').remove();

        for (var i = 0, len = sections.length; i < len; i++) {
            if (fd.hasOwnProperty(sections[i])) {
                for (var j = 0, len2 = fd[sections[i]].length; j < len2; j++) {
                    // Commit the row
                    if (divRow.children().size() >= iPR) {
                        p.grid.append(divRow);
                        divRow = $('<div class="row"></div>');
                    }

                    var div = $('<div></div>'),
                        img = $('<img>'),
                        a = $('<a></a>'),
                        divInfo = $('<div></div>'),
                        h3 = $('<h3></h3>'),
                        h5 = $('<h5></h5'),
                        formalName,
                        description;

                    div.addClass('four columns');
                    formalName = fo.formatSource(fd[sections[i]][j][0]);
                    img.prop('src', 'images/products/' + formalName);
                    a.prop('href', formalName).addClass('semiopaque');
                    divInfo.addClass('info');
                    description = (typeof fd[sections[i]][j][1] === 'undefined')
                        ? fo.defaultDescription(formalName) : fd[sections[i]][j][1];
                    h3.text(description);
                    h5.text(sections[i]);

                    a.append(divInfo.append(h3).append(h5));
                    divRow.append(div.append(img).append(a));
                }
            }
        }

        // Collect garbage if needed
        if (divRow.children().size()) {
            p.grid.append(divRow);
            divRow = $('<div class="row"></div>');
        }

        // Bind the hover event for the div.row > div
        p.grid.find('.row > div').hover(function() {
            $(this).find('a').animate({
                opacity: '.5'
            }, 500);
        }, function() {
            $(this).find('a').animate({
                opacity: 0
            }, 500);
        });

        // Bind the onmouseover event behavior for all the a elements
        p.grid.find('a.semiopaque').hover(function() {
            $(this).find('.info').animate({
                left: '0%'
            }, 400);
        }, function() {
            $(this).find('.info').animate({
                left: '150%'
            }, 400);
        });

        // Reticulate the height of the #products div
        var rowNumber = p.grid.find('.row').size();
        $('#products').animate({
            height: (rowNumber * 500 + 242) + 'px'
        }, 500);
    }

    // Build the filters
    for (section in d.filterData) {
        if (d.filterData.hasOwnProperty(section)) {
            createFilterSection(section);
        }
    }

    // Bind all filter section links
    p.filter.find('a').click(function(evt) {
        evt.preventDefault();

        var self = $(this);

        p.filter.find('a').removeClass('active');
        self.addClass('active');
        d.filterBuildGridImageData(self.prop('href').split('#')[1]);
    });

    // Autoset on the first key collection
    p.filter.find('a').eq(0).click();

})();

// Build and initialize press section
(function() {

    var divRow = $('<div class="row ten columns offset-by-one"></div>'),
        pPR = d.picturesPerRow;

    for (var i = 0, len = d.pressPictures.length; i < len; i++) {
        if (divRow.children().size() >= pPR) {
            p.press.append(divRow);
            divRow = $('<div class="row ten columns offset-by-one"></div>');
        }

        var div = $('<div></div>'),
            a = $('<a></a>'),
            img = $('<img>'),
            formalName;

        formalName = d.filterOptions.formatSource(d.pressPictures[i]);
        div.addClass('three columns');
        img.prop('src', 'images/press/' + formalName);
        a.prop('href', formalName);
        divRow.append(div.append(a.append(img)));
    }

    // Garbage collection
    if (divRow.children().size()) {
        p.press.append(divRow);
    }

})();