<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>KEYUCA</title>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js'></script>
    <script type='text/javascript' src='/media/js/fh.viewer.js'></script>
    <script type='text/javascript' src='/media/js/w3d.common.js'></script>
    <script type='text/javascript' src='/media/js/fileuploader.js'></script>
    <script type="text/javascript" src="/media/js/jquery/jquery.event.drag-2.2.js"></script>
    <script type="text/javascript" src="/media/js/jquery/jquery.event.drag.live-2.2.js"></script>
    <script type="text/javascript" src="/media/js/jquery/jquery.event.drop-2.2.js"></script>
    <script type="text/javascript" src="/media/js/jquery/jquery.event.drop.live-2.2.js"></script>
    <script type="text/javascript" src="/media/js/excanvas.min.js"></script>
    <link rel='stylesheet' href='/media/css/pages/viewer.css' />
</head>

<body>
    <!-- oncontextmenu="return false" onselectstart="return false">-->
    <div id='globalContainer'>
        <div id="helperGroup">
            <!-- <div id="helperLayer_1" class="helperLayer hide">
                <img src="/media/image/Viewer/model.png" id="modelImg">
                <div id="helperContainer_1" class="helperContainer">窓タイプを選択し、左画面にドラッグ＆ドロップしてください。</div>
                <div id="helperBottom_1" class="helperBottom">
                    <div id="helperClose_1" class="helperClose">
                        <span style="padding-top: 2px;" onclick="checkFunc()">以後表示しない</span>
                        <span style="padding-right: 0px; padding-left: 0px;">
												<input type="checkbox" id="popupCheck" style="vertical-align:middle;">
										</span>
                        <span style="padding-top: 2px;" onclick="closePopup(1)">閉じる</span>
                        <span>
												<img align="absmiddle" onclick="closePopup(1)" src="/media/image/Viewer/close.png">
										</span>
                    </div>
                </div>
            </div>
            <div id="helperLayer_2" class="helperLayer hide">
                <img src="/media/image/Viewer/fabric.png" id="fabricImg">
                <div id="helperContainer_2" class="helperContainer">上画面のタブで変更する部分を選択し、お好みの生地をドラッグ＆ドロップしてください。</div>
                <div id="helperBottom_2" class="helperBottom">
                    <div id="helperClose_2" class="helperClose">
                        <span style="padding-top: 2px;" onclick="checkFunc()">以後表示しない</span>
                        <span style="padding-right: 0px; padding-left: 0px;">
												<input type="checkbox" id="popupCheck" style="vertical-align:middle;">
										</span>
                        <span style="padding-top: 2px;" onclick="closePopup(2)">閉じる</span>
                        <span>
												<img align="absmiddle" onclick="closePopup(2)" src="/media/image/Viewer/close.png">
										</span>
                    </div>
                </div>
            </div> -->
            <!--div id="helperLayer_3" class="helperLayer">
						<div class="helperContainer">
						</div>
				</div-->
        </div>
        <div id='title'>
            <div class='title'>
                <div class='title_name'></div>
                <div class='title_image'>
                    <a href="http://www.keyuca.com/"><img src="http://www.keyuca.com/wp-content/themes/KEYUCA/images/logo.gif" width="106" height="19" alt="KEYUCA -インテリアショップ ケユカ-"></a>
                    <br><font face="メイリオ" size="1">※画面上に表示される生地画像は、実際の生地の色とは多少の違いが生じます。生地の詳細は店舗で確認していただくようお願いします。</font></div>
                {% if user.is_anonymous %}
                <!--div class='login_form'>	
                        <form action="/login" id="loginForm" method="post" onsubmit='return check_login(this)'>
                            {% csrf_token %}
                            <input type='hidden' name='next' value='{{ next }}' />
                            <div style='overflow:hidden;'>
                                <input class='login_data' type="text" name="username" value="" id="username" placeholder='ID' style='width:100px;'/>
                                <input class='login_data' type="password" name="password" value="" id="password" placeholder='Password' style='width:100px;'/>
                                <input class='login_data' type="submit" value="login">
                            </div>
                        </form>
											</div-->
                {% else %}
                <div class='logged'>
                    <span>{{user.username}}さん こんにちは !</span> {% if user.userprofile.userType == 3 %}
                    <span class='move' style='margin-left:5px; border-bottom:1px solid white; cursor:hand; font-size:11px' onclick='location.href="/manager"'>manager</span> {% endif %}
                    <span class='move' style='margin-left:5px; border-bottom:1px solid white; cursor:hand; font-size:11px' onclick='location.href="/logout"'>logout</span>
                </div>
                {% endif%}

                <!--
                     <div class='logged'>
                     <span>Hello, {{user.username}}!</span>
						{% if user.userprofile.userType == 3 %}
							<span class ='move' style='margin-left:5px; border-bottom:1px solid white; cursor:hand; font-size:11px' onclick='location.href="/manager"'>manager</span>	
						{% endif %}
						<span class ='move' style='margin-left:5px; border-bottom:1px solid white; cursor:hand; font-size:11px' onclick='location.href="/logout"'>logout</span>
					</div>-->
                {% if user.userprofile.userType == 3 %}
                <div id='help_btn'></div>
                {% else %}
                <div id='help_btn' style="display:none;"></div>
                {% endif%}
            </div>
            <div id='category' class='category' style='clear:both; display:none;'>
                <!--
					<div>
						<div id='woman' class='categoryBtn selected'> Woman </div>
						<div id='man' class='categoryBtn'> Man </div>
						<div id='interior' class='categoryBtn'> Interior </div>
					</div>
					-->
            </div>
        </div>
        <div id='midBlock' style='clear:both'>
            <div id='mainImage' class='midBlockDiv mainImage'>
                <!--
						style="background-image:url('/media/data/77.jpg');">
						<img src='/media/data/02_001.png' style='width:100%; opacity:0.8;'/>-->
            </div>
            <div id='selector' class='midBlockDiv selector'>
                <div class='uppperSelector' style="display:none;">
                    <!--<div class='uppperSelector'>-->
                    <div id='upperSelectorDivLeft' class='mainImage'></div>
                    <div id='upperSelectorDivRight' class='upperSelectorDiv right'>
                        <div id='layers'></div>
                        <div id='belongings' class='gridsGroups'>
                            <div id='innerBelongings' class='innerGridsGroups'></div>
                            <div id='targetPages' class='targetPages'></div>
                        </div>
                    </div>
                </div>
                <div class='underSelector'>
                    <div class='underSelectorDivTop'>
                        <div id='theSelectorMenu' class='unSelDiv threeBtn'>
                            <div id='warePic' class='selectorMenu selected'>窓タイプ</div>
                            <!--<div id='material1' class='selectorMenu'>fabric1</div>-->
                        </div>
                        {% if user.userprofile.userType == 3 %}
                        <!--<div id='Upload' class='unSelDiv help'></div>-->
                        <div id='Upload' class='unSelDiv help' style="display:none;"></div>
                        {% else %}
                        <div id='Upload' class='unSelDiv help' style="display:none;"></div>
                        {% endif %}
                    </div>
                    <div id="searchContainer" class="hide">
                        <form id="searchPanel">
                            <table class="searchTable">
                                <tr class="hide">
                                    <th>category</th>
                                    <td>
                                        <input type="checkbox" name="fabric_category" id="cat6" value="0">
                                        <input type="checkbox" name="fabric_category" id="cat7" value="0">
                                    </td>
                                </tr>
                                <tr class="search-composition">
                                    <th>シリーズ</th>
                                    <td>
                                        <label>
                                            <input type="checkbox" name="fabric_price" value="7000">7,000</label>
                                        <label>
                                            <input type="checkbox" name="fabric_price" value="10000">10,000</label>
                                        <!-- <label class="search-id-6">
                                            <input type="checkbox" name="fabric_price" value="12000">12,000</label> -->
                                        <label>
                                            <input type="checkbox" name="fabric_price" value="15000">15,000</label>
                                    </td>
                                </tr>
                                <tr class="search-composition">
                                    <th>機能</th>
                                    <td>
                                        <div class="search-id-6">
                                            <label>
                                                <input type="checkbox" name="fabric_function" value="0">遮光1~3級</label>
                                            <label>
                                                <input type="checkbox" name="fabric_function" value="1">完全遮光</label>

                                        </div>
                                        <label>
                                            <input type="checkbox" name="fabric_function" value="2">遮熱</label>
                                        <label>
                                            <input type="checkbox" name="fabric_function" value="3">防炎</label>
                                        <div class="search-id-7">
                                            <label>
                                                <input type="checkbox" name="fabric_function" value="4">UVカット</label>
                                            <label>
                                                <input type="checkbox" name="fabric_function" value="5">ミラー</label>
                                            <label>
                                                <input type="checkbox" name="fabric_function" value="6">遮像</label>
                                            <label>
                                                <input type="checkbox" name="fabric_function" value="7">シームレス</label>
                                            </label>
                                        </div>
                                    </td>
                                </tr>

                                <tr class="search-composition">
                                    <th>イメージ</th>
                                    <td>
                                        <label>
                                            <input type="checkbox" name="fabric_image" value="0">シンプル</label>
                                        <label>
                                            <input type="checkbox" name="fabric_image" value="1">ナチュラル</label>
                                        <label>
                                            <input type="checkbox" name="fabric_image" value="2">エレガンス</label>
                                        <label>
                                            <input type="checkbox" name="fabric_image" value="3">クラシック</label>
                                        <label>
                                            <input type="checkbox" name="fabric_image" value="4">カジュアル</label>
                                        <br>
                                        <label>
                                            <input type="checkbox" name="fabric_image" value="5">モダン</label>
                                        <label>
                                            <input type="checkbox" name="fabric_image" value="6">キッズ</label>
                                        <label>
                                            <input type="checkbox" name="fabric_image" value="7">ノルディック</label>
                                    </td>
                                </tr>
                                <tr class="search-composition search-id-6">
                                    <th>色</th>
                                    <td>
                                        <label>
                                            <input type="checkbox" name="fabric_color" value="0">ホワイト系</label>
                                        <label>
                                            <input type="checkbox" name="fabric_color" value="1">ベージュ系</label>
                                        <label>
                                            <input type="checkbox" name="fabric_color" value="2">ブルー系</label>
                                        <label>
                                            <input type="checkbox" name="fabric_color" value="3">グリーン系</label>
                                        <label>
                                            <input type="checkbox" name="fabric_color" value="4">イエロー系</label>
                                        <br>
                                        <label>
                                            <input type="checkbox" name="fabric_color" value="5">レッド系</label>
                                        <label>
                                            <input type="checkbox" name="fabric_color" value="6">グレー系</label>
                                        <label>
                                            <input type="checkbox" name="fabric_color" value="7">ブラウン系</label>
                                    </td>
                                </tr>
                                <tr class="search-number">
                                    <th>品番</th>
                                    <td>
                                        <input type="text" name="fabric_number" placeholder="enter the keyword">
                                    </td>
                                </tr>
                            </table>
                            <div class="search-button">
                              <button id="btnReset" type="button">リセット</button>
                              <button id="btnSearch" type="button">検索</button>
                            </div>
                        </form>
                        <div id="searchResult" class="hide">
                            여기에 결과 들어감.
                        </div>
                    </div>
                    <div id='mainSelector' class='underSelectorDivBottom'>
                        <div id='theSelectorTop' class='choiceSelectorBar'></div>
                        <div id='theSelectorBottom' class='theSelectorBottom'>
                            <div class='productItem null'></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id='footer' style='clear:both;'>
            <!--<div class='sendmailBtn'>mailtest</div>-->
        </div>
    </div>
    <script type='text/javascript'>
        function check_login(form) {
            var email = $("input[name='username']", form).val();
            var passwd = $("input[name='password']", form).val();

            if (!email || !passwd) return false;

            $('#loginForm').ajaxSubmit('POST', 'json', function (json) {
                if (json['success']) {
                    location.href = '/';
                } else {
                    switch (json['reason']) {
                    case 'InvalidIdPasswd':
                        alert('IDまたはパスワードが正しくありません。');
                        passwd.val('');
                        passwd.focus();
                        break;
                    case 'UnderValidation':
                        alert('入力されたアカウントは現在Eメール認証手続きを経ていません。\n登録されたメールに送信された認証メールを介して認証手続きを経てください。');
                        break;
                    default:
                        alert('ページの再読込み後、再度お試しください。');
                        break;
                    }
                }
            });
            
            return false;
        }
        $("input[name='fabric_number']").keypress(function(event) {
            if (event.which == 13) {
                event.preventDefault();
                $("#btnSearch").click();
                return false;
            }
        });
//        $("input").on("click keyup", function (e) {
//                $("#btnSearch").click();
//        });
        // set Key Handler
        wv.setKeydownHandler();

        $(document).ready(function () {
            var idList = [];
            var titleId = 0;
            var selector = $('.title_name');
            $.ajax({
                url: '/manager/product/category/getlist',
                type: 'POST',
                cache: false,
                data: {
                    CID: 0
                },
                dataType: 'xml',
                async: false,
                success: function (xml) {
                    var categoryList = $('Records', $(xml));
                    selector.empty();
                    $('Record', categoryList).each(function (i) {
                        var categoryId = $(this).attr('ID');
                        idList.push(categoryId);
                        var categoryName = $(this).attr('Name');
                        var orderValue = $(this).attr('OrderValue');
                        var button = $("<div class='title_name_item' style='display:none;'>" + categoryName + "</div>").appendTo(selector);
                        button.data('categoryId', categoryId);
                        button.data('categoryName', categoryName);
                        //$("<div style='font-size:15; color:#C1CDCD; float: left; padding: 5px 0px 0px 5px;'>|</div>").appendTo(selector);
                        /*
                        button.click(function(){
                        	wv.setCategory(this);
                        });
                        */
                    });
                    titleId = idList[0];
                    /*
                    $('.categoryBtn:first').addClass('selected');
                    wv.categoryId = idList[0];
                    wv.warePicImage(1);*/
                    //wmf.selectCategory(form, selectedId);
                },
                error: function () {

                }
            });

            var idList = [];
            var selector = $('#category');
            $.ajax({
                url: '/manager/product/category/getlist',
                type: 'POST',
                cache: false,
                data: {
                    CID: titleId
                },
                dataType: 'xml',
                async: false,
                success: function (xml) {
                    var categoryList = $('Records', $(xml));
                    selector.empty();
                    $('Record', categoryList).each(function (i) {
                        var categoryId = $(this).attr('ID');
                        idList.push(categoryId);
                        var categoryName = $(this).attr('Name');
                        var orderValue = $(this).attr('OrderValue');
                        var button = $("<div class='categoryBtn'>" + categoryName + "</div>").appendTo(selector);
                        button.data('categoryId', categoryId);
                        button.data('categoryName', categoryName);
                        //$("<div style='font-size:15; color:#C1CDCD; float: left; padding: 5px 0px 0px 5px;'>|</div>").appendTo(selector);
                        button.click(function () {
                            wv.globalCategory = 1;
                            wv.setCategory(this);
                        });
                    });
                    $('.categoryBtn:first').addClass('selected');
                    wv.categoryId = idList[0];
                    wv.globalCategory = 1;
                    wv.warePicImage(1);
                    //wmf.selectCategory(form, selectedId);
                },
                error: function () {

                }
            });

            wv.setCategory = function (object) {
                //alert(titleId);
                //wv.setViewer(category='woman', input='#theSelector', '{{ user.id }}');
                $('.categoryBtn').removeClass('selected');
                $(object).addClass('selected');
                $('.selectorMenu').removeClass('selected');
                $('.selectorMenu:first').addClass('selected');
                var id = $(object).data('categoryId');
                wv.categoryId = id;
                //wv.parseProducts(id, 1);
                $('#theSelectorTop').empty();
                wv.warePicImage(1);
            };

            var warePic = $('#warePic');
            var wareImage = $('#wareImage');
            (function () {
                $.ajax({
                    url: '/manager/fabric/category/getlist',
                    type: 'POST',
                    cache: false,
                    data: {
                        level: 1
                    },
                    dataType: 'xml',
                    async: false,
                    success: function (xml) {
                        var categoryList = $('Records', $(xml));
                        $('Record', categoryList).each(function (i) {
                            var categoryId = $(this).attr('ID');
                            var categoryName = $(this).attr('Name');
                            var orderValue = $(this).attr('OrderValue');
                            var level1 = $("<div id='" + categoryId + "' class='selectorMenu'>" + categoryName + "</div>");
                            level1
                                .appendTo("#theSelectorMenu")
                                .click(function (e, op) {
                                    wv.saveCategory();
                                    setFabrics(level1);
                                    wv.loadCategory();
                                    if (op != 1) $('.layers.' + i).trigger("click", [1]);
                                    document.getElementById("searchPanel").reset();
                                    $('#searchResult').addClass('hide').empty();
                                    $('#searchContainer').removeClass().addClass('search-for-'+ categoryId);
                                    $('#mainSelector').css("height", 753 - $(".underSelectorDivTop").height() - $("#searchContainer").height());
                                    $('#theSelectorBottom').css("height", 661-$("#searchContainer").height());
                                    $("input:checkbox[name='fabric_category']").removeAttr("checked");
                                    
                                    
                                    if ($("#cat" + categoryId).val()=='0'){
                                          var checkIdAll = $(".finalFabricCategory>.choiceFabricSelector").filter(function(){ return $(this).text() === 'ALL';}).attr("id");
                                          //var checkIdAll = $(".finalFabricCategory>.choiceFabricSelector:contains('ALL')").attr("id");
                                          $("#cat" + categoryId).attr("checked", true).val(checkIdAll);
                                    }else{
                                          $("#cat" + categoryId).attr("checked", true);
                                    }
                                    
                                    //$("#cat" + categoryId).attr("checked", true);
                                });
                        });
                    },
                    error: function () {
                        alert('Loading category list has Failed');
                    }
                });
            })();

            //wv.selectedBtn(warePic);
            //wv.warePicImage(1);
            //wv.fabricCategoryId = 0;
            //wv.selectedBtn(warePic);
            //wv.warePicImage(1);
            warePic.click(function () {
                $('#searchContainer').addClass('hide');
                $('#mainSelector').css("height", 729);
                $('#theSelectorBottom').css("height", 695);
                wv.saveCategory();

                wv.globalCategory = 0;
                wv.selectedBtn(warePic);

                $('.finalFabricSuperCategory').hide();
                $('.finalFabricCategory').hide();
                $('#finalProductCategory').show();

                $('#helperLayer_2').hide();
                $('#helperMarquee_2').hide();
                $('#helperLayer_1').show();
                $('#helperMarquee_1').show();
                if (getCookie("event20141004") == "done") {
                    $(function () {
                        $(".helperLayer").hide();
                    });
                }


                //wv.warePicImage(1);
                wv.parseProducts(wv.productCategory, 1);
                wv.setUploader($('#Upload'));

                wv.loadCategory();
            });
            wareImage.click(function () {
                $('#innerBelongings').empty();
                wv.selectedBtn(wareImage);
                wv.warePicImage(2);
                wv.fabricCategoryId = 0;
            });

            function setFabrics(arg) {
                wv.globalCategory = 0;
                wv.selectedBtn(arg);

                $('#helperLayer_1').hide();
                $('#helperMarquee_1').hide();
                $('#mainSelector .selectorPages').css("margin-top", "0px");
                $('#helperLayer_2').show();
                $('#helperMarquee_2').show();
                if (getCookie("event20141004") == "done") {
                    $(function () {
                        $(".helperLayer").hide();
                    });
                }



                $('.finalFabricSuperCategory').remove();
                $('.finalFabricCategory').remove();
                wv.supermaterial(arg);
            }


            wv.setUploader($('#Upload'));

            $('#Upload').click(function () {
                if ($('#warePic').hasClass('selected')) {
                    alert('please login or select fabric category.');
                    return false;
                }
                //alert(wv.fabricCategoryId);
            });

            wv.selectedBtn = function (option) {
                $('.selectorMenu').removeClass('selected');
                option.addClass('selected');
            };

            jQuery(function ($) {
                $(document)
                    .on("click", ".fabricItem.user .viewerBtn", function () { //:not(.null)
                        var fabricItem = $(this).parent('.fabricItem_image').parent('.fabricItem');
                        wv.showMyFabric(fabricItem.data('path'), parseInt(fabricItem.data('width')), parseInt(fabricItem.data('height')));
                    })
                    .on("click", ".fabricItem.manager .viewerBtn", function () { //:not(.null)
                        var fabricItem = $(this).parent('.fabricItem_image').parent('.fabricItem');
                        wv.showMaterial(fabricItem.data('id'), fabricItem.data('path'), parseInt(fabricItem.data('width')), parseInt(fabricItem.data('height')));
                    });
            });

            $('.mainImage')
                .drop("start", function () {
                    $(this).addClass("active");
                })
                .drop(function (ev, dd) {
                    $(this).toggleClass("dropped");
                    var path = $(dd.drag).data('path');
                    var id = $(dd.drag).data('id');
                    $('#mainImage').empty();
                    $('#upperSelectorDivLeft').empty();
                    $('#mainImage').append("<img id='bigImage' src='" + path + "' style='width:100%; height:100%'/>");
                    $('#upperSelectorDivLeft').append("<img id='smallImage' src='" + path + "' style='width:100%; height:100%'/>");
                    $('#mainImage').data('id', id);
                    $('#upperSelectorDivLeft').data('id', id);
                    wv.setLayers(id);
                })
                .drop("end", function (ev, dd) {
                    $(this).removeClass("active");
                });

            $('.productItem.null')
                .drop("start", function () {
                    $(this).addClass("active");
                    $(this).append($("<div class='caret'></div>"));
                })
                .drop(function (ev, dd) {
                    if (this != dd.drag)
                        $(this).before(dd.drag);
                })
                .drop("end", function (ev, dd) {
                    $(this).removeClass("active");
                    $('.caret', this).remove();
                });
            //$.drop({ mode:"intersect" });

            $('#help_btn').click(function () {
                var maskWrapper = $("<div id='helpViewer_mask_wrapper'></div>")
                    .appendTo('body');

                $("<div id='helpViewer_mask'></div>")
                    .css('opacity', 0.9)
                    .appendTo(maskWrapper);

                var background = $("<div id='helpViewer_background'></div>")
                    .click(removeViewer)
                    .appendTo('body');

                var viewer = $("<div id='helpViewer'></div>")
                    .appendTo(background)
                    .click(function (e) {
                        e.stopPropagation();
                    });

                var helpImag1 = $("<img src='/media/image/viewer/help-1.jpg' class='helpImg page1' />").appendTo(viewer);
                var helpImag2 = $("<img src='/media/image/viewer/help-2.jpg' class='helpImg page2' />").appendTo(viewer);

                var arrowBtnLeft = $("<div class='arrowBtn left'></div>")
                    .appendTo(viewer);
                var arrowBtnRight = $("<div class='arrowBtn right'></div>")
                    .appendTo(viewer);

                arrowBtnLeft.click(function () {
                    if (arrowBtnLeft.hasClass('enabled')) {
                        helpImag2.hide();
                        arrowBtnLeft.removeClass('enabled');
                        arrowBtnRight.addClass('enabled');
                        helpImag1.show();
                    } else {
                        return false;
                    }
                });
                arrowBtnRight.click(function () {
                    if (arrowBtnRight.hasClass('enabled')) {
                        helpImag1.hide();
                        arrowBtnRight.removeClass('enabled');
                        arrowBtnLeft.addClass('enabled');
                        helpImag2.show();
                    } else {
                        return false;
                    }
                });

                helpImag1.show();
                arrowBtnRight.addClass('enabled');

                function removeViewer() {
                    $('#helpViewer_background').remove();
                    $('#helpViewer_mask_wrapper').remove();
                }
            });
        });
    </script>
    <div id='loadingMask' class="ajax-loading" style="display:none;">
        <div class='uil-ripple-css' style='-webkit-transform:scale(0.6)'>
            <div></div>
            <div></div>
        </div>
    </div>
    <div id='loadingMaskText' class="ajax-loading" style="display:none;">
        <p>검색이 진행 중 입니다</p>
    </div>
</body>

</html>