var clone = function(o){return jQuery.extend(true, o.length?[]:{}, o);}

var VariationManager = function(el, data){
    var vm = this;
    
    vm.init = function(el, data){
        vm.data = data;
        vm.prepare_data();
        vm.el = {};
        vm.el.container = $(el);
        vm.sku = '';
        vm.variation = null;
        vm.selected = {};
        jQuery.each(vm.data.options, function(){
            vm.selected[this.name] = null;
        });
        vm.el.container.html('');
        vm.build_options(0);
        return vm;
    };                
    
    vm.prepare_data = function(){
        jQuery.each(vm.data.values, function(i){
            var value = this;
            jQuery.each(vm.data.options, function(j){
                var option = this;
                if (value.option == option.pk){
                    value.option = vm.data.options[j];
                    if (!option.values){option.values=[]};
                    option.values.push(vm.data.values[i]);
                };
            });
        });
        jQuery.each(vm.data.variations, function(){
            var variation = this;
            variation.dictValues = {};
            jQuery.each(variation.values, function(i){
                var varValue = this;
                jQuery.each(vm.data.values, function(j){
                    var value = this;
                    if (varValue == value.pk){
                        variation.values[i] = vm.data.values[j];
                        variation.dictValues[value.option.name] = variation.values[i];
                    };
                });
            });
        });
    };
    vm.get_sku = function(){
        var foundSKU = false;
        jQuery.each(vm.data.variations, function(){
            if (!foundSKU) {
                var variation = this;
                var pass = true;
                jQuery.each(variation.values, function(){
                    var varValue = this;
                    if (vm.selected[varValue.option.name] != varValue.value) {
                        pass = false;
                    }
                });
                if (pass) {
                    foundSKU = variation.sku;
                };
            };
        });

        return foundSKU;
    };
    vm.update = function() {
        vm.sku = vm.get_sku();
        if (vm.sku) {
            vm.variation = vm.data.variations[vm.sku];
            if (vm.variation.in_stock) {
                vm.el.sku_field.val(vm.sku);
                vm.el.out_of_stock.hide();
                vm.el.buy_btn.show();
                if (vm.variation.price) {
                    vm.el.price_field.val(vm.variation.price);
                    vm.el.price_range.text("$" + vm.variation.price);
                }
            } else {
                vm.el.buy_btn.hide();
                vm.el.out_of_stock.find('a').attr('href', vm.variation.signup_link);
                vm.el.out_of_stock.show();
            };
        } else {
            vm.variation = null;
            vm.el.out_of_stock.hide();
            vm.el.buy_btn.hide();
        };
    };
    vm.option_changed = function(optIndex) {
        jQuery.each(vm.data.options, function(i){
            var opt = this;
            if (i > optIndex) {
                vm.selected[opt.name] = null;
            } else {
                if (vm.selected[opt.name] == null) {
                    optIndex--;
                };
            };
        });
        if (optIndex + 1 < vm.data.options.length) {
            vm.el.container.html('');
            vm.build_options(optIndex + 1);
        };
        vm.update();
    };
    vm.build_options = function(up_to) {
        var i = 0;
        jQuery.each(vm.data.options, function(){
            var j = i;
            if (i <= up_to) {
                var opt = this;
                var optDiv = jQuery('<div/>')
                    .addClass('product_option');
                var optLabel = jQuery('<label>')
                    .attr('for', opt.name)
                    .html(opt.name)
                    .appendTo(optDiv);
                var optSelect = jQuery('<select/>')
                    .attr('name', opt.name)
                    .appendTo(optDiv);
                optSelect.append('<option value="0">choose...</option>');
                jQuery.each(vm.get_values(opt, i), function(){
                    var val = jQuery('<option/>')
                        .attr('value', this.value)
                        .html(this.value)
                        .appendTo(optSelect);
                    if (vm.selected[opt.name] == this.value) {
                        val.attr('selected', 'selected');
                    };
                });
        
                optSelect.change(function(){
                    var optVal = optSelect.val();
                    if (optVal == '0') { optVal = null; };
                    vm.selected[opt.name] = optVal;
                    vm.option_changed(j);
                });
        
                optDiv.appendTo(vm.el.container);
            };
            i++;
        });
    };
    
    vm.get_values = function(option, optIndex) {
        var available_values = [];
        if (optIndex > 0) {
            jQuery.each(vm.data.variations, function(){
                var variation = this;
                var pass = true;
                jQuery.each(vm.selected, function(key){
                    var selectedVal = vm.selected[key];
                    if (selectedVal != null) {
                        if (variation.dictValues[key].value != selectedVal) {
                            pass = false;
                        };
                    };
                });
                if (pass) {
                    var optVal = variation.dictValues[option.name];
                    var pass = true;
                    if (jQuery.inArray(optVal, available_values) >= 0) {
                        pass = false;
                    };
                    if (pass) {
                        available_values.push(optVal);
                    };
                };
            });
        } else {
            available_values = option.values;
        };
        return available_values;
    };
    
    return vm.init(el, data);
};


$(document).ready(function(){
    
    $('#hero-nav a')
        .click(function(){
            var link = $(this);
            var img = $('#hero-section img');
            if (link.attr('href') != img.attr('src')) {
                img.stop(true, false)
                .animate({'opacity': 0}, { duration: 'slow', complete: function(){
                    img
                        .attr('src', link.attr('href'))
                        .attr('alt', link.find('img').attr('alt'))
                        .css({'opacity': 0})
                        .load(function(){
                            $(this).animate({'opacity': 1}, 'slow');
                        });
                }});
            };
            return false;
        });
});