var bgHex = '';
var designHex = '';
var variantPath = '';

$(document).ready(function () {
    $('ul.tabs li:last-child').addClass('last');

    $('.two-colour-options .selection li').each(function (e, i) {
        var $this = $(this);
        $this.css('background-color', '#' + $this.data('hex'));
    }).bind('click', function () {

        var $this = $(this);
        var $preview = $('#productPreview');

        var id = $this.data('id');
        hex = $this.data('hex');
        var type = $this.data('type');
        var name = $this.attr("title");

        if (variantPath == '') {
            errorPopup('<p>Please select a variant before making a colour choice.</p>');
        }
        else {
            if (type == "bg") {
                $('#SelectedBackgroundColour').val(id);
                $('img', $preview).attr('src', variantPath + hex + '.png');
                bgHex = hex;
                $("p.bg").html(name);
            }
            if (type == "design") {
                $('#SelectedDesignColour').val(id);
                $('#productPreview').css('background-color', '#' + hex);
                designHex = hex;
                $("p.dsg").html(name);
            }
        }
    });

    $('.samples-list .results li').bind('click', function (event) {
        var $this = $(this);
        $('#SelectedVariantId').val($this.data('variantId'));
        variantPath = $this.data('folder') + 'etches/' + $this.data('variantId') + '/';

        var $preview = $('#productPreview');
        var twoColour = $preview.hasClass('two-colour');

        var src = $('img', $this).data('largerImage');

        if (twoColour && bgHex != "" && designHex != "") {
            src = $this.data('folder') + 'etches/' + $this.data('variantId') + '/' + designHex + '.png';
        }

        $preview.css('background', '#fff');
        $('#imagePreview', $preview).attr('src', src);

        //title
        if ($this.attr('title')) {
            $('#variantText').html($this.attr('title'));
        }

        //index
        console.log($('.icon-enlarge a', $preview));
        if ($('.icon-enlarge a', $preview)) {
            console.log($this.data('idx'));
            $('.icon-enlarge a', $preview).attr('data-idx', $this.data('idx'));
        }
    });
});