/**
* Bootstrap-Admin-Template by onokumus@gmail.com
* Version : 2.1.2 
* Author : Osman Nuri Okumuş 
* Copyright 2013
*/
/*
 Name    : style-switcher.js
 Author  : ono <http://onokumus.com />
 Version : 1.0
 */

// Load lesscss files
yepnope.addPrefix('less', function (resourceObj) {
    resourceObj.forceCSS = true;
    resourceObj.attrs = {
        'rel': 'stylesheet/less',
        'type': 'text/css'
    };
    return resourceObj;
});
var styleSwitcher = {
    init: function () {
        var $this = this;
        less = {env: "development"};

        // Style Switcher CSS
        yepnope([
            {load: 'assets/css/style-switcher.css'},
            {load: 'assets/lib/colorpicker/css/colorpicker.css'},
            {load: 'assets/lib/cssbeautify/cssbeautify.js'},
            {load: 'assets/lib/colorpicker/js/bootstrap-colorpicker.js',
                complete: function () {
                    yepnope([
                        {load: 'less!assets/less/theme.less'},
                        {load: 'assets/lib/less-1.5.1.min.js',
                            complete: function () {


                                $this.build();

                                if (Modernizr.localstorage) {
                                    if (localStorage.color) {
                                        $this.colorSelectorA.css('background-color', localStorage.color);
                                    }
                                    if (localStorage.pattern) {
                                        $this.patternImage = localStorage.pattern;
                                    }
                                }
                            }
                        }
                    ]);

                }
            }
        ]);

    },
    build: function () {
        var $this = this;
        var localStor = false;
        if (Modernizr.localstorage) {
            localStor = true;
        }

        if (localStor) {
            if (localStorage.layout) {
                $('body').addClass(localStorage.layout);
            }
            if (localStorage.color) {
                $this.setColor(localStorage.color);
            }
            if (localStorage.pattern) {
                $('body').css({
                    'background': 'url(assets/img/pattern/' + localStorage.pattern + '.png) repeat'
                });
            }
        }

        var modalHTML = '<div id="getCSSModal" class="modal fade">' +
            '<div class="modal-dialog">' +
            '<div class="modal-content">' +
            '<div class="modal-header">' +
            '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
            '<h4 class="modal-title">Theme CSS</h4>' +
            '<code>Copy textarea content and paste into theme.css</code>' +
            '</div> ' +
            '<div class="modal-body">' +
            '<div id="boxedBodyAlert" class="alert alert-info">' +
            'Please add the <strong>"fixed"</strong> class to the &lt;body&gt; element.' +
            '</div>' +
            '<div class="alert alert-info" id="sidebarPos">' +
            'Plase add the <strong>"side-right"</strong> class to the &lt;body&gt; element.' +
            '</div> ' +
            '<div id="sidebarWidth" class="alert alert-info">' +
            'Plase add the <strong>"mini-sidebar"</strong> class to the &lt;body&gt; element.' +
            '</div>' +
            '<div id="topNavStyle" class="alert alert-info">' +
            'Plase add the <strong>"padTop53"</strong> class to the &lt;body&gt; element.' +
            ' Remove <strong>"navbar-static-top"</strong> class and add the <strong>"navbar-fixed-top"</strong> class' +
            ' to the #top .navbar element.' +
            '</div>' +
            '<textarea class="form-control" name="cssbeautify" id="cssbeautify" readonly></textarea>' +
            '</div> ' +
            '<div class="modal-footer">' +
            '<button aria-hidden="true" data-dismiss="modal" class="btn btn-danger">Close</button>' +
            '</div> ' +
            '</div>' +
            '</div> ' +
            '</div>';


        $("body").append(modalHTML);

        var switchDiv = $('<div />').attr('id', 'style-switcher').addClass('style-switcher hidden-xs');

        var h5Ai = $('<i />').addClass('fa fa-cogs fa-2x');
        var h5A = $('<a />')
            .attr({
                'href': '#',
                'id': 'switcher-link'
            })
            .on('click', function (e) {
                e.preventDefault();
                switchDiv.toggleClass('open');
            })
            .append(h5Ai);

        var h5 = $('<h5 />').html('Style Switcher').append(h5A);


        var colorList = $('<ul />').addClass('options').attr('data-type', 'colors');
        var colors = [
            {"Hex": "#0088CC", "colorName": "Blue"},
            {"Hex": "#4EB25C", "colorName": "Green"},
            {"Hex": "#4A5B7D", "colorName": "Navy"},
            {"Hex": "#E05048", "colorName": "Red"},
            {"Hex": "#B8A279", "colorName": "Beige"},
            {"Hex": "#c71c77", "colorName": "Pink"},
            {"Hex": "#734BA9", "colorName": "Purple"},
            {"Hex": "#2BAAB1", "colorName": "Cyan"}
        ];
        $.each(colors, function (i) {
            var listElement = $('<li/>')
                .append(
                    $('<a/>')
                        .css("background-color", colors[i].Hex)
                        .attr({
                            "data-color-hex": colors[i].Hex,
                            "data-color-name": colors[i].colorName,
                            "href": "#",
                            "title": colors[i].colorName
                        }).tooltip({'placement': 'bottom'})
                );
            colorList.append(listElement);
        });


        colorList.find('a').on('click', function (e) {
            e.preventDefault();
            $this.setColor($(this).data('colorHex'));

            if (localStor) {
                localStorage.color = $(this).data('colorHex');
            }
        });
        var colorSelector = $('<div/>')
            .addClass('color-picker').attr({
                'id': 'colorSelector',
                'data-color': colors[0].Hex,
                'data-color-format': 'hex'
            }).append(
                $('<a/>')
                    .css('background-color', colors[0].Hex)
                    .attr({
                        'href': '#',
                        'id': 'colorSelectorA'
                    }),
                $("<span />").addClass("color-picker-icon")
            );

        colorSelector.colorpicker().on('changeColor', function (ev) {
            colorSelector.find("a").css("background-color", ev.color.toHex());
            $this.setColor(ev.color.toHex());
            if (localStor) {
                localStorage.color = $(this).data('colorHex');
            }
        });


        var colorPicker = $('<li/>').append(colorSelector);

        colorList.append(colorPicker);

        var styleSwitcherWrap = $('<div />')
            .addClass('style-switcher-wrap')
            .append(
                $('<h6 />').html('Colors'), colorList, $('<hr/>')
            );

        var boxLink = $('<a/>')
            .attr({
                'id': 'boxLink',
                'href': '#',
                'data-layout-type': 'fixed'
            })
            .html('Fixed')
            .on('click', function (e) {
                e.preventDefault();
                $(this).addClass('active').siblings('a').removeClass('active');
                $('body').removeClass('wide').addClass('fixed');
                if (localStor) {
                    localStorage.layout = 'fixed';
                }
            });

        var wideLink = $('<a/>')
            .attr({
                'href': '#',
                'id': 'wideLink',
                'data-layout-type': 'wide'
            })
            .html('Wide')
            .on('click', function (e) {
                e.preventDefault();
                $(this).addClass('active').siblings('a').removeClass('active');
                $('body').removeClass('fixed').addClass('wide').removeAttr('style');
                if (localStor) {
                    localStorage.layout = 'wide';
                }
            });
        if (localStor) {
            if (localStorage.layout === 'fixed') {
                boxLink.addClass('active');
            } else {
                wideLink.addClass('active');
            }
        }
        styleSwitcherWrap.append(
            $('<div/>').addClass('options-link boxedFixedBody').append(
                $('<h6/>').html('Layout Style'),
                boxLink,
                wideLink
            ));

        var topNavBarStatic = $('<a/>').html('Static').attr('href', '#').on('click', function (e) {
            e.preventDefault();
            $(this).addClass('active').siblings('a').removeClass('active');
            $('body').removeClass('padTop53');
            $('#top .navbar').removeClass('navbar-fixed-top').addClass('navbar-static-top');
        });
        var topNavBarFixed = $('<a/>').html('Fixed').attr('href', '#').on('click', function (e) {
            e.preventDefault();
            $(this).addClass('active').siblings('a').removeClass('active');
            $('body').addClass('padTop53');
            $('#top .navbar').removeClass('navbar-static-top').addClass('navbar-fixed-top');
        });
        styleSwitcherWrap.append(
            $('<div/>').addClass('options-link').append(
                $('<h6/>').html('Top Nav Bar Style'),
                topNavBarStatic,
                topNavBarFixed
            )
        );

        var patternList = $('<ul />').addClass('options').attr('data-type', 'pattern');

        var patternImages = [
            {'image': 'brillant', 'title': 'Brillant'},
            {'image': 'always_grey', 'title': 'Always Grey'},
            {'image': 'retina_wood', 'title': 'Retina Wood'},
            {'image': 'low_contrast_linen', 'title': 'Low Constrat Linen'},
            {'image': 'egg_shell', 'title': 'Egg Shel'},
            {'image': 'cartographer', 'title': 'Cartographer'},
            {'image': 'batthern', 'title': 'Batthern'},
            {'image': 'noisy_grid', 'title': 'Noisy Grid'},
            {'image': 'diamond_upholstery', 'title': 'Diamond Upholstery'},
            {'image': 'greyfloral', 'title': 'Gray Floral'},
            {'image': 'white_tiles', 'title': 'White Tiles'},
            {'image': 'gplaypattern', 'title': 'GPlay'},
            {'image': 'arches', 'title': 'Arches'},
            {'image': 'purty_wood', 'title': 'Purty Wood'},
            {'image': 'diagonal_striped_brick', 'title': 'Diagonal Striped Brick'},
            {'image': 'large_leather', 'title': 'Large Leather'},
            {'image': 'bo_play_pattern', 'title': 'BO Play'},
            {'image': 'irongrip', 'title': 'Iron Grip'},
            {'image': 'wood_1', 'title': 'Dark Wood'},
            {'image': 'pool_table', 'title': 'Pool Table'},
            {'image': 'crissXcross', 'title': 'crissXcross'},
            {'image': 'rip_jobs', 'title': 'R.I.P Steve Jobs'},
            {'image': 'random_grey_variations', 'title': 'Random Grey Variations'},
            {'image': 'carbon_fibre', 'title': 'Carbon Fibre'}
        ];

        $.each(patternImages, function (i) {
            var listElement = $('<li/>')
                .append(
                    $('<a/>')
                        .css({
                            'background': 'url(assets/img/pattern/' + patternImages[i].image + '.png) repeat'
                        })
                        .attr({
                            'href': '#',
                            'title': patternImages[i].title,
                            'data-pattern-image': patternImages[i].image
                        }).tooltip({'placement': 'bottom'})
                );
            patternList.append(listElement);
        });

        patternList.find('a').on('click', function (e) {
            e.preventDefault();
            $('body').css({
                'background-image': 'url(assets/img/pattern/' + $(this).data('patternImage') + '.png)',
                'background-repeat': ' repeat'
            });
            $this.patternImage = $(this).data('patternImage');
            if (localStor) {
                localStorage.pattern = $(this).data('patternImage');
            }
        });

        styleSwitcherWrap.append(
            $('<div/>').addClass('pattern').append(
                $('<h6/>').html('Background Pattern'),
                patternList
            )
        );


        var sideLeftLink = $('<a/>').html('Left').attr('href', '#').on('click', function (e) {
            e.preventDefault();
            $(this).addClass('active');
            sideRightLink.removeClass('active');
            $('body').removeClass('side-right');
            $('#sidebarPos').addClass('');
        });
        var sideRightLink = $('<a/>').html('Right').attr('href', '#').on('click', function (e) {
            e.preventDefault();
            $(this).addClass('active');
            sideLeftLink.removeClass('active');
            $('body').addClass('side-right');
        });
        var sideAffixLink = $('<a/>').html('Affix').attr('href', '#').on('click', function (e) {
            e.preventDefault();
            var $menuHeight = $(window).height();
            $('#menu').affix({offset: {top: 200}}, 100).css({height: $menuHeight});
        });
        styleSwitcherWrap.append(
            $('<hr/>'),
            $('<div/>').addClass('options-link sidebarOpt').append(
                $('<h6/>').html('Side Bar Position'),
                sideLeftLink,
                sideRightLink
            )
        );
        var sideMiniLink = $('<a/>').html('Mini').attr('href', '#').on('click', function (e) {
            e.preventDefault();
            $(this).addClass('active');
            sideMaxiLink.removeClass('active');
            $('body').addClass('mini-sidebar');
        });
        var sideMaxiLink = $('<a/>').html('Maxi').attr('href', '#').on('click', function (e) {
            e.preventDefault();
            $(this).addClass('active');
            sideMiniLink.removeClass('active');
            $('body').removeClass('mini-sidebar');
        });

        styleSwitcherWrap.append(
            $('<hr/>'),
            $('<div/>').addClass('options-link sidebarOpt visible-lg').append(
                $('<h6/>').html('Side Bar Width'),
                sideMiniLink,
                sideMaxiLink,
                sideAffixLink
            )
        );

        var resetLink = $('<a/>')
            .html('Reset')
            .attr('href', '#')
            .on('click', function (e) {
                e.preventDefault();
                $this.reset();
            });

        var cssLink = $('<a/>')
            .html('Get CSS')
            .attr('href', '#').on('click', function (e) {
                e.preventDefault();
                $this.getCss();
            });

        styleSwitcherWrap.append(
            $('<div/>').addClass('options-link').append(
                $('<hr/>'),
                resetLink,
                cssLink
            )
        );

        switchDiv.append(h5, styleSwitcherWrap);
        $('body').append(switchDiv);

        $this.colorSelectorA = $('#colorSelectorA');
    },
    setColor: function (color) {
        $('#colorSelector').data('color', color);
        $('#colorSelectorA').css('background-color', color);
        less.modifyVars({'@baseColor': color});
        if (Modernizr.localstorage) {
            localStorage.color = color;
        }
    },
    reset: function () {
        if (Modernizr.localstorage) {
            localStorage.removeItem('color');
            localStorage.removeItem('layout');
            localStorage.removeItem('pattern');
        }
        $('#wideLink').click();
        window.location.reload();
        return false;
    },
    getCss: function () {
        var $this = this;
        var raw = "", options;
        var isBoxed = $('body').hasClass('fixed');

        var cssBeautify = $('#cssbeautify');
        if (isBoxed) {
            raw = 'body { background-image: url("../img/pattern/' + $this.patternImage + '.png"); }';
            $('#boxedBodyAlert').removeClass('hide');
        } else {
            $('#boxedBodyAlert').addClass('hide');
        }
        cssBeautify.text("");
        raw = raw + $('style[id^="less:"]').text();
        options = {
            indent: "\t",
            autosemicolon: true
        };
        cssBeautify.text(cssbeautify(raw, options));
        $("#getCSSModal").modal("show");
    }
};

styleSwitcher.init();
