﻿$(document).ready(function () {
    //hides slicesStat div
    $("#slicesStat").css("display", "none");
    $(window).load(function () {       
        var imagePath = "slicesImg/"
        // name images (industry)_1, (industry)_2 and (industry)_full
        var indImages = ["golf", "fitness", "baseball", "salon", "massage", "tennis", "more"];
        // urls of industry specific pages, order must match that of var indImages
        // !!! currently set up to get industry name from slide id instead of indPages !!!
        var indPages = [];
        var slicePosition = 0;
        var sliceMIPosition = 0;

        // !!! var skinPath must be set in the .aspx file above the link to this script !!!

        var slideMessage = ""
        var slideBullets = ["event registration, lessons, clinics, hitting bay &, simulator reservations, email marketing", "classes, training sessions, evaluations, memberships, email marketing", "camps, clinics, batting cages, email marketing", "internal or self-scheduling, multi-service appointments, point of sale, email marketing", "internal or self-scheduling, multi-service appointments, email marketing", "clinics, camps, facility rental, email marketing", "medical, chiropractic, music schools, pet grooming, rentals, physical therapy, financial planners, ski schools"];

        //sets position and background image of each slice and text box (ind name/title)
        $(".sliceSlide").each(function (i) {
            $(this).css("left", slicePosition + "px");
            slicePosition += 144;
            $(this).css("background-image", "url(" + skinPath + "slicesImg/" + indImages[i] + "_2.jpg)");
            $(this).css("background-image", "url(" + skinPath + "slicesImg/" + indImages[i] + "_1.jpg)");
            $(this).attr("id", indImages[i] + "_slice");

            //adds title to each slice
            var sTitle = indImages[i].replace(/(.{1})/g, "$1</br>");
            $(this).append("<div class=\"sliceTitle\"><p>" + sTitle + "</p></div>");

            //delays each slice for a sequence effect on load
            var curSlice = this;
            setTimeout(function () {
                $(curSlice).fadeToggle("fast", "linear");
            }, i * 120);
        });

        //sets position and text of slice menu items
        $(".sliceMenuItem").each(function (i) {
            $(this).css("left", sliceMIPosition + "px");
            sliceMIPosition += 144;
            $(this).append('<p>' + indImages[i] + '</p>');
            $(this).css("color", "#fff");
            $(this).attr("id", indImages[i] + "_MI");
        });

        //sets full slide images
        $(".fullSlide").each(function (i) {
            $(this).css("background-image", "url(" + skinPath + "slicesImg/" + indImages[i] + "_full.jpg)");
            $(this).attr("id", indImages[i] + "_full");

            //adds title to each full slide
            var sTitle = indImages[i];
            $(this).append("<div class=\"fullSlideTitle\"><p>" + sTitle + "</p></div>");

            //adds bullet list to each slide
            var bulletList = slideBullets[i].replace(/,/g, "</br>");
            $(this).append("<div class=\"slideBullets\"><p>" + bulletList + "</p></div>");
        });

        //sets full slide message
        $("#fullSlideMessage").append("<a href=\"http://www.uschedule.com/Schedule.aspx\">Schedule a Live Demo!</a>");

        //displays alternate slice on hover
        var curSliceImg = "";
        var hovSliceImg = "";
        $(".sliceSlide").mouseover(function () {
            curSliceImg = $(this).css("background-image");
            hovSliceImg = curSliceImg.replace("_1.jpg", "_2.jpg");
            $(this).css("background-image", hovSliceImg);
            $(this).css("color", "#41b90c");
        });
        $(".sliceSlide").mouseout(function () {
            $(this).css("background-image", curSliceImg);
            $(this).css("color", "#fff");
        });

        //displays full slide, side message and slice menu on slice click
        $(".sliceSlide").click(function () {
            $("#sliceSlidesCon").fadeToggle("fast", "linear");
            var clickedSlice = $(this).attr("id");
            var displayFull = "#" + clickedSlice.replace("_slice", "_full");
            $(displayFull).fadeToggle("fast", "linear");
            $("#sliceMenuCon").slideToggle("fast", "linear");
            $("#fullSlideMessage").slideToggle("fast", "linear");
        });

        //switches displayed full slide on slide menu item click
        $(".sliceMenuItem").click(function () {
            var clickedMI = $(this).attr("id");
            var displayFull = "#" + clickedMI.replace("_MI", "_full");
            $(".fullSlide").css("display", "none");
            $(displayFull).fadeToggle("fast", "linear");
        });

        //changes slice menu item text on mouse over
        var curMenuItem;
        $(".sliceMenuItem").mouseenter(function () {
            curMenuItem = "#" + $(this).attr("id");
            $(curMenuItem).css("color", "#41b90c");
            $(curMenuItem).css("background-color", "#000");
        });
        $(".sliceMenuItem").mouseleave(function () {
            $(curMenuItem).css("color", "#ffffff");
            $(curMenuItem).css("background-color", "");
        });

        //goes to selected industry page on full slide click
        $(".fullSlide").click(function () {
            // Returns to slices, currently disabled in favor of going to a page on click
            //            $(this).fadeToggle("fast", "linear");
            //            $("#sliceSlidesCon").fadeToggle("fast", "linear");
            //            $("#sliceMenuCon").slideToggle("fast", "linear");

            //currently gets industry name from slide id (derived from slide image name), can be set up to us var indPages[] instead
            var clickedSlide = $(this).attr("id");
            var indUrl = "http://www.uschedule.com/" + clickedSlide.replace("_full", "") + ".aspx";
            window.location = indUrl;
        });
    });
});
