$(document).ready(function () {
    
    $.support.cors = true;
$.ajaxSetup({ cache: false });
    
    
    $('.s6-locate').click(function(){
       window.location.href = "/find-an-eye-doctor"; 
    });
    
    
    var blurElement = {a:20};


//here you pass the filter to the DOM element
function applyBlur()
{
    TweenMax.set(['#s0-title img'], {webkitFilter:"blur(" + blurElement.a + "px)",filter:"blur(" + blurElement.a + "px)"});  
};
    
    
    t1 = new TimelineMax({});
    
    t1.to($('#s0-title'),2,{css:{opacity:1,filter:"blur(0)"}, ease:Power1.easeOut});
    t1.to(blurElement, 2, {a:0, onUpdate:applyBlur, delay:-2});
    t1.to($('#s0-producttxt'),1,{opacity:1, ease:Power1.easeOut, delay:-4});
    t1.to($('#s0-productimg'),1,{opacity:1, ease:Power1.easeOut, delay:-5});
    t1.to($('#s0-desc'),1,{opacity:1, ease:Power1.easeOut});
    t1.to($('#s0-scroll'),1,{opacity:1, ease:Power1.easeOut});
    
    t3 = new TimelineMax({paused:true});
    
    var mq = window.matchMedia( "(max-width: 1440px)" );
    if (mq.matches) {
  t3.fromTo($('#s2-claritifill'), 3, {
                top: "78%",
                left: "29%",
                width: "35%",
                height: "1%",
                opacity:0
            }, {
                top: "72%",
                left: "17%",
                width: "58%",
                height: "4%",
                opacity:0.2,

                ease: Power1.easeOut,
                delay:1
            });
} else {
  t3.fromTo($('#s2-claritifill'), 3, {
                top: "76%",
                left: "29%",
                width: "35%",
                height: "1%",
                opacity:0
            }, {
                top: "69%",
                left: "17%",
                width: "57%",
                height: "4%",
                opacity:0.2,

                ease: Power1.easeOut,
                delay:1
            });
}
   
    
      sunloop = new TweenMax.to($('#s3-sun'), 80, {
        rotation: 360,
        repeat:-1,
        ease:Power0.easeNone
    });
    
    
    
    t4 = new TimelineMax({});
        
    t4.fromTo($('#s3-lens,#s3-shield'),1,{opacity:0},{opacity:1, ease:Power1.easeOut});
/*
    t4.fromTo($('#s3-arrows'), 2, {
        webkitClipPath:'circle(0% at 70% 30%)'
    }, {
        webkitClipPath:'circle(100% at 70% 30%)',
        ease: Power1.easeInOut,
        repeat:-1
    });
*/
    
    
    
    
    t5 = new TimelineMax({paused:true, repeat:-1, repeatDelay:3});
    
    function changep1 (){
        $('#s4-personname').html('Jason, 45');
        $('#s4-persondesc').html('看遠看近也模糊不清, 但不想因佩戴眼鏡而影響他那活躍的生活方式');
    }
    function changep2 (){
        $('#s4-personname').html('Emily, 19');
        $('#s4-persondesc').html('隱形眼鏡新用家, 不想因清潔及貯存月戴隱形眼鏡而煩惱');
    }
    function changep3 (){
        $('#s4-personname').html('Eric, 25');
        $('#s4-persondesc').html('有散光, 需長時間對著電腦工作');
    }
    
    t5.to($('#s4-p1'),0.5, {autoAlpha:0});
    t5.to($('#s4-personname, #s4-persondesc'),0.5, {autoAlpha:0});
    t5.to($('#s4-p2'),0.3, {autoAlpha:1,onUpdate:changep2});
    t5.to($('#s4-personname, #s4-persondesc'),0.3, {autoAlpha:1});
    t5.to($('#s4-l1'),0.3, {autoAlpha:0, delay:-1});
    t5.to($('#s4-l2'),0.3, {autoAlpha:1 });
    
    t5.to($('#s4-p2'),0.5, {autoAlpha:0, delay:3});
    t5.to($('#s4-personname, #s4-persondesc'),0.5, {autoAlpha:0});
    t5.to($('#s4-p3'),0.3, {autoAlpha:1,onUpdate:changep3});
    t5.to($('#s4-personname, #s4-persondesc'),0.3, {autoAlpha:1});
    t5.to($('#s4-l2'),0.3, {autoAlpha:0, delay:-1}); 
    t5.to($('#s4-l3'),0.3, {autoAlpha:1 });
    
    t5.to($('#s4-p3'),0.5, {autoAlpha:0, delay:3});
    t5.to($('#s4-personname, #s4-persondesc'),0.5, {autoAlpha:0});
    t5.to($('#s4-p1'),0.3, {autoAlpha:1,onUpdate:changep1});
    t5.to($('#s4-personname, #s4-persondesc'),0.3, {autoAlpha:1});
    t5.to($('#s4-l3'),0.3, {autoAlpha:0, delay:-1});
    t5.to($('#s4-l1'),0.3, {autoAlpha:1 });
  
    
   function cleart7(){
        t6.stop();
        t7.stop();
        $('.s5-coins img').css('opacity','0');
        $('.s5-coins img').css('transform','translateY(0)');
    }
    
     t6 = new TimelineMax({paused:true});
    
    t6.to($("#s5-clariti .c1"),0.3,{y: percentToPixel($("#s5-clariti .c1"), 110) + "px",rotation:-20, opacity:1});
    
    t6.to($("#s5-clariti .c2"),0.3,{y: percentToPixel($("#s5-clariti .c2"), 100) + "px",rotation:-20, opacity:1});
    t6.to($("#s5-clariti .c1"),0.1,{rotation:0});
    t6.to($("#s5-clariti .c3"),0.3,{y: percentToPixel($("#s5-clariti .c3"), 90) + "px",rotation:-20, opacity:1});
    t6.to($("#s5-clariti .c2"),0.1,{rotation:0});
    
    t6.to($("#s5-clariti .c4"),0.2,{y: percentToPixel($("#s5-clariti .c4"), 80) + "px",rotation:-20, opacity:1});
    t6.to($("#s5-clariti .c3"),0.1,{rotation:0});
    t6.to($("#s5-clariti .c5"),0.2,{y: percentToPixel($("#s5-clariti .c5"), 70) + "px",rotation:-20, opacity:1});
    t6.to($("#s5-clariti .c4"),0.1,{rotation:0});
    
    t6.to($("#s5-clariti .c6"),0.3,{y: percentToPixel($("#s5-clariti .c6"), 60) + "px",rotation:-20, opacity:1});
    t6.to($("#s5-clariti .c5"),0.1,{rotation:0});
    t6.to($("#s5-clariti .c7"),0.3,{y: percentToPixel($("#s5-clariti .c7"), 50) + "px",rotation:-20, opacity:1});
    t6.to($("#s5-clariti .c6"),0.1,{rotation:0});
    
    t6.to($("#s5-clariti .c7"),0.1,{rotation:0});
    
    
    
    t7 = new TimelineMax({paused:true});
    
    t7.to($("#s5-trad .c1"),0.3,{y: percentToPixel($("#s5-clariti .c1"), 110),rotation:-20, opacity:1});
    
    t7.to($("#s5-trad .c2"),0.3,{y: percentToPixel($("#s5-clariti .c2"), 100),rotation:-20, opacity:1});
    t7.to($("#s5-trad .c1"),0.1,{rotation:0});
    t7.to($("#s5-trad .c3"),0.3,{y: percentToPixel($("#s5-clariti .c3"), 90),rotation:-20, opacity:1});
    t7.to($("#s5-trad .c2"),0.1,{rotation:0});
    
    t7.to($("#s5-trad .c4"),0.2,{y: percentToPixel($("#s5-clariti .c4"), 80),rotation:-20, opacity:1});
    t7.to($("#s5-trad .c3"),0.1,{rotation:0});
    t7.to($("#s5-trad .c5"),0.2,{y: percentToPixel($("#s5-clariti .c5"), 70),rotation:-20, opacity:1});
    t7.to($("#s5-trad .c4"),0.1,{rotation:0});
    
    t7.to($("#s5-trad .c6"),0.3,{y: percentToPixel($("#s5-clariti .c6"), 60),rotation:-20, opacity:1});
    t7.to($("#s5-trad .c5"),0.1,{rotation:0});
    t7.to($("#s5-trad .c7"),0.3,{y: percentToPixel($("#s5-clariti .c7"), 50),rotation:-20, opacity:1});
    t7.to($("#s5-trad .c6"),0.1,{rotation:0});
    
    t7.to($("#s5-trad .c7"),0.1,{rotation:0});

    $('#fullpage').fullpage({
        'verticalCentered': false,
        'css3': true,
        //anchors: ['livevivid', 'breathable', 'water', 'uv', 'needs', 'value', 'specifications'],
   // menu: '#animenu',
        'navigation': true,
        lockAnchors: true,
        'navigationPosition': 'right',
        //'navigationTooltips': ['fullPage.js', 'Powerful', 'Amazing', 'Simple'],
        fixedElements : '.header__wrapper',
         afterRender: function (){
             /*d7 fix */
    navlength = $( "#fp-nav ul li" ).length;
    if(navlength == 14){
        $('#fp-nav ul li').last().remove();
        $('#fp-nav ul li').last().remove();
        $('#fp-nav ul li').last().remove();
        $('#fp-nav ul li').last().remove();
        $('#fp-nav ul li').last().remove();
        $('#fp-nav ul li').last().remove();
        $('#fp-nav ul li').last().remove();
    }
    $('.fp-slidesContainer > .fp-slides').unwrap();
    $('.fp-slidesContainer > .fp-slidesContainer').unwrap();
    $('.fp-slides > .fp-slides').unwrap();
    
    
    
         }, 
        'afterLoad': function (anchorLink, index) {
            
            if (index == 6) {

                    //cleart7();
                    //$('.s5-coins').show();
                    t6.play(0, true);
                    t7.play(0, true);
            }
            
        },
        'onLeave': function (index, nextIndex, direction) {
            if(nextIndex == 1){
                t1.restart();
                $('#s1-bubbles').finish();
            }
            
          //  TweenMax.to($('.tg'), 3, {css:{clip:"rect(0px, 700px, 190px, 1px);"},ease:Power1.easeOut});
            if (nextIndex == 2) {

            $('#s1-bubbles').fadeIn(3000);
            }
            if (index == 2) {
                $('#s1-bubbles').finish();
                $('#s1-bubbles').fadeOut(100);
            }
            
            if (nextIndex == 3) {

                t3.kill();
                t3.restart();
            }

            if (nextIndex == 4) {
                t4.play(0, true);
            }
            
            if(nextIndex == 5){
                t5.play(3,true);
                changep2();
            }
            
            if (index == 5){
                t5.stop();
            }
            
            if(index==6){
                cleart7();
                //$('.s5-coins').hide();
            }
    }
    });

    for (i = 0; i < 20; i++) {
        $('#s1-bubbles').append('<div class="bubble x' + i + '"></div>');

        scale = Math.floor(Math.random() * (9 - 1 + 1)) + 1;
        opacity = Math.floor(Math.random() * (5 - 1 + 1)) + 1;
        xlength = Math.floor(Math.random() * (20 - 2 + 1)) + 2;
        ylength = Math.floor(Math.random() * (6 - 2 + 1)) + 2;
        delay = Math.floor(Math.random() * (12 - 0 + 1)) + 0;

        $('.x' + i).css({
            '-webkit-transform': 'scale(0.' + scale + ')',
            '-moz-transform': 'scale(0.' + scale + ')',
            'transform': 'scale(0.' + scale + ')',
            'opacity': '0.' + opacity,

            '-webkit-animation': 'moveclouds ' + xlength + 's -' + delay + 's linear infinite , sideWays ' + ylength + 's -' + delay + 's ease-in-out infinite alternate',
            '-moz-animation': 'moveclouds ' + xlength + 's -' + delay + 's linear infinite, sideWays ' + ylength + 's -' + delay + 's ease-in-out infinite alternate',
            '-o-animation': 'moveclouds ' + xlength + 's -' + delay + 's linear infinite, sideWays ' + ylength + 's -' + delay + 's ease-in-out infinite alternate'
        });

    }
    
    for (i = 0; i < 5; i++) {
        $('#s1-bubbles').append('<div class="bubbleo2 y' + i + '"><div class="o2txt"></div></div>');

        // scale = Math.floor(Math.random() * (9 - 6 + 1)) + 6;
        opacity = Math.floor(Math.random() * (9 - 3 + 1)) + 3;
        xlength = Math.floor(Math.random() * (30 - 3 + 1)) + 3;
        ylength = Math.floor(Math.random() * (9 - 2 + 1)) + 2;
        delay = Math.floor(Math.random() * (12 - 0 + 1)) + 0;

        $('.y' + i).css({
            '-webkit-transform': 'scale(1.5)',
            '-moz-transform': 'scale(1.5)',
            'transform': 'scale(1.5)',
            'opacity': '0.' + opacity,

            '-webkit-animation': 'moveclouds ' + xlength + 's -' + delay + 's linear infinite , sideWays ' + ylength + 's -' + delay + 's ease-in-out infinite alternate',
            '-moz-animation': 'moveclouds ' + xlength + 's -' + delay + 's linear infinite, sideWays ' + ylength + 's -' + delay + 's ease-in-out infinite alternate',
            '-o-animation': 'moveclouds ' + xlength + 's -' + delay + 's linear infinite, sideWays ' + ylength + 's -' + delay + 's ease-in-out infinite alternate'
        });

    }

});

function percentToPixel(_elem, _perc){
  return (_elem.parent().outerWidth()/100)* parseFloat(_perc);
}




$(document).ready(function () {
    
     raw = '';
    districtlist = '';

   $.ajax({
        url: "http://apps.webpuppies.com.sg/coopervision/cvhk/clariti/getarray.php",
        type: "post",
        dataType: "json",
        success: function (data) {
            raw = data;
            districtlist = _.chain(data).map(function(s) { return s.district }).uniq().value();
            
            //construct option string
            optionstr = '<option value="" selected disabled>請選地區</option>';
            for (var i = 0; i < districtlist.length; i++) {

                optionstr += ("<option value='" + districtlist[i] + "' >" + districtlist[i] + "</option>");
            }
            
            $('#regarea').html(optionstr);
            $('#regarea').prop('disabled', false);
            
        },
        error: function () {
           // alert('Error. Please try again.');
        }
    }); 
    
    
    $('#regarea').change(function(){
         
        shoplist = _.where(raw, {district: $(this).val()});
        $("#regshop").prop('disabled', false);
    


        //construct option string
            optionstr = '<option value="" disabled selected>請選專業試戴中心</option>';
            for (var i = 0; i < shoplist.length; i++) {

                optionstr += ("<option value='" + shoplist[i]['id'] + "' >" + shoplist[i]['name'] + "</option>");
            }

            $('#regshop').html(optionstr);
        
        
    });
    
    $('#regshop').change(function(){   

            address = _.where(raw, {id: $(this).val()});
            
            $('#addressarea').html(address[0]['address']);
        
        
    });
    
    
    
});

