<!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 : Curtain Simulation </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>

                    {% if user.is_anonymous %}
 <center>
<br><br>
2015年１月26日　 AM　10：00 ～12：00 （　120 分間　）<br>
メンテナンス中<br>
しばらくお待ち下さい<br><br>
</center>

                    {% else %}
	<body><!-- oncontextmenu="return false" onselectstart="return false">-->
		<div id='globalContainer'>
			<div id="helperGroup">
				<div id="helperLayer_1" class="helperLayer">
						<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">
						<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" 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>-->
					<!--div id="helppage_btn">&gt;&gt;使用法はこちら</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'>
						<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>
							{% else %}
							<div id='Upload' class='unSelDiv help' style="display:none;"></div>
							{% endif %}
						</div>
						<div id='mainSelector' class='underSelectorDivBottom'>
							<div id='theSelectorTop' class='choiceSelectorBar'></div>	
							<div id='theSelectorBottom' class='theSelectorBottom'>
								<div class='productItem null'></div>						
							</div>
            <div id="selectorPages" class="selectorPages">
								<div class="helperMarquee" id="helperMarquee_1">お好みの窓タイプを左画面にドラッグ＆ドロップしてください。</div>
								<div class="helperMarquee" id="helperMarquee_2" style="display:none;">お好みの生地を上画面にドラッグ＆ドロップしてください。<br>虫眼鏡マークをクリックすると生地の詳細情報を表示します。</div>
							<div class="wrap"></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;
			
			$(form).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;
		}
		
		// 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(){setFabrics(level1)});
						});		
					},
					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(){
				wv.globalCategory = 0;
				wv.selectedBtn(warePic);
				
				$('.finalFabricSuperCategory').hide();
				$('.finalFabricCategory').hide();
				$('#finalProductCategory').show();
				
				$('#helperLayer_2').hide();
				$('#helperMarquee_2').hide();
				$('#mainSelector .selectorPages').css("margin-top","34px");
				$('#helperLayer_1').show();
				$('#helperMarquee_1').show();
				if (getCookie("event20141004") == "done") {
						$(function(){
								$(".helperLayer").hide();
						});
				}
				//wv.warePicImage(1);
				wv.parseProducts(wv.productCategory, 1);
				wv.setUploader($('#Upload'));
			});
			wareImage.click(function(){
				$('#innerBelongings').empty();
				wv.selectedBtn(wareImage);
				wv.warePicImage(2);
				wv.fabricCategoryId = 0;
			});
			
			function setFabrics(arg){
				wv.globalCategory = 0;
				wv.selectedBtn(arg);
				/*
				if ($('#finalFabricSuperCategory',arg).length > 0){
					$('#finalProductCategory').hide();
					$('#finalFabricSuperCategory').show();
					$('#finalFabricCategory').show();
					wv.parseFabrics($('.choiceFabricSelector.selected', finalFabricCategory).data('categoryId'));
					alert('hier');
				} else {
				*/
					$('#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();
                }
            });



	$('#helppage_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='ss.jpg' class='helpImg page1' />").appendTo(viewer);
                
                
                helpImag1.show();
                arrowBtnRight.addClass('enabled');
                
                function removeViewer() {
                 $('#helpViewer_background').remove();
                 $('#helpViewer_mask_wrapper').remove();
                }
            });
		});	
	</script>
	</body>
                    {% endif%}	
                
                    
</html>