<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

<title>LOOKNOW</title>

<link href="http://gapure.com/xduchess/assets/css/gapure_style.css" rel="stylesheet" type="text/css" />
<link href="http://gapure.com/xduchess/assets/css/gapure_style_mob.css" rel="stylesheet" type="text/css" />
<link href="http://gapure.com/xduchess/assets/css/newsin.css" rel="stylesheet" type="text/css" />
<link href="http://gapure.com/xduchess/assets/css/products.css" rel="stylesheet" type="text/css" />
<link href="http://gapure.com/xduchess/assets/css/news.css" rel="stylesheet" type="text/css" />
<link href="http://gapure.com/xduchess/assets/css/footer_guide.css" rel="stylesheet" type="text/css" />
<link href="http://gapure.com/xduchess/assets/css/footer_faq.css" rel="stylesheet" type="text/css" />
<link href="http://gapure.com/xduchess/assets/css/cart.css" rel="stylesheet" type="text/css" />
<link href="http://gapure.com/xduchess/assets/css/bag.css" rel="stylesheet" type="text/css" />
<link href="http://gapure.com/xduchess/assets/css/sweet-alert.css" rel="stylesheet" type="text/css" />
<link href="http://gapure.com/xduchess/assets/css/member.css" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css">
<link href="http://gapure.com/xduchess/assets/css/style.css" rel="stylesheet" type="text/css" />



<!--注意擺放的順序是有影響的要先載入JQ，再載入Load的function-->
<script type="text/javascript" src="http://gapure.com/xduchess/assets/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="http://gapure.com/xduchess/assets/js/jquery-ui-1.10.3.min.js"></script>

<!--ie8 Media Query-->
<script type="text/javascript" src="https://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>

<!--greensock-->
<script src="http://gapure.com/xduchess/assets/js/TweenMax.min.js"></script>
<script src="http://gapure.com/xduchess/assets/js/Draggable.min.js"></script>
<script src="http://gapure.com/xduchess/assets/js/ScrollToPlugin.min.js"></script>
<script type="text/javascript" src="http://gapure.com/xduchess/assets/js/TimelineLite.min.js"></script>
<script type="text/javascript" src="http://gapure.com/xduchess/assets/js/TimelineMax.min.js"></script>
<script type="text/javascript" src="http://gapure.com/xduchess/assets/js/easing/EasePack.min.js"></script>
<!---->
<script type="text/javascript" src="http://gapure.com/xduchess/assets/js/gapure.js"></script>
<script type="text/javascript" src="http://gapure.com/xduchess/assets/js/jquery.mobile.custom.min.js"></script>
<script type="text/javascript" src="http://gapure.com/xduchess/assets/js/carousel.js"></script>
<script type="text/javascript" src="http://gapure.com/xduchess/assets/js/sweet-alert.min.js"></script>
<script type="text/javascript" src="http://gapure.com/xduchess/assets/js/site.js"></script>
<script type="text/javascript" src="http://gapure.com/xduchess/assets/js/skrollr2.js"></script>
<script type="text/javascript" src="http://gapure.com/xduchess/assets/js/main.js"></script>

<script>

// Load the SDK asynchronously
(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

window.fbAsyncInit = function() {
    FB.init({
      appId      : '790759917638719',
      xfbml      : true,
      version    : 'v2.2'
    });
            FB.getLoginStatus(function(response) {
            if (response.status === 'connected') {
                FB.api('/me', function(response) {
                    var q = '';
                    q += '&member_type=fb';
                    q += '&email=' + response.email;
                    member.login_process = 'http://gapure.com/xduchess/tw/ajax/member_login';
                    $.post(member.login_process,q,function(data){
                        if (data=='0'){
                            //site.echo('登入失敗');
                            $('input[name="reg_first_name"]').val(response.first_name);
                            $('input[name="reg_last_name"]').val(response.last_name);
                            $('input[name="reg_email"]').val(response.email);
                            $('input[name="member_type"]').val('fb');
                        }
                        else{
                            location.reload();
                        }
                    })
                });
            } else if (response.status === 'not_authorized') {
                // the user is logged in to Facebook, 
                //but not connected to the app
            } else {
                // the user isn't even logged in to Facebook.
            }
        })
    };
</script>
<style>
    
    .memberForgetPwd { width:360px; height:280px; background:#f9f9f9;
    position:fixed; z-index:9999999; left:50%; margin-left:-180px; margin-top:170px;}

    .memberForgetPwd h1 { width:280px; height:60px; margin:0 auto; padding-top:10px;
    font-size:30px; color:#000; font-family:"Times New Roman"; font-weight:100;
    text-align:center; line-height:70px; letter-spacing:2px;}

    .memberForgetPwd h3 { width:260px; height:30px; margin:0 auto; margin-top:10px;
    font-size:13px; color:#000; font-family:Arial; font-weight:100;
    line-height:30px; letter-spacing:1px;}
    @media  screen and (max-width:480px){
        .memberForgetPwd{width:90%; height:265px; background:#f9f9f9;
        position:absolute; z-index:9999999; left:50%; margin-left:-45%; margin-top:20px;}
        
        .memberForgetPwd h1 { width:100%; height:40px; margin:0 auto; padding-top:15px;
        font-size:25px; color:#000; font-family:"Times New Roman"; font-weight:100;
        text-align:center; line-height:40px; letter-spacing:2px;}
        
        .memberForgetPwd h3 { width:84%; height:30px; margin:0 auto; margin-top:10px;
        font-size:12px; color:#000; font-family:Arial; font-weight:100;
        line-height:30px; letter-spacing:1px;}
    }

    .memberLogin,.memberForgetPwd{visibility: hidden;}
</style>
</head>

<body>
<div class="mob">
    <div class="inner"><h1>請將您的手機轉正</h1></div>
</div>
<!--全畫面刷黑-->
<div class="overBody"></div>
<div class="overLoginBody"></div>
<!--登入會員-->
<div class="memberLogin">
    <h1>LOGIN WITH</h1>
    <h3>E-MAIL</h3>
    <input name="login_email" type="text" class="inputType" />
    <h3>PASSWORD</h3>
    <input name="login_pwd" type="password" class="inputType" />
    <div class="memberLoginCF">
        <div class="memberLoginCheck">
        <input name="remember_login" type="checkbox" value="" class="inputClear" id="checkbox0"/>
        <label for="checkbox0"><span class="memberLoginCheckBox">
        <span class="memberLoginCheckBoxOn"></span>
        </span>記住我</label>
        </div>

        <div class="memberLoginForget"><a href="#">忘記註冊密碼</a></div>
        <div class="clearDiv"></div>
        </div>
        <div class="memberLoginBtn"><a href="#">LOG IN</a></div>
        <div class="memberLoginLine">or</div>
        <div class="memberLoginBtnBox">
            <div class="cartSAfbBtn" style=""><a href="#" style="">Connect FB</a></div>
            <!-- <div class="memberLoginFB"><a href="#">FB LOGIN</a></div> -->
            <!-- <div class="memberLoginTW"><a href="#">FB LOGIN</a></div> -->
        </div>

        <div class="memberLoginClose"><a href="#">close</a></div>
</div>
<!--忘記密碼-->
<div class="memberForgetPwd">
    <h1>GET PASSWORD</h1>
    <h3>E-MAIL</h3>
    <input name="member_email" type="text" class="inputType" />
    <div class="memberLoginCF">
        <div class="memberLoginForget"><a href="#">回到登入</a></div>
        <div class="clearDiv"></div>
        </div>
        <div class="memberLoginBtn"><a href="#">GET PASSWORD</a></div>
        <div class="memberLoginClose"><a href="#">close</a></div>
</div>


<!--Head-->
<div class="head">
	<a href="http://gapure.com"><div class="logo"></div></a>
    <!--主選單開關-->
    <div class="burgLine"><a href="#">OpenMenu</a></div>
    <!--會員、語系、購物車-->
    <div class="menuRight">
    	<ul>
        	<li class="btn_member"><a href="#">member</a></li>
            <li class="btn_shop "><a href="http://gapure.com/xduchess/tw/bag">shopping</a></li>
            <li class="btn_lang"><a href="http://gapure.com/xduchess/tw">繁</a>
            	<ul style="height:auto;">
                	<li><a href="http://gapure.com/xduchess/cn">簡</a></li>
                                        
                </ul>
            </li>
        </ul>
        <div class="clearDiv"></div>
    </div>
    <!--主選單-->
    <div class="menuLeft">
        <ul>
            <li class="btn_menuClose"><a href="#">Close</a></li>
            <li class="btn_mainMenuW"><a id="xduchess" href="http://gapure.com/xduchess/tw">X.DUCHESS</a></li>
            <li class="btn_mainMenuW"><a id="about" href="http://gapure.com/xduchess/tw/about">ABOUT</a></li>
            <li class="btn_mainMenuW"><a id="products" href="http://gapure.com/xduchess/tw/#index_pic">PRODUCTS</a></li>
            <li class="btn_mainMenuW"><a id="articles" href="http://gapure.com/xduchess/tw/article">ARTICLES</a></li>
			<li class="btn_mainMenuW"><a id="contact" href="mailto:x.duchess@gapure.com">CONTACT</a></li>
        </ul>
		<script type="text/javascript"> 

				$(document).ready(function(){
				  $("#about").mouseenter(function(){
					$("#about").text("關於");
				  });
				  $("#about").mouseleave(function(){
					$("#about").text("ABOUT");
				  });
				  
				  $("#products").mouseenter(function(){
					$("#products").text("產品");
				  });
				  $("#products").mouseleave(function(){
					$("#products").text("PRODUCT");
				  });
				  
				  $("#articles").mouseenter(function(){
					$("#articles").text("文章");
				  });
				  $("#articles").mouseleave(function(){
					$("#articles").text("ARTICLES");
				  });

				  $("#contact").mouseenter(function(){
					$("#contact").text("聯絡我們");
				  });
				  $("#contact").mouseleave(function(){
					$("#contact").text("CONTACT");
				  });

				  $("#xduchess").mouseenter(function(){
					$("#xduchess").text("貓爵");
				  });
				  $("#xduchess").mouseleave(function(){
					$("#xduchess").text("X.DUCHESS");
				  });

				});
				
				
		</script>
        <div class="clearDiv"></div>
        <div class="lang">
            <ul>
                <li><a href="http://gapure.com/xduchess/tw">繁</a></li>
                <li><a href="http://gapure.com/xduchess/cn">簡</a></li>
                                
            </ul>
            <div class="clearDiv"></div>
        </div>
    </div>
</div>



<div class="wrapper">
    <input type="hidden" name="product_id" value="4">
<input type="hidden" name="price" value="580">
<div class="prodPage">
    <div class="prodBox">
        <div class="prodImgAll">
            <div class="prodImgAllBigImg">
                <ul>
					<?php foreach($productsdetail as $pro): ?> 
						<?php if(strlen($pro["image"] ) > 0): ?>
							<li><img src="<?php echo e(img_upload_url($pro['image'])); ?>" width="450" height="450"/></li>	
						<?php endif; ?>
					<?php endforeach; ?>
				</ul>
            </div>
            <ul>
					<?php foreach($productsdetail as $pro): ?> 
						<?php if(strlen($pro["image"] ) > 0): ?>
							<li><a href="#"><img src="<?php echo e(img_upload_url($pro['image'])); ?>"/></a></li>	
						<?php endif; ?>
					<?php endforeach; ?>
			</ul>
        </div>
        <div class="prodForm">
            <div class="prodFormTitle">
                <div class="prodFormTitleA"><?php echo $product->title; ?></div>
                <div class="prodFormTitleB">Waterproof Liquid Eye Liner</div>
            </div>
            <div class="prodFormLogo">
                                <img src="<?php echo img_upload_url($brand->img_path); ?>" style="width:auto; height:40px" />
                            </div>
            <div class="prodFormMoney">NT$<span class="prodFormMoneyBig"><?php echo $product->selling_price; ?></span></div>
            
            <!-- <div class="prodFormColor">
                <div class="prodFormColorBall_black prodFormColorBallOver"><a href="#">Black</a></div>
                <div class="prodFormColorBall_brown"><a href="#">Brown</a></div>
                <div class="clearDiv"></div>
            </div> -->
            <style>
                .prodFormColor{text-align:center;}
                
                .color_btn .circle{background-color:#fff; width:10px; height:10px;margin:10px;border-radius: 10px; visibility: hidden;}
                .color_btn:hover>.circle{ visibility:visible;}
                .color_btn.active>.circle{ visibility:visible;}
            </style>
            <div class="prodFormColor" style="text-align:center;">
                                                <div class="color_btn active" style="background:url('http://gapure.com/xduchess/upload/2014-12-12/89111a4f27a56a692b1c9e8a875ec04e_80x80.jpg') center center no-repeat; background-size:cover;">
                    <div class="circle"><input type="hidden" name="color_id" value="6"></div>
                </div>
                                            </div>
            <div class="prodFormSizeL">
            <select name="" class="prodFormBox p_size">
				<?php foreach($format as $f): ?>
	              <option value=""><?php echo $f; ?></option>
				<?php endforeach; ?>
            </select>
            </div>
            <div class="prodFormSizeR">
                <select name="" class="prodFormBox p_qty">
                <option value="0">ITEMS</option>
                </select>
            </div>
            <div class="clearDiv"></div>
            <div class="prodFormBtn"><a href="#">ADD TO CART</a><a href="#">結帳</a></div>
			
            <div class="prodFormLine"></div>
            <div class="prodFormInfo prodFormLineNone">
				<?php echo $product->description; ?>

<?php /*                <p>色彩烏黑具光澤，可展現魅力大眼妝感。極細柔軟筆尖，描繪極細線條。獨特配方持久抗暈染。</p>	*/ ?>

<p>&nbsp;</p>
            </div>
        </div>
        <div class="clearDiv">
        </div>
        <div class="prodBottomLine">
        </div>
    </div>
</div>	
	<div class="prodBox">
	<div id="disqus_thread"></div><!--DISQUES-->
    <script type="text/javascript">
        /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
        var disqus_shortname = 'gapure'; // required: replace example with your forum shortname

        /* * * DON'T EDIT BELOW THIS LINE * * */
        (function() {
            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
            dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        })();
		
    </script>
    <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    </div>
	
    <div class="prodBottomBox">
    </div>
</div>
<div class="PageBottomShadow">
</div>
<style>

.prodImgAllBigImg{
    overflow-x:hidden !important;
}
@media  screen and (max-width: 480px){
    .prodImgAllBigImg{
        overflow-x:scroll;
    }
}
</style>
<script>
var product_item = $.parseJSON('[{"product_id":"4","color_id":"6","color_text":"black","color_img":"2014-12-12\/89111a4f27a56a692b1c9e8a875ec04e_80x80.jpg","gallery":[{"filename":"2014-12-12\/548aaf8c7f1f5fba4fefa6fb90714bd6_450x450.jpg"},{"filename":"2014-12-12\/8546330dc3099e58c6aea074d792bc6a_450x450.jpg"},{"filename":"2014-12-12\/a9cca665f3d9113378ba722ec3572e7d_450x450.jpg"},{"filename":"2014-12-12\/49769de2c21ba56b880c731183dbf1db_450x450.jpg"},{"filename":"2014-12-12\/dee4ab8b2ce486c5f2458957e1460926_450x450.jpg"},{"filename":"2014-12-12\/9ae6adfec853588155fc1b47c6dd604f_450x450.jpg"}],"items":[{"size":"f","qty":"88","coffee_taste":"0,0,0,0,0,0"}]}]');
$(function(){
    product.color_id = 0;
    product.cart_process = 'http://gapure.com/xduchess/tw/ajax/add2cart';
    product.img_url = 'http://gapure.com/xduchess/upload/';
    product.init();
})

var product = {
    color_id:'',
    cart_process:'',
    img_url:'',
    init:function(){
        //this.set_gallery();
        this.set_size_qty();
        this.set_add2cart();
        this.set_color_click();
    },
    set_gallery:function(){
        $('.prodImgAll ul li a').on('click',function(e){
            e.preventDefault();
            var img = $(this).find('img').attr('src');
            var target = $('.prodImgAllBigImg img');
            target.attr('src',img);
        })

        var img_count = $('.prodImgAllBigImg li').length;
        $('.prodImgAllBigImg ul').css('width',img_count * 150 + '%');

        console.log($(window).innerWidth())
        if ($(window).innerWidth()<=320){
            Draggable.create(".prodImgAllBigImg", {type:"scrollLeft", edgeResistance:0.5, throwProps:true});
        }
    },
    set_size_qty:function(){
/*
        var p_size = $('.p_size');
        p_size[0].options.length=1
        var p_qty = $('.p_qty');
        var color_id = parseInt(this.color_id);
        var items = product_item[color_id]['items'];
        for(i=0;i<items.length;i++){
            var disabled = (items[i].qty=='0')?'disabled':'';
            var option = $('<option value="' + items[i].size + '" ' + disabled + '>' + items[i].size + '</option>');
            p_size.append(option);
*/
        }

        p_size.on('change',function(){
            p_qty.empty();
            p_qty.append('<option value="0">ITEMS</option>')
            var size_idx = $(this)[0].selectedIndex;
            if (size_idx==0) return false;
            var size_qty = parseInt(items[size_idx-1].qty);
            var max_qty = size_qty>10?10:size_qty;
            for(i=1;i<=max_qty;i++){
                var option = $('<option value="' + i + '">' + i + '</option>');
                p_qty.append(option);
            }
        }).trigger('change');
    },
    set_add2cart:function(){
        var process_url = this.cart_process;
        var btn = $('.prodFormBtn a');
        btn.on('click',function(e){
            e.preventDefault();
            if ($('.p_size').val()==''){
                site.echo('請選擇尺寸');
                return false;
            }
            if ($('.p_qty').val()=='0'){
                site.echo('請選擇數量');
                return false;
            }
            btn.off('click');
            var p_id = $('input[name="product_id"]').val();
            var p_color = $('.color_btn.active input[name="color_id"]').val();
            var p_price = $('input[name="price"]').val();
            var p_size = $('.p_size').val();
            var p_qty = $('.p_qty').val();
            var q = 'p_id=' + p_id + '&p_color=' + p_color + '&p_price=' + p_price + '&p_size=' + p_size + '&p_qty=' + p_qty + '';
            $.post(process_url,q,function(data){
                product.set_add2cart();
                site.echo('已經加入購物車');
                $('.btn_shop').addClass('hasCartItem')
                $('.btn_shop a').off('click')
            })
        })
    },
    set_color_click:function(){
        $('.color_btn').each(function(){
            $(this).on('click',function(){
                if ($(this).hasClass('active')) return false;
                $('.color_btn').removeClass('active');
                $(this).addClass('active');
                product.color_id = $(this).index();
                product.set_size_qty();
                product.change_gallery();
            })
        })
    },
    change_gallery:function(){
        var gallery = product_item[product.color_id]['gallery'];
        var img = product.img_url + gallery[0]['filename'];
        var target = $('.prodImgAllBigImg img');
        target.attr('src',img);
        $('.prodImgAll li').remove();
        for(i=0;i<gallery.length;i++){
            $('.prodImgAll>ul').append('<li><a href="#"><img src="' + product.img_url + gallery[i]['filename'] + '"></a></li>');
            $('.prodImgAll>.prodImgAllBigImg>ul').append('<li><img src="' + product.img_url + gallery[i]['filename'] + '" width="450" height="450"></li>');
        }
        product.set_gallery();
    }
}
</script></div>




<div class="footer" style="z-index:5;">
    <!--BackTop-->
    <div class="BackTop"></div>
	<div class="footerMu">
    <ul>
    	
        <li><a href="http://gapure.com/xduchess/tw/privacy">PRIVACY POLICY</a></li>
        <li class="sfooterMu"><a href="http://gapure.com/xduchess/tw/guide">GUIDE</a></li>
        <li class="sfooterMu"><a href="http://gapure.com/xduchess/tw/faq">FAQ</a></li>
    </ul>
    </div>
    <h1>COPYRIGHT &copy; GAPURE . ALL RIGHTS RESERVED.2014</h1>
    <div class="clearDiv"></div>
</div>
<style>
    .wrapper{padding-bottom:60px;}
    .btn_shop.hasCartItem a { background:url(http://gapure.com/xduchess/assets/images/menu/btn_shopping.png) bottom;}
    .sweet-overlay,.sweet-alert{z-index:9999999;}
    .menuLeft ul li.btn_mainMenuW.active a {background:url(http://gapure.com/xduchess/assets/images/menu/btn_main_mu_bgw.png);}
    .memberLoginBtnBox .cartSAfbBtn{float:none; margin:0 auto; width:280px;}
    .memberLoginBtnBox .cartSAfbBtn a{background: url(http://gapure.com/xduchess/assets/images/fb_login_big.png); width:100%;}
    @media  screen and (max-width:480px){
        .btn_shop.hasCartItem a { background:url(http://gapure.com/xduchess/assets/images/menu/s_btn_shopping.png) bottom; background-size:45px;}
        .memberLoginBtnBox .cartSAfbBtn{float:none; margin:0 auto; width:240px;}
        .memberLoginBtnBox .cartSAfbBtn a {background-size: contain;background-position: center center;background-repeat: no-repeat;}
        .memberLoginClose{margin-top:50px;}
    }
</style>
<script>
$(function(){
        $('.btn_shop a').off('click').on('click',function(e){
        e.preventDefault();
        site.echo('cart is empty');
    })
        
    $('.memberLogin .memberLoginBtn a').off('click').on('click',function(e){
        e.preventDefault();

        member.login_process = 'http://gapure.com/xduchess/tw/ajax/member_login';
        member.login();
    })

    $('.memberForgetPwd .memberLoginBtn a').off('click').on('click',function(e){
        e.preventDefault();

        member.login_process = 'http://gapure.com/xduchess/tw/ajax/member_forget';
        member.forget();
    })

    $('.memberLoginBtnBox .cartSAfbBtn a').on('click',function(e){
        e.preventDefault();
        member.login_process = 'http://gapure.com/xduchess/tw/ajax/member_login';
        member.fb_login();
    })
    
    


})
</script>
</body>
</html>


