var pageWidth = 3;
var perPage = 5;
var globalVendorList;
var globalCategoryList;
var websocket;


    var queryProductRecommend = function(ws, id) {
        req = {
            "cmd" : "shop",
            "route" : "product_recommend",
            "id" : id
        }
        ws.send(JSON.stringify(req))
    }

    var queryProduct = function(ws, id) {
        req = {
            "cmd" : "shop",
            "route" : "product",
            "id" : id
        }
        ws.send(JSON.stringify(req))
    }

    var handleProduct = function(r) {
        $('#loading').hide()
        r.userId = getCookie("user_id")

        $('#body_container').templateRender('details', r);
    }

    var handleProductRecommend = function(r) {
        $('#recommended_products').templateRender('recommended_products', r);
    }

    var handleProducts = function(t, r, container) {
        $('#loading').hide()
        r.page = parseInt($.urlParam('p'))
        if(!r.page)
            r.page = 1;

        var pages = [ ]
        try {
            var maxPage = Math.ceil( (r.results.total / perPage))
            console.log('Max pages: ' + maxPage)

            for(var k = r.page - (pageWidth +1); k <= (r.page + pageWidth - 1); k++) {
                if(k < 0)
                    k = 1;

                if(k > maxPage)
                    break;
                pages.push(k)
            }
            r.pages = pages
            r.maxPage = maxPage
        } catch(e) {
        }

        console.log(t)
        console.log("container")
        console.log(container)
        $('#' + container).templateRender(t, r);

        if(container != 'body_container' && r.filter && r.filter != 'featured') {
            // write our meta stats
            $('#app_count').html(r.results.total)
            $('#vendor_count').html(globalVendorList.length)
            $('#cat_count').html(globalCategoryList.length)
            /***** Counter Up *****/
            $('.counter').counterUp({
                delay: 10,
                time: 2000
            });

        }

        $(".preloader").fadeOut(1000);

    }

    var handleVendorProducts = function(r) {
        $('#loading').hide()

        r.page = parseInt($.urlParam('p'))
        if(!r.page)
            r.page = 1;

        var pages = [ ]
        var maxPage = Math.ceil( (r.results.total / perPage))
        console.log('Max pages: ' + maxPage)

        for(var k = r.page - (pageWidth +1); k <= (r.page + pageWidth - 1); k++) {
            if(k < 0)
                k = 1;

            if(k > maxPage)
                break;
            pages.push(k)
        }
        r.pages = pages
        r.maxPage = maxPage
        console.log(r.pages)

        $('#body_container').templateRender('vendors', r);
        $(".preloader").fadeOut(1000);
    }

    var handleCategoryProducts = function(r) {
        $('#loading').hide()
        r.page = parseInt($.urlParam('p'))
        if(!r.page)
            r.page = 1;

        var pages = [ ]
        var maxPage = Math.ceil( (r.results.total / perPage))
        console.log('Max pages: ' + maxPage)

        for(var k = r.page - (pageWidth +1); k <= (r.page + pageWidth - 1); k++) {
            if(k < 0)
                k = 1;

            if(k > maxPage)
                break;
            pages.push(k)
        }
        r.pages = pages
        r.maxPage = maxPage
        $('#body_container').templateRender('categories', r);
        $(".preloader").fadeOut(1000);
    }

    var queryByVendor = function(ws, id, filter=null) {
        console.log(filter)

        var perPage = parseInt($.urlParam('o'));
        if(!perPage)
            perPage = 5;

        var page = parseInt($.urlParam('p'))
        if(!page)
            page = 1;

        req = {
            "cmd" : "shop",
            "route" : "products",
            "method" : "vendor",
            "start" : (page - 1) * perPage,
            "end" : (page) * perPage,
            "id" : id
        }

        if(filter)
            req.filter = filter;

        ws.send(JSON.stringify(req))
    }

    var queryByCategory = function(ws, id, filter=null) {

        var perPage = parseInt($.urlParam('o'))
        if(!perPage)
            perPage = 5;

        var page = parseInt($.urlParam('p'))
        if(!page)
            page = 1;

        req = {
            "cmd" : "shop",
            "route" : "products",
            "method" : "category",
            "start" : (page - 1) * perPage,
            "end" : (page) * perPage,
            "id" : id
        }

        if(filter)
            req.filter = filter;

        ws.send(JSON.stringify(req))
    }

    var queryProducts = function(ws, filter=null, container=full, lper=5) {

        var perPage = parseInt($.urlParam('o'))
        if(lper)
            perPage = lper;
        if(!perPage)
            perPage = 5;

        var page = parseInt($.urlParam('p'))
        if(!page)
            page = 1;

        req = {
            "cmd" : "shop",
            "route" : "products",
            "container" : container,
            "start" : (page - 1) * perPage,
            "end" : (page) * perPage
        }

        if(filter)
            req.filter = filter;


        console.log(req)

        ws.send(JSON.stringify(req))
    }

    var queryToken = function(ws) {
        // make ajax request
        $.getJSON("/api/session", function(data) {
	        $(".preloader").fadeOut(1000);
    	    $('#body_container').templateRender('signup', data.oauth2Profile );
        });
    }

    var throwError = function(e) {
        $("#error").empty()
        html = '<div class="alert alert-danger"><strong>Error</strong> ' + e + '</div>'
        console.log(html)
        $("#error").html(html)
        $("#error").show()
    }

    var handleRegistration = function(r) {
        console.log(r)
        // save user_id cookie

        if(r.status == false) {
            console.log("Throwing error")
            throwError(r.msg)
            return
        }

        setCookie("user_id", r.results[0].id , 3600);
        // redirect
        window.location.replace("/");
    }

    var handleAuthentication = function(r) {

        console.log(r);
	//  if auth fails entirely, then prompt the login buttons...
        if(!('oauth2Profile' in r.results)) {
            // login handler, get template and orient

            var data = {
                "oauth2_baseurl" : "https://accounts.google.com/o/oauth2/v2/auth",
                "oauth2_client_id" : "79144872999-2pcqi15rt9366hvlcll05bbiv0m11sb2.apps.googleusercontent.com",
                "oauth2_redirecturl" : "https://marketplace.hawk.io/api/oauth2",
                "oauth2_custom_fields" : "response_type=code&amp;scope=https://www.googleapis.com/auth/userinfo.profile%20https://www.googleapis.com/auth/userinfo.email&amp;",
                "randomState" : "0.5206055706737784"
            }
            $('#login_button').templateRender('top_login', data);
        } else {
            $('#login_button').templateRender('top_profile', r.results);
        }

    }

    var queryAuthentication = function(ws) {
        req = {
            "cmd" : "profile",
            "route" : "token"
        }
        console.log(req)
        ws.send(JSON.stringify(req))
    }

    var submitOrder = function(ws, data) {
        console.log('Submit review');
        req = {
            "cmd" : "shop",
            "route" : "order",
            "data" : data
        }
        console.log(req)
        ws.send(JSON.stringify(req))
    }

    var submitReview = function(ws, data) {
        console.log('Submit review');
        req = {
            "cmd" : "reviews",
            "route" : "add",
            "data" : data
        }
        console.log(req)
        ws.send(JSON.stringify(req))
    }

    var submitSignup = function(ws) {
        console.log('Submit data');
        arr = $("#signup").serializeArray()
        data = { }
        for(k in arr) {
            data[arr[k].name] = arr[k].value
        }
        console.log(data)
        req = {
            "cmd" : "profile",
            "route" : "register",
            "data" : data
        }
        console.log(req)
        ws.send(JSON.stringify(req))

        return false;
    }

    var setHelp = function(ws, id, product_id, value) {

        data = { 
            "id" : id,
            "value" : value,
            "product_id" : product_id
        }

        req = {
            "cmd" : "reviews",
            "route" : "set_help",
            "data" : data
        }
        console.log(req)
        ws.send(JSON.stringify(req))
    }


    var handleCartGet = function(r) {

        console.log(r.results)

        // for each set contents of value and set the template data
        $('.cart-body').empty()
        $('.cart-body').templateRender('top_cart', r );

        $('.cart-amt').empty()
        $('.cart-amt').append(r.results.length)
        console.log('setting length')
        console.log(r.results.length)

        if(window.location.pathname == "/cart") {
            $('#body_container').templateRender('cart', r );
	        $(".preloader").fadeOut(1000);
        } else if(window.location.pathname == "/checkout") {
            $('#body_container').templateRender('checkout', r);
            $(".preloader").fadeOut(1000);
        }
    }

    var deleteCart = function(ws, item) {
        req = {
            "cmd" : "cart",
            "route" : "delete",
            "id" : item
        }
        console.log(req)
        ws.send(JSON.stringify(req))
    }

    var addCart = function(ws, item) {
        req = {
            "cmd" : "cart",
            "route" : "add",
            "id" : item
        }
        console.log(req)
        ws.send(JSON.stringify(req))
    }

    var queryCart = function(ws) {
        req = {
            "cmd" : "cart",
            "route" : "get"
        }
        console.log(req)
        ws.send(JSON.stringify(req))
    }


    var querySearch = function(ws, q, lper=5) {

        var perPage = parseInt($.urlParam('o'))
        if(lper)
            perPage = lper;
        if(!perPage)
            perPage = 5;

        var page = parseInt($.urlParam('p'))
        if(!page)
            page = 1;

        req = {
            "cmd" : "shop",
            "route" : "products",
            "method" : "search",
            "container" : "body_container",
            "start" : (page - 1) * perPage,
            "end" : (page) * perPage,
            "q" : q
        }
        console.log(req)
        ws.send(JSON.stringify(req))
    }

    var queryVendors = function(ws) {
        req = {
            "cmd" : "shop",
            "route" : "vendors"
        }
        console.log(req)
        ws.send(JSON.stringify(req))
    }

    var handleSideVendors = function() {
	// get our value
        $('#side-vendor-list').empty()
	    r = globalVendorList
        // add list
        console.log(r)
        for(x in r) {
            $('#side-vendor-list').append('<li><a href="/vendors/' + r[x].id + '" title="' + r[x].description + '" title="' + r[x].description + '"><i class="fa fa-caret-right"></i> ' + r[x].name + '</a></li>')
        }
    }

    var handleOrder = function(r) {

        // redirect to completed if success....
        window.location.replace("/completed");
    }

    var handleVendors = function(r) {
        $('#vendor-list').empty()
        var amountPerColumn = 5;
	    globalVendorList = r
	
        var html = '<ul class="list-unstyled mega-menu">';

        for(x in r) {
            console.log('Adding vendor column: ' + x + '...')
            if(x % amountPerColumn == 0) {
               if(x > 0) {
                html += '</li>';
               }
               html += '<li>';
            }
            html += '<a href="/vendors/' + r[x].id + '" title="' + r[x].description + '" title="' + r[x].description + '">' + r[x].name + '</a>';
        }
        html += '</li></ul>';
        $('#vendor-list').append(html);
        handleSideVendors()
        // show and hide loading...
    }

    var queryCategories = function(ws) {
        req = {
            "cmd" : "shop",
            "route" : "categories"
        }
        ws.send(JSON.stringify(req))
    }

    var handleSideCategories = function() {
	    r = globalCategoryList
        $('#side-category-list').empty()
        // add list
        console.log('Side Categories...')
        console.log(r)
        for(x in r) {
            $('#side-category-list').append('<li><a href="/categories/' + r[x].id + '" title="' + r[x].description + '"><i class="fa fa-caret-right"></i> ' + r[x].name + '</a></li>')
        }
    }

    var handleCategories = function(r) {
        $('#category-list').empty()
        // add list
        console.log(r)
	    globalCategoryList = r;
        for(x in r) {
            $('#category-list').append('<li><a href="/categories/' + r[x].id + '" title="' + r[x].description + '">' + r[x].name + '</a></li>')
        }

        $('#mobile-category-list').empty()
        // add list
        console.log(r)
	    globalCategoryList = r;
        for(x in r) {
            $('#mobile-category-list').append('<li><a href="/categories/' + r[x].id + '" title="' + r[x].description + '">' + r[x].name + '</a></li>')
        }

        handleSideCategories()
    }

    var onOpen = function(event) {
        console.log("Open");
        console.log(event);

    }

    var onError = function(event) {
        console.log("Error");
        console.log(event);
    }

    var onMessage = function(event) {
        var data = JSON.parse(event.data);
        console.log("DATA");
        console.log(data);
        // do something with this and hand it off to proper handler
        // take result, depending on what it is and store/set it somewhere that auto triggers population of data

        switch(data.cmd) {
            case "hello":
                console.log('successful connection');
                break;
            case "cart":
                switch(data.route) {
                    case "delete":
                    case "clear":
                    case "add":
                    case "get":
                        handleCartGet(data)
                        break;
                }
                break;
            case "shop":
                switch(data.route) {
                    case "categories":
                        handleCategories(data.results)
                        break;
                    case "vendors":
                        handleVendors(data.results)
                        break;
                    case "product":
                        handleProduct(data.results)
	                    $(".preloader").fadeOut(1000);
                        break;
                    case "order":
                        handleOrder(data.results)
                        break;
                    case "products":
                        console.log(data);
                        if('method' in data) {
                            if(data.method == 'vendor') {
                                handleVendorProducts(data)
                            } else if (data.method == 'category') {
                                handleCategoryProducts(data)
                            } else if (data.method == 'search') {
                                handleProducts('search', data, data.container)
                            }
                        } else {
                                // use filter
                                console.log('newest data goo')
                            if('filter' in data) {
                                if(data.filter == 'newest') {
                                    // if index, then use sub
                                    if(data.container  == 'body_container')
                                        handleProducts('whatsnew', data, data.container)
                                    else
                                        handleProducts('mid_container', data, data.container)
                                } else if(data.filter == 'popular') {
                                    if(data.container  == 'body_container')
                                        handleProducts('popular', data, data.container)
                                    else
                                        handleProducts('mid_container', data, data.container)
                                } else if(data.filter == 'top') {
                                    console.log('TOPP')
                                    handleProducts('mid_container', data, data.container)
                                } else if(data.filter == 'featured') {
                                    console.log('feature')
                                    handleProducts('mid_container', data, data.container)
                                }
                            }
                        }
	                    $(".preloader").fadeOut(1000);
                        break;
                    case "product_recommend":
                        handleProductRecommend(data)
                        break;
                }
                break;
            case "profile":
                switch(data.route) {
                    case "token":
                        handleAuthentication(data);
                        break;
                    case "register":
                        handleRegistration(data);
                        break;
                }
            case "reviews":
                switch(data.route) {
                    case "add":
                        // refresh page...
                        location.hash = '#review'
                        location.reload()
                        break;
                }
                break;
        }

    }

    function waitForSocketConnection(socket, callback){
        setTimeout(
            function () {
                if (socket.readyState === 1) {
                    console.log("Connection is made")
                    if (callback != null){
                        callback();
                    }
                } else {
                    console.log("wait for connection...")
                    waitForSocketConnection(socket, callback);
                }

            }, 5); // wait 5 milisecond for the connection...
    }



$(document).ready(function(){	

	/***** Mobile Menu *****/
	jQuery('nav#dropdown').meanmenu({
		meanScreenWidth: "767"
	});


	/***** Isotope Gallery *****/	
	$(window).on('load', function() {


		//Preloader
		$(".preloader .item-wrapper").delay(700).animate({
	        top: "-100%"
	    },1000,"easeInQuart");

        var connect = function() {

            websocket = new WebSocket('wss://' + window.location.host);

            websocket.onerror = onError;
            websocket.onopen = function(x) {
               console.log("local open")
               onOpen(x)
            }
            websocket.onmessage = onMessage;
            websocket.onclose = function(e) {
                console.log('Socket is closed. Reconnect will be attempted in 1 second.', e.reason);
                setTimeout(function() {
                    connect();
                }, 1000);
            };
        };

        connect();

        // get path and route to js accordingly
        console.log(window.location);
        if(window.location.pathname == "/") {
            $('#body_container').templateRender('index_body', { });
	        $(".preloader").fadeOut(1000);
        } else if(window.location.pathname == "/signup") {
            waitForSocketConnection(websocket, function() {
	            queryToken(websocket)
            });

        } else if(window.location.pathname == "/profile") {
            $('#body_container').templateRender('profile', {  });
	        $(".preloader").fadeOut(1000);
        } else if(window.location.pathname == "/checkout") {

        } else if(window.location.pathname == "/completed") {

            $('#body_container').templateRender('completed', { });
	        $(".preloader").fadeOut(1000);

        } else if(window.location.pathname == "/cart") {
            // contents already exist...
            /*
            $('#body_container').templateRender('cart', {  });
	        $(".preloader").fadeOut(1000);
            */
        } else if(window.location.pathname == "/search") {

            // search and get results
            waitForSocketConnection(websocket, function() {
                
                q = $.urlParam('q')
                if(q)
                    querySearch(websocket, q)
                else {
                    // render search template
                    $('#body_container').templateRender('search_base', {  });
	                $(".preloader").fadeOut(1000);
                }
            })

            //$('#body_container').templateRender('search', { });

        } else if(window.location.pathname.indexOf("/popular") != -1 ) {
            // fetch categories and render template
            $('#products').hide()
            $('#loading').show()
            // get list of products by category #
            waitForSocketConnection(websocket, function() {
                console.log('Querying by category....')
                queryProducts(websocket, 'popular', "body_container")
            });


        } else if(window.location.pathname.indexOf("/whatsnew") != -1 ) {
            // fetch categories and render template
            $('#products').hide()
            $('#loading').show()
            // get list of products by category #
            waitForSocketConnection(websocket, function() {
                console.log('Querying by category....')
                queryProducts(websocket, 'newest', "body_container")
            });

        } else if(window.location.pathname.indexOf("/categories") != -1 ) {
            // fetch categories and render template
            $('#products').hide()
            $('#loading').show()
            // get list of products by category #
            var id = $(location).attr('pathname').substring($(location).attr('pathname').indexOf('/categories/') + 12, $(location).attr('pathname').length)
            waitForSocketConnection(websocket, function() {
                console.log('Querying by category....')
                queryByCategory(websocket, id)
            });
        } else if(window.location.pathname.indexOf("/vendors") != -1 ) {
            $('#products').hide()
            $('#loading').show()
            // get list of products by category #
            var id = $(location).attr('pathname').substring($(location).attr('pathname').indexOf('/vendors/') + 9, $(location).attr('pathname').length)
            waitForSocketConnection(websocket, function() {
                console.log('Querying by vendor....')
                queryByVendor(websocket, id)
            });
        } else if(window.location.pathname.indexOf("/app/details") != -1) {
            // get product
            $('#loading').show()
            // get list of products by category #
            var id = $(location).attr('pathname').substring($(location).attr('pathname').indexOf('/app/details/') + 13, $(location).attr('pathname').length)
            console.log(id);
            waitForSocketConnection(websocket, function() {
                queryProduct(websocket, id);

            });
        } else {
            // 404
        }



        waitForSocketConnection(websocket, function() {
            console.log('socket is ready')
	        queryAuthentication(websocket)
            queryCategories(websocket)
            queryVendors(websocket)
            queryCart(websocket)
        })


	});
	
    /*
	$(".testimonial-slider").owlCarousel({
		autoplay:true,
    	autoplayTimeout:4000,
    	smartSpeed:1000,
		loop: true,
		responsiveClass: true,
		items : 2,
		nav : false,
		margin: 30,
		dots: false,
		responsive: {
			0: {
				items: 1
			},
			576: {
				items: 1
			},
			768: {
				items: 2
			},
			992: {
				items: 2
			}
		}
    });

	$(".team-slider").owlCarousel({
		autoplay:false,
    	autoplayTimeout:4000,
    	smartSpeed:1000,
		loop: true,
		responsiveClass: true,
		items : 3,
		nav : true,
		navText: ['<img src="images/arrow-l.png" alt=""/>', '<img src="images/arrow-r.png" alt=""/>'],
		margin: 30,
		dots: false,
		responsive: {
			0: {
				items: 1
			},
			576: {
				items: 1
			},
			768: {
				items: 2
			},
			992: {
				items: 3
			}
		}
    });
    */

    /***** Magnific Popup *****/
    $('#video-btn').magnificPopup({
		type: 'iframe',
		iframe: {
			markup: '<div class="mfp-iframe-scaler">' +
					'<div class="mfp-close"></div>' +
					'<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>' +
				  '</div>',
			patterns: {
				youtube: {
					index: 'youtube.com/',
					id: 'v=',
					src: 'http://www.youtube.com/embed/%id%?autoplay=1'
				}
			},
			srcAction: 'iframe_src'
		}
	});

	/***** Sicky Menubar *****/
	$(window).on('scroll',function() {    
		var scroll = $(window).scrollTop();
		if (scroll < 250) {
			$("header").removeClass("sticky");
		}else{
			$("header").addClass("sticky");
		}
	});

	/***** Back To Top *****/
	$(window).scroll(function(){
		if($(this).scrollTop()>500){
		    $(".back-to-top").fadeIn();
		} else{
		    $(".back-to-top").fadeOut();
		}
	});
	$(".back-to-top").on('click',function(){
	    $("html, body").animate({scrollTop:0}, 900);
	});


    $("#signup-button").on('click', function(e) {
        e.preventDefault()

        waitForSocketConnection(websocket, function() {
            submitSignup(websocket)
        });
    });

	/***** Syotimer *****/
    /*
	$('#timer-wrapper').syotimer({
		year: 2020,
		month: 6,
		day: 1,
		hour: 7,
		minute: 30
	});
    */

});