$(function () {
    currentPanel = $('div.moveritem.prod:first');
    updateGSColorSelects();
    window.onbeforeunload = function () {
        if (document.warnLeave) return 'Your item has not been saved to the cart, are you sure you want to leave?';
    };
    $('div#saving').ajaxSend(function (e, req, opt) {
        var $t = $(this).show();
        var $s = $t.find('span');
        switch (opt.url) {
            case '/Customize/SaveProductAjax':
                $s.text('Saving your product selections...');
                break;
            case '/Customize/SaveDesignAjax':
                $s.text('Saving your changes...');
                break;
            case '/Customize/SaveProduct':
            case '/Customize/SaveDesign':
                $s.text('Saving...');
                break;
            case '/Customize/AddRecommendedService':
            case '/Customize/AddService':
                $s.text('Adding a design to this item...');
                break;
            case '/Customize/RemoveJobService':
                $s.text('Removing a design...');
                break;
            case '/Customize/RemoveJobProduct':
                $s.text('Removing a product...');
                break;
            case '/Customize/AddProduct':
                $s.text('Adding another product...');
                break;
            case '/Customize/MascotSelectPopup':
            case '/Customize/MascotSelectList':
            case '/Customize/ProductList':
            case '/Customize/DesignList':
            case '/File/GetUploadData':
                $t.hide();
                break;
            default:
                $s.text('Saving...');
        }
    }).ajaxComplete(function (e, req, opt) {
        $(this).hide();
    });
    initVinylKitWizard(
    {
        codeSelected: function (code) {
            $('#vk_style').show();
            $('#vk_name, #vk_number').hide();
            $('#vinylKitWizardPopup').hideModal();
            var $pnl = $('#vinylKitWizardPopup').data('panel');
            var $frm = $pnl.find('form.serv:first');
            $frm.find('input[name=code]').remove();
            var $code = $('<input name="code" id="code" type="hidden"/>').val(code);
            $frm.append($code);
            $.ajaxJson({
                url: '/Customize/DesignCode',
                form: $frm,
                success: function (data, status, req) {
                    processAllPanels(data);
                },
                error: function () {
                    alert('Sorry, the kit combination you have chosen is not offered.');
                }
            });
        },
        redraw: function () {
            $('#vinylKitWizardPopup').updateModal();
        }
    });
    $('ul.altImages li img').live('click', function () {
        var url = $(this).attr('data-url');
        var $pnl = $(this).parents('div.moveritem:first');
        $pnl.find('img.prodImg').attr('src', url);
    });
    $('button.showVinylKitWizard').live('click', function () {
        $('#vinylKitWizardPopup').showModal();
        $('#vinylKitWizardPopup').updateModal();
        $('#vinylKitWizardPopup').data('panel', $(this).parents('div.moveritem:first'));
    });
    $('input.servSearch').live('keydown', function (e) {
        if (e.keyCode == 13) {
            var $pnl = $(this).parents('div.moveritem:first');
            var $fs = $pnl.find('div.filmstrip:first');
            $fs.data('index', 0);
            updateDesignFilmstrip($fs);
            return false;
        }
    });
    $('input[name=uploader]').initFileUpload({
        success: function (data) {
            var $pnl = $uploader.parents('div.moveritem');
            $pnl.find('div.guidelines, div.uploader').hide();
            $pnl.find('div.transparency').show();
        },
        error: function (data) {
        }
    });
    $('button.servCodeSearch').live('click', function () {
        var $pnl = $(this).parents('div.moveritem:first');
        var $fs = $pnl.find('div.filmstrip:first');
        $fs.data('index', 0);
        updateDesignFilmstrip($fs);
        return false;
    });
    $('button.share').live('click', function () {
        var $frm = $(this).parents('form:first');
        var $pnl = $(this).parents('div.moveritem');
        prepForm($frm);
        $.ajaxJson({
            url: '/Customize/SaveDesign',
            form: $frm,
            success: function (data, status, req) {
                var frmId = $frm.attr('id');
                processAllPanels(data);
                $pnl.find('div.sharePopup:first').showModal();
            }
        });
    });
    $('a.addOption').live('click', function () {
        var st = $(this).attr('data-st');
        var jobId = $('input#JobId').val();
        var otid = $('input#ComboDealId').val();
        $.ajaxJson({
            url: '/Customize/AddService',
            data: {
                jobId: jobId,
                type: st,
                otid: otid
            },
            success: function (data, status, req) {
                processAllPanels(data);
            }
        });
    });

    jqueryLiveDoesntWork();

    $('div.filmstrip.prod li').live('click', function () {
        var $li = $(this);
        var pcid = $li.find('a:first').attr('rel');
        var $pnl = $li.parents('div.moveritem:first');
        var $frm = $pnl.find('form.prod');
        var jpid = $frm.find('input[name="Id"]:first').val();
        $frm.find('*[name="ProductColorId"]').remove();
        $('<input type="hidden" name="ProductColorId" value="' + pcid + '"/>').appendTo($frm);
        saveProduct($frm);
    });
    $('div.filmstrip.serv li').live('click', function () {
        var $li = $(this);
        var $pnl = $li.parents('div.moveritem');
        var dtid = $li.find('a:first').attr('rel');
        var $frm = $pnl.find('form.serv');
        var jpid = $frm.find('input[name="Id"]:first').val();
        var jsid = $frm.find('input[name="Id"]:first').val();
        $frm.find('input[name="DesignId"]:first').val(dtid);
        saveService($frm);
    });
    $('ul.servPnlSlct li').live('click', function () {
        var $t = $(this);
        var rel = $t.find('a').attr('rel');
        var $li = $(rel);
        $li.show().siblings('fieldset').hide();
    });
    $('a.infoButton').live('click', function () {
        var $t = $(this);
        var rel = $t.attr('rel');
        var $tab = $(rel);
        $('div.infoTab').not($tab).hide();
        $tab.show();
    });
    $('ul#tabs li').live('click', function () {
        var $t = $(this);
        if ($t.parent().length == 0 || $t.attr('id') == 'saveTab') return;
        var $a = $t.find('a:first-child');
        var id = $a.attr('rel');
        currentPanel.children('form:first');
        if (currentPanel.hasClass('serv')) {
            var $frm = currentPanel.find('form.serv');
            saveService($frm, function (data, status, req) {
                moveToPanel(id);
            });
        } else if (currentPanel.hasClass('prod')) {
            var $frm = currentPanel.find('form.prod');
            saveProduct($frm, function (data, status, req) {
                moveToPanel(id);
            });
        } else {
            moveToPanel(id);
        }
    });
    $('form.prod button.next, form.prod button.prev').live('click', function () {
        var $btn = $(this);
        var $frm = $btn.parents('div.moveritem:first').find('form.prod');
        var id = $btn.attr('data-id');
        saveProduct($frm, function (data, status, req) {
            moveToPanel(id);
        });
    });
    $('form.serv button.next, form.serv button.prev').live('click', function () {
        var $btn = $(this);
        var $frm = $btn.parents('div.moveritem:first').find('form.serv');
        var id = $btn.attr('data-id');
        saveService($frm, function (data, status, req) {
            moveToPanel(id);
        });
    });
    $('a.recommendation').live('click', function () {
        var $a = $(this);
        var id = $a.attr('data-id');
        var jobId = $('input#JobId').val();
        var reqId = (new Date()).valueOf();
        var otid = $('input[name=ComboDealId]:first').val();
        document.pnlReqId = reqId;
        $.ajaxJson({
            url: '/Customize/AddRecommendedService',
            data: {
                jobId: jobId,
                id: id,
                otid: otid
            },
            success: function (data, status, req) {
                processAllPanels(data);
            }
        });
    });
    $('ul.servPnlSlct li').live('click', function () {
        var $li = $li(this);
        var rel = $li.find('a').attr('rel');
        if (rel) {
            var $tar = $(rel);
            $tar.siblings('fieldset').hide();
            $tar.show();
        }
    });
    $('button.mascotSelect').live('click', function () {
        var $btn = $(this);
        var msctId = $btn.attr('data-id') || 0;
        var dcid = $btn.attr('data-dcid');
        var $frm = $btn.parents('form:first');
        var isGS = $frm.hasClass('gs');
        var st = $frm.find('input[name="Service.ServiceType"]').val();
        var $msctPopup = $('div.mascotSelectPopup.' + st + ((isGS) ? '.gs' : ''));
        if ($msctPopup.length == 0) {
            $.ajax({
                url: '/Customize/MascotSelectPopup',
                type: 'POST',
                data: 'st=' + st + '&mascotId=' + msctId + '&isGraphicsService=' + isGS,
                dataType: 'html',
                beforeSend: function (xhr) {
                    $btn.find('div.loading').show();
                    $btn.find('div.mascot').hide();
                },
                complete: function (xhr, txtstat) {
                    $btn.find('img').attr('src', $img.data('src'));
                    $btn.find('div.mascot span:first').text($span.data('text'));
                    $btn.find('div.loading').hide();
                    $btn.find('div.mascot').show();
                },
                success: function (data, status, req) {
                    $msctPopup = $(data).appendTo($('body'));
                    $msctPopup.showModal();
                    $msctPopup.data('dcid', dcid);
                }
            });
        } else {
            $msctPopup.showModal();
            $msctPopup.data('dcid', dcid);
        }
    });
    $('div.mascotSelectPopup div.left li').live('click', function () {
        var $li = $(this);
        var $arrows = $li.find('span.graydown, span.grayright');
        if ($arrows.length > 0) {
            var $ulVis = $li.children('ul:visible');
            if ($ulVis.length > 0) {
                $ulVis.hide();
                $li.find('span.graydown').removeClass('graydown').addClass('grayright');
            } else {
                $li.children('ul').show();
                $li.find('span.grayright').removeClass('grayright').addClass('graydown');
            }
        } else {
            if ($li.children('ul').length == 0) {
                var $msPop = $(this).parents('div.mascotSelectPopup:first');
                updateMascots($(this).attr('data-id'), $msPop.attr('data-st'), $msPop.attr('data-gs'));
            }
        }
    });
    $('div.mascotSelectPopup div.left li div.sprite.grayright').live('click', function () {
        $(this).removeClass('grayright').addClass('graydown').siblings('ul').show();
    });
    $('div.mascotSelectPopup div.left li div.sprite.graydown').live('click', function () {
        $(this).removeClass('graydown').addClass('grayright').siblings('ul').hide();
    });
    $('div.mascotSelectPopup ul.mascots li').live('click', function () {
        var $pop = $('div.mascotSelectPopup');
        var dcid = $pop.data('dcid');
        var $btn = $('button#mascot' + dcid);
        var src = $(this).find('img').attr('src').replace('Search', 'Thumb');
        var name = $(this).find('span').text();
        $btn.find('div.mascot img').attr('src', src).attr('alt', name); ;
        $btn.find('div.mascot span:first').text(name);
        $btn.find('div.mascot').show();
        $btn.find('div.loading').hide();
        $('input#hdnMascot' + dcid).val($(this).attr('data-id'));
        $pop.hideModal();
        var $frm = $btn.parents('form:first');
        if ($frm.hasClass('gs')) saveService($frm);
    });
    $('button.dsgnLoc').live('click', function () {
        var $t = $(this);
        var $p = $t.data('popup');
        if (!$p) {
            $p = $(this).siblings('div.dsgnLocPopup');
            $t.data('popup', $p);
        }
        $p.data('btnLoc', $(this));
        $p.showModal();
    });
    $('div.dsgnLocPopup li').live('click', function () {
        var $t = $(this);
        var locId = $t.attr('data-id');
        var $popup = $t.parents('div.dsgnLocPopup');
        var $btn = $popup.data('btnLoc');
        var text = $t.children('div').text();
        $btn.find('span').text(text);
        $btn.find('img').each(function () {
            var $dimg = $(this);
            var pgid = $dimg.attr('data-pgid');
            $dimg.attr('src', '/Img/Loc/' + pgid + '_' + locId + '_sm.png');
        });
        var $mi = $btn.parents('div.moveritem:first');
        $('ul#tabs li a[rel="#' + $mi.attr('id') + '"]').children('span.loc').text(text);
        $btn.siblings('input.dsgnLocHdn').val(locId);
        saveService($btn.parents('form:first'));
        $popup.hideModal();
    });
    $('ul#tabs span.close').live('click', function () {
        var $t = $(this);
        var pnlid = $t.siblings('a:first').attr('rel');
        var $pnl = $(pnlid);
        var jobId = $('input#JobId').val();
        var id = $pnl.find('input[name="Id"]').val();
        var url = '/Customize/RemoveJobService';
        var mtp = currentPanel;
        if ($pnl.attr('id') == mtp.attr('id')) {
            var pnl = $pnl.prev();
            if (pnl.length == 0) {
                pnl = $pnl.next();
            }
            mtp = pnl;
        }
        $('button[data-id="#' + $pnl.attr('id') + '"]').remove();
        $t.parent().remove();
        $pnl.remove();
        moveToPanel('#' + mtp.attr('id'));
        var $prodClosers = $('ul#tabs li.product span.close');
        if ($prodClosers.length < 2) {
            $prodClosers.remove();
        }
        if ($pnl.hasClass('prod')) {
            url = '/Customize/RemoveJobProduct';
        }
        $.ajaxJson({
            url: url,
            data: { id: id },
            success: function (data, status, req) {
                processAllPanels(data);
            }
        });
    });
    $('a#addProd').live('click', function () {
        var jobId = $('input#JobId').val();
        $.ajaxJson({
            url: '/Customize/AddProduct',
            data: { jobId: jobId },
            success: function (data, status, req) {
                processAllPanels(data);
            }
        });
    });
    $('input.copyUrl').live('click', function () {
        $(this).select();
    });
});
function onDFSaved() {
    alert('saved!');
}
function moveToAddPanel() {
    moveToPanel('#addPanel');
}
function sendToCart() {
    location.href = '/Cart';
}
function moveToPanel(id) {
    var $panel = $(id);
    var $cont = $panel.parent().parent();
    var off = $panel.position();
    var $mover = $('div#mover');
    $mover.animate({ left: -off.left + 'px' }, 500);
    $cont.animate({ height: $panel.innerHeight() + 'px' }, 500);
    currentPanel = $panel;
    setCurrentTab($('ul#tabs a[rel=' + id + ']').parent());
}
function updateContainer() {
    $('div#container').height(currentPanel.innerHeight());
}
function setCurrentTab($tab) {
    $tab.siblings('.current').removeClass('current');
    $tab.addClass('current');
}
function updateGS(select) {
    var $select = $(select);
    var $frm = $select.parents('form:first');
    if ($frm.find('input.allColors:checked').length > 0) {
        var current = $select.data('current');
        $frm.find('select.dsgnColor').each(function () {
            if ($(this).val() == current) {
                $(this).val($select.val());
            }
        });
    }
    $frm.find('select.dsgnColor').each(function () {
        $(this).data('current', $(this).val());
    });
    var imgDelay = $frm.data('imgDelay')
    if (imgDelay) {
        clearTimeout(imgDelay);
        $frm.data('imgDelay', null);
    }
    $frm.data('imgDelay', $.delay(600, function () {
        $frm.data('imgDelay', null);
        saveService($frm);
    }));
}
function updateMascots(cid, st, isGS) {
    $.ajax({
        url: '/Customize/MascotSelectList',
        type: 'POST',
        data: 'cid=' + cid + '&st=' + st + '&isGraphicsService=' + isGS,
        dataType: 'html',
        success: function (data, status, req) {
            $('div.mascotSelectPopup div.right').html(data);
        }
    });
}
function addNewPanel(tabText, panelHtml, cssClass) {
    var $mover = $('div#mover');
    var $p = $(panelHtml).appendTo($mover).hide();
    var $frm = $p.find('form.serv, form.prod');
    var id = '#' + $p.attr('id');
    var $tabs = $('ul#tabs');
    var $t = $('<li class="' + cssClass + '"/>').appendTo($tabs).hide();
    var $ta = $('<a/>').appendTo($t);
    $ta.html(tabText);
    $ta.attr('rel', id);
    $('<span class="sprite close"></span>').appendTo($t);
    if ($frm.hasClass('prod')) {
        $('ul#tabs li.design').each(function () {
            $tabs.append($(this));
        });
        $('form.serv').each(function () {
            $mover.append($(this));
        });
    }
    $('#addTab').appendTo($tabs);
    $('#addPanel').appendTo($mover);
    $t.show();
    $p.show();
    var $fixBtn = $p.prev().find('button[data-id="#addPanel"]');
    $fixBtn.html(tabText);
    $fixBtn.attr('data-id', id).append($('<span class="sprite medright" />'));
    moveToPanel(id);
}
function saveProduct($frm, success) {
    prepForm($frm);
    $.ajaxJson({
        url: '/Customize/SaveProductAjax',
        form: $frm,
        success: function (data, status, req) {
            processAllPanels(data);
            if (success) success(data, status, req);
        }
    });
}
function saveService($frm, success) {
    prepForm($frm);
    $.ajaxJson({
        url: '/Customize/SaveServiceAjax',
        form: $frm,
        success: function (data, status, req) {
            processAllPanels(data);
            if (success) success(data, status, req);
        }
    });
}
function processAllPanels(data) {
    if (data.Panels) {
        for (var i = 0; i < data.Panels.length; i++) {
            var pi = data.Panels[i];
            if (pi.HtmlKey == "addPanel") {
                $('#addPanel').html(pi.PanelHtml);
            } else {
                var pnl = $('#' + pi.HtmlKey + 'panel');
                if (pnl.length == 0) {
                    addNewPanel(pi.TabNameString, pi.PanelHtml, pi.TabClass);
                } else {
                    pnl.html($(pi.PanelHtml).html());
                    $('#' + pi.HtmlKey + 'tab a').html(pi.TabNameString);
                }
            }
        }
    }
    jqueryLiveDoesntWork();
    updateContainer();
    updateGSColorSelects();
    updateDesignFactories();
}
function updateDesignFactories() {
    if (window.event) { //IE blows.
        $('div.designFactory object').each(function () {
            var $df = $(this);
            $.delay(1000, function () {
                var designId = $df.parents('form:first').find('input[name=DesignId]').val();
                var jsid = $df.parents('form:first').find('input[name=Id]').val();
                $df[0].loadDesignByJobServiceId(jsid, designId);
            });
        });
    }
}
function updateGSColorSelects() {
    $('form.gs select.dsgnColor').each(function () {
        $(this).data('current', $(this).val());
    });
}
function prepForm($frm) {
    if ($frm.hasClass('cde2')) {
        var $o = $frm.find('div.designFactory object');
        if (!$o[0].saveDesign) {
            $o = $frm.find('div.designFactory embed');
        }
        var xml = $o[0].saveDesign();
        $frm.find('input[name=DesignXml]').val(xml);
    }
}
function updateDesignColors(select) {
    var $t = $(select);
    var $pnl = $t.parents('div.moveritem:first');
    var $all = $pnl.find('select.dsgnColor');
    var $obj = $pnl.find('object');
    var $emb = $pnl.find('embed');
    var newFV;
    newFV = $emb.data('orig')
    if (!newFV) {
        var fv = $emb.attr('FlashVars');
        fv = fv.substring(0, fv.indexOf(',center,center') + 14);
        $emb.data('orig', fv);
        newFV = fv;
    }
    var mod = 1;
    $all.each(function () {
        var bgc = $(this).find('option:selected').attr('data-hex');
        newFV += ',mod' + mod++ + ':0x' + bgc;
    });
    var $distSel = $pnl.find('select.distress');
    var distVal = $distSel.val();
    if (distVal != 1) {
        newFV += ';/Swf/Distress/' + distVal + '.swf,center,center,modX:0x' + $distSel.attr('garmentColor');
    }
    var $ofv = $pnl.find('param[name=FlashVars]');
    $ofv.attr('value', newFV);
    $emb.attr('FlashVars', newFV);
    if ($obj.length > 0) {
        var newHtml = $obj.parent().html();
        $obj.parent().html(newHtml);
    } else {
        var newHtml = $emb.parent().html();
        $emb.parent().html(newHtml);
    }
}
function prodColorSelect(select) {
    if ($('#IsAddonOneColor').val().toLowerCase() === 'false' || confirm('Changing the color of this product will cause the add-on discount to be removed. Do you want to continue?')) {
        var $frm = $(select).parents('form:first');
        saveProduct($frm);
    }
}
function imageSelect(select) {
    var $sel = $(select);
    var $left = $sel.parents('div.left:first');
    $left.find('img').attr('src', $sel.val());
};
function applyProdListFilter(select) {
    var $t = $(select);
    var $fs = $t.parents('div.moveritem:first').find('div.filmstrip:first');
    updateProductFilmstrip($fs, $t);
}
function applyDsgnFilters(select) {
    var $pnl = $(select).parents('div.moveritem:first');
    var $fs = $pnl.find('div.filmstrip:first');
    $fs.data('index', 0);
    updateDesignFilmstrip($fs);
}
function updateDesignFilmstrip($fs, append) {
    var $pnl = $fs.parents('div.moveritem:first');
    var $ld = $('<p><span class="spinnerSmall"></span> Loading...</p>');
    $fs.append($ld);
    var fltrs = '';
    $pnl.find('.servFilters').each(function () {
        fltrs += '&' + $(this).val();
    });
    fltrs += '&q=' + $pnl.find('input.servSearch').val();
    if (!append) {
        $fs.data('index', 0);
        $fs.children('ul').remove();
    }
    var jobId = $('#JobId').val();
    $.ajax({
        url: '/Customize/DesignList',
        type: 'POST',
        data: 'jobId=' + jobId + fltrs + ((append) ? ('&index=' + ($fs.data('index') + 1)) : ''),
        dataType: 'html',
        complete: function () {
            $ld.remove();
        },
        success: function (data, status, req) {
            if ($(data).children().length > 0) {
                if (!append) {
                    $fs.prepend($(data));
                } else {
                    $fs.children('ul').append($($(data).html()));
                }
            }
        }
    });
}
function updateProductFilmstrip($fs, $select, append) {
    var $ld = $('<p><span class="spinnerSmall"></span> Loading...</p>');
    $fs.append($ld);
    var fltrs = $select.val();
    if (!append) {
        $fs.data('index', 0);
        $fs.children('ul').remove();
    }
    fltrs += '&pcid=' + $select.parents('div.moveritem:first').find('[name=ProductColorId]').val();
    $.ajax({
        url: '/Customize/ProductList',
        type: 'POST',
        data: fltrs + ((append) ? ('&index=' + ($fs.data('index') + 1)) : ''),
        dataType: 'html',
        complete: function () {
            $ld.remove();
        },
        success: function (data, status, req) {
            if ($(data).children().length > 0) {
                if (!append) {
                    $fs.prepend($(data));
                } else {
                    $fs.children('ul').append($($(data).html()));
                }
            }
        }
    });
}
function jqueryLiveDoesntWork() {
    $('div.moveritem.prod div.filmstrip').filmstrip({
        load: function ($fs) {
            var $pnl = $fs.parents('div.moveritem:first');
            var $s = $pnl.find('select.prodListFilter');
            updateProductFilmstrip($fs, $s, true);
        }
    });
    $('div.moveritem.serv div.filmstrip').filmstrip({
        load: function ($fs) {
            updateDesignFilmstrip($fs, true);
        }
    });
    $('form').submit(function () {
        document.warnLeave = false;
    });
}
function serviceSubmit(frm) {
    prepForm($(frm));
}
var currentPanel = null;
document.warnLeave = true;