API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Apr 4th, 2013
206
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 37.44 KB | None | 0 0
raw download clone embed print report
  1. /// <reference path="../../plugins/jquery/jquery-ui-1.10.0.js" />
  2. /// <reference path="../../plugins/jquery/jquery.transit.js" />
  3. /// <reference path="../../plugins/jquery/jquery-1.9.0.js" />
  4. /// <reference path="../../plugins/jquery/jquery.backstretch.js" />
  5. /// <reference path="../../plugins/customScroll/jquery.mCustomScrollbar.js" />
  6. /// <reference path="../../plugins/gsap/TweenMax.min.js" />
  7.  
  8. TweenMax.ticker.useRAF(false);
  9.  
  10. //Helpers
  11.  
  12. // Array shuffle
  13. function shuffle(o) {
  14.     /// <summary>Shuffles any given one dimensional array</summary>
  15.     /// <param name="o" type="Object">One dimensional array</param>
  16.  
  17.     for (var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
  18.     return o;
  19. };
  20.  
  21. //Global variables
  22. var key_hole_visiable = $("#key-hole").length, // Get keyhole visibility
  23.     testing_env = $("#key-hole-2").length; // Get underconstruction keyhole visibility
  24. var under_construction = $("#view-area-2").length; // Get underconstruction view area visibility
  25. var key_hole = $("#key-hole"); // Key hole DOM element, only visible at start -> "/"
  26. var sim_bg = $("#simulated-background"); // Simulated bg element
  27. var main_area = $("#main-area"); // Main area DOM element
  28. var menu_item = $(".menu-item"); // Menu item collection
  29. // Menu button array for animation purposes
  30. var menu_item_array = [menu_item[0],
  31.     [menu_item[1], menu_item[3]],
  32.     [menu_item[2], menu_item[4], menu_item[6], menu_item[9]],
  33.     [menu_item[5], menu_item[7], menu_item[8]],
  34.     menu_item[10]];
  35. var start_warning_show = true; // Let warning sign apear after time interval, can be changed
  36. var temp_menuitem_pos = {}; // Stores menu item original position for reset position purpose
  37. var temp_menuitem_ele = null; // Store temp menu item
  38.  
  39. // Layer route button handlers
  40. var layer_btn_handlers = {
  41.     "animals": function () {
  42.  
  43.         // Get location
  44.         var getTween = tweens.main_area.layer_buttons;
  45.  
  46.         // Define button tweens
  47.         var contact = getTween.getTween($(".info", "#animals-contact"), {
  48.             left: 0,
  49.             opacity: 1
  50.         }),
  51.         start_text = getTween.getTween($(".text", "#animals-start"), {
  52.             opacity: 0
  53.         }),
  54.         start_info = getTween.getTween($(".info", "#animals-start"), {
  55.             opacity: 1
  56.         }),
  57.         castle = getTween.getTween($(".info", "#animals-castle"), {
  58.             left: 0,
  59.             opacity: 1
  60.         });
  61.  
  62.  
  63.         $("#layers").on("mouseenter", "#animals-contact", function () {
  64.             contact.play();
  65.         }).on("mouseleave", "#animals-contact", function () {
  66.             contact.reverse();
  67.         });
  68.  
  69.         $("#layers").on("mouseenter", "#animals-start", function () {
  70.             start_info.play();
  71.             start_text.play();
  72.         }).on("mouseleave", "#animals-start", function () {
  73.             start_info.reverse();
  74.             start_text.reverse();
  75.         });
  76.  
  77.         $("#layers").on("mouseenter", "#animals-castle", function () {
  78.             castle.play();
  79.         }).on("mouseleave", "#animals-castle", function () {
  80.             castle.reverse();
  81.         });
  82.     },
  83.     "dress": function () {
  84.         var getT = tweens.main_area.layer_buttons;
  85.  
  86.         var animals_info = getT.getTween($(".info", "#dress-animals"), {
  87.             opacity: 1
  88.         }),
  89.         animals_text = getT.getTween($(".text", "#dress-animals"), {
  90.             opacity: 0
  91.         }),
  92.         start_info = getT.getTween($(".info", "#dress-start"),{opacity: 1}),
  93.         start_text = getT.getTween($(".text", "#dress-start"),{opacity: 0}),
  94.         hippy_info = getT.getTween($(".info", "#dress-hippy"),{opacity: 1}),
  95.         hippy_text = getT.getTween($(".text", "#dress-hippy"),{opacity: 0})
  96.  
  97.         $("#layers").on("mouseenter", "#dress-animals", function () {
  98.             animals_info.play();
  99.             animals_text.play();
  100.         }).on("mouseleave", "#dress-animals", function () {
  101.             animals_info.reverse();
  102.             animals_text.reverse();
  103.         });
  104.  
  105.         $("#layers").on("mouseenter", "#dress-start", function () {
  106.             start_info.play();
  107.             start_text.play();
  108.         }).on("mouseleave", "#dress-start", function () {
  109.             start_info.reverse();
  110.             start_text.reverse();
  111.         });
  112.  
  113.         $("#layers").on("mouseenter", "#dress-hippy", function () {
  114.             hippy_info.play();
  115.             hippy_text.play();
  116.         }).on("mouseleave", "#dress-hippy", function () {
  117.             hippy_info.reverse();
  118.             hippy_text.reverse();
  119.         });
  120.     },
  121.     "zuj": function () {
  122.         var g = tweens.main_area.layer_buttons.getTween;
  123.  
  124.         var information_info = g($(".info", "#zuj-information"),{opacity: 1,top: 56}),
  125.             information_text = g($(".text", "#zuj-information"),{opacity: 0}),
  126.             start_info = g($(".info", "#zuj-start"),{
  127.                 opacity: 1,
  128.                 left: -82
  129.             }),
  130.             start_text = g($(".text", "#zuj-start"),{opacity: 0}),
  131.             dress_info = g($(".info", "#zuj-dress"),{
  132.                 opacity: 1,
  133.                 top: -44
  134.             }),
  135.             dress_text = g($(".text", "#zuj-dress"),{
  136.                 opacity: 0  
  137.             });
  138.  
  139.         $("#layers").on("mouseenter", "#zuj-information", function () {
  140.             information_info.play();
  141.             information_text.play();
  142.         }).on("mouseleave", "#zuj-information", function () {
  143.             information_info.reverse();
  144.             information_text.reverse();
  145.         });
  146.  
  147.         $("#layers").on("mouseenter", "#zuj-start", function () {
  148.             start_info.play();
  149.             start_text.play();
  150.         }).on("mouseleave", "#zuj-start", function () {
  151.             start_info.reverse();
  152.             start_text.reverse();
  153.         });
  154.  
  155.         $("#layers").on("mouseenter", "#zuj-dress", function () {
  156.             dress_info.play();
  157.             dress_text.play();
  158.         }).on("mouseleave", "#zuj-dress", function () {
  159.             dress_info.reverse();
  160.             dress_text.reverse();
  161.         });
  162.     },
  163.     "contact": function () {
  164.         var g = tweens.main_area.layer_buttons.getTween;
  165.         var information_info = g($(".info", "#contact-information"), { opacity: 1, top: 19 }),
  166.         information_text = g($(".text", "#contact-information"), { opacity: 0 }),
  167.         start_info = g($(".info", "#contact-start"), {
  168.             opacity: 1
  169.         }),
  170.         start_text = g($(".text", "#contact-start"), { opacity: 0 });
  171.  
  172.         $("#layers").on("mouseenter", "#contact-start", function () {
  173.             start_info.play();
  174.             start_text.play();
  175.         }).on("mouseleave", "#contact-start", function () {
  176.             start_info.reverse();
  177.             start_text.reverse();
  178.         });
  179.  
  180.         $("#layers").on("mouseenter", "#contact-information", function () {
  181.             information_info.play();
  182.             information_text.play();
  183.         }).on("mouseleave", "#contact-information", function () {
  184.             information_info.reverse();
  185.             information_text.reverse();
  186.         });
  187.     },
  188.     "hippy": function () {
  189.         var g = tweens.main_area.layer_buttons.getTween;
  190.  
  191.         var st_info = g($(".info", "#hippy-start"),{opacity: 1}),
  192.             st_txt = g($(".text", "#hippy-start"),{opacity: 0}),
  193.             cont_info = g($(".info", "#hippy-contact"),{opacity: 1,top: 65}),
  194.             abs_info = g($(".info", "#hippy-abstract"),{opacity: 1, left: -167}),
  195.             abs_text = g($(".text", "#hippy-abstract"),{opacity: 0});
  196.  
  197.         $("#layers").on("mouseenter", "#hippy-start", function () {
  198.             st_info.play();
  199.             st_txt.play();
  200.         }).on("mouseleave", "#hippy-start", function () {
  201.             st_info.reverse();
  202.             st_txt.reverse();
  203.         });
  204.  
  205.         $("#layers").on("mouseenter", "#hippy-contact", function () {
  206.             cont_info.play();
  207.         }).on("mouseleave", "#hippy-contact", function () {
  208.             cont_info.reverse();
  209.         });
  210.  
  211.         $("#layers").on("mouseenter", "#hippy-abstract", function () {
  212.             abs_info.play();
  213.             abs_info.play();
  214.         }).on("mouseleave", "#hippy-abstract", function () {
  215.             abs_info.reverse();
  216.             abs_text.reverse();
  217.         });
  218.     },
  219.     "information": function () {
  220.         var g = tweens.main_area.layer_buttons.getTween;
  221.  
  222.         var start = g($(".info", "#information-start"),{opacity: 1}),
  223.             ani_info = g($(".info", "#information-animals"), { opacity: 1 }),
  224.             ani_text = g($(".text", "#information-animals"), { opacity: 0 }),
  225.             mas_info = g($(".info", "#information-masks"),{opacity: 1}),
  226.             mas_text = g($(".text", "#information-masks"),{opacity: 0}),
  227.             hippy = g($(".info", "#information-hippy"),{opacity: 1, left: 115});
  228.  
  229.         $("#layers").on("mouseenter", "#information-start", function () {
  230.             start.play();
  231.         }).on("mouseleave", "#information-start", function () {
  232.             start.reverse();
  233.         });
  234.  
  235.         $("#layers").on("mouseenter", "#information-animals", function () {
  236.             ani_info.play();
  237.             ani_text.play();
  238.         }).on("mouseleave", "#information-animals", function () {
  239.             ani_info.reverse();
  240.             ani_text.reverse();
  241.         });
  242.  
  243.         $("#layers").on("mouseenter", "#information-masks", function () {
  244.             mas_info.play();
  245.             mas_text.play();
  246.         }).on("mouseleave", "#information-masks", function () {
  247.             mas_info.reverse();
  248.             mas_text.reverse();
  249.         });
  250.  
  251.         $("#layers").on("mouseenter", "#information-hippy", function () {
  252.             hippy.play();
  253.         }).on("mouseleave", "#information-hippy", function () {
  254.             hippy.reverse();
  255.         });
  256.     },
  257.     "abstract": function () {
  258.         var g = tweens.main_area.layer_buttons.getTween;
  259.  
  260.         var information = g($(".info", "#abstract-information"), { opacity: 1, left: 212 }),
  261.             start = g($(".info", "#abstract-start"), { opacity: 1, top: 70 }),
  262.             castle = g($(".info", "#abstract-castle"), { opacity: 1, left: -30 });
  263.  
  264.         $("#layers").on("mouseenter", "#abstract-information", function () {
  265.             information.play();
  266.         }).on("mouseleave", "#abstract-information", function () {
  267.             information.reverse();
  268.         });
  269.  
  270.         $("#layers").on("mouseenter", "#abstract-start", function () {
  271.             start.play();
  272.         }).on("mouseleave", "#abstract-start", function () {
  273.             start.reverse();
  274.         });
  275.  
  276.         $("#layers").on("mouseenter", "#abstract-castle", function () {
  277.             castle.play();
  278.         }).on("mouseleave", "#abstract-castle", function () {
  279.             castle.reverse();
  280.         });
  281.     },
  282.     "masks": function () {
  283.  
  284.         var g = tweens.main_area.layer_buttons.getTween;
  285.  
  286.         var st_info = g($(".info", "#masks-start"), { opacity: 1 }),
  287.             st_text = g($(".text", "#masks-start"), { opacity: 0 }),
  288.             mas_info = g($(".info", "#masks-dress"), { opacity: 1 }),
  289.             mas_text = g($(".text", "#masks-dress"), { opacity: 0 }),
  290.             abs = g($(".info", "#masks-abstract"), { opacity: 1, top: 70 });
  291.  
  292.         $("#layers").on("mouseenter", "#masks-start", function () {
  293.             st_info.play();
  294.             st_text.play();
  295.         }).on("mouseleave", "#masks-start", function () {
  296.             st_info.reverse();
  297.             st_text.reverse();
  298.         });
  299.  
  300.         $("#layers").on("mouseenter", "#masks-dress", function () {
  301.             mas_info.play();
  302.             mas_text.play();
  303.         }).on("mouseleave", "#masks-dress", function () {
  304.             mas_info.reverse();
  305.             mas_text.reverse();
  306.         });
  307.  
  308.         $("#layers").on("mouseenter", "#masks-abstract", function () {
  309.             abs.play();
  310.         }).on("mouseleave", "#masks-abstract", function () {
  311.             abs.reverse();
  312.         });
  313.     },
  314.     "castle": function () {
  315.  
  316.         var g = tweens.main_area.layer_buttons.getTween;
  317.  
  318.         var start = g($(".info", "#castle-start"), { opacity: 1 }),
  319.             zuj_info = g($(".info", "#castle-zuj"), { opacity: 1 }),
  320.             zuj_text = g($(".text", "#castle-zuj"), { opacity: 0 }),
  321.             mas_info = g($(".info", "#castle-masks"), { opacity: 1 }),
  322.             mas_text = g($(".text", "#castle-masks"), { opacity: 0 });
  323.  
  324.  
  325.         $("#layers").on("mouseenter", "#castle-start", function () {
  326.             start.play();
  327.         }).on("mouseleave", "#castle-start", function () {
  328.             start.reverse();
  329.         });
  330.  
  331.         $("#layers").on("mouseenter", "#castle-zuj", function () {
  332.             zuj_info.play();
  333.             zuj_text.play();
  334.         }).on("mouseleave", "#castle-zuj", function () {
  335.             zuj_info.reverse();
  336.             zuj_text.reverse();
  337.         });
  338.  
  339.         $("#layers").on("mouseenter", "#castle-masks", function () {
  340.             mas_info.play();
  341.             mas_text.play();
  342.         }).on("mouseleave", "#castle-masks", function () {
  343.             mas_info.reverse();
  344.             mas_text.reverse();
  345.         });
  346.     }
  347. }
  348.  
  349. // DOM element map
  350. var map = {
  351.     main_area: $("#main-area"),
  352.     view_port: $("#view-port"),
  353.     view_area: $("#view-area"),
  354.     layer: $("#layers"),
  355.     menu: $("#menu")
  356. }
  357.  
  358. // Defined routes
  359. var routes = {
  360.     "start": {
  361.         url: "/",
  362.         opt: {
  363.             width: 816,
  364.             height: 816,
  365.             marginTop: -408,
  366.             marginLeft: -408,
  367.             rotation: "0_short"
  368.         }
  369.     },
  370.     "animals": {
  371.         ele: $(".animals","#menu"),
  372.         url: "/i/zveri/",
  373.         opt: {
  374.             width: 3326,
  375.             height: 3326,
  376.             marginTop: -2100,
  377.             marginLeft: -1900,
  378.             rotation: "0_short"
  379.         }
  380.     },
  381.     "contact": {
  382.         ele: $(".contact", "#menu"),
  383.         url: "/kontakti/",
  384.         opt: {
  385.             width: 3326,
  386.             height: 3326,
  387.             marginTop: -900,
  388.             marginLeft: -1480,
  389.             rotation: "80_short"
  390.         }
  391.     },
  392.     "information": {
  393.         ele: $(".information", "#menu"),
  394.         url: "/informacija/",
  395.         opt: {
  396.             width: 3326,
  397.             height: 3326,
  398.             marginTop: -1445,
  399.             marginLeft: -1680,
  400.             rotation: "-5_short"
  401.         }
  402.     },
  403.     "castle": {
  404.         ele: $(".castle", "#menu"),
  405.         url: "/i/pasaku-teli/",
  406.         opt: {
  407.             width: 3326,
  408.             height: 3326,
  409.             marginTop: -866,
  410.             marginLeft: -1560,
  411.             rotation: "-95_short"
  412.         }
  413.     },
  414.     "masks": {
  415.         ele: $(".masks", "#menu"),
  416.         url: "/i/maskas-un-cepures/",
  417.         opt: {
  418.             width: 3326,
  419.             height: 3326,
  420.             marginTop: -873,
  421.             marginLeft: -1833,
  422.             rotation: "-32_short"
  423.         }
  424.     },
  425.     "abstract": {
  426.         ele: $(".abstract", "#menu"),
  427.         url: "/i/abstrakti-teli/",
  428.         opt: {
  429.             width: 3326,
  430.             height: 3326,
  431.             marginTop: -2637,
  432.             marginLeft: -923,
  433.             rotation: "-180_short"
  434.         }
  435.     },
  436.     "hippy": {
  437.         ele: $(".hippy", "#menu"),
  438.         url: "/i/raksturlomas/",
  439.         opt: {
  440.             width: 3326,
  441.             height: 3326,
  442.             marginTop: -2100,
  443.             marginLeft: -1100,
  444.             rotation: "-110_short"
  445.         }
  446.     },
  447.     "dress": {
  448.         ele: $(".dress", "#menu"),
  449.         url: "/i/vakarterpi/",
  450.         opt: {
  451.             width: 3326,
  452.             height: 3326,
  453.             marginTop: -850,
  454.             marginLeft: -785,
  455.             rotation: "-10_short"
  456.         }
  457.     },
  458.     "zuj": {
  459.         ele: $(".zuj", "#menu"),
  460.         url: "/i/ziemassvetki-un-jaunais-gads/",
  461.         opt: {
  462.             width: 3326,
  463.             height: 3326,
  464.             marginTop: -916,
  465.             marginLeft: -1442,
  466.             rotation: "0_short"
  467.         }
  468.     }
  469. }
  470.  
  471. var loadContent = function (_routeName) {
  472.     /// <summary>Loads content into layer</summary>
  473.     /// <param name="_routeName" type="String">Content index name</param>
  474.  
  475.     // TODO: Check stackoverflow
  476.  
  477. }
  478.  
  479. // Collections of all tweens
  480. // a.k.a. all site animations
  481. var tweens = {
  482.     start: {
  483.         key_hole: {
  484.             expand: function () {
  485.                 return TweenMax.to(key_hole, 2, {
  486.                     ease: 'Expo.easeIn',
  487.                     width: 8645,
  488.                     height: 8000,
  489.                     left: -((8645 - $("#view-area").width()) / 2),
  490.                     top: -((8000 - $("#view-area").height()) / 2),
  491.                     onComplete: function () {
  492.                         key_hole.fadeOut(800, function () {
  493.                             key_hole.remove();
  494.                             sim_bg.remove();
  495.  
  496.                             $("#view-port").removeClass("view-port-bg-start").addClass("view-port-bg-normal");
  497.                         });
  498.                     }
  499.                 })
  500.             },
  501.             light_contur: function () {
  502.  
  503.             }
  504.         },
  505.         sim_background: function () {
  506.  
  507.             return TweenMax.to(sim_bg, 2.7, {
  508.                 ease: 'Expo.easeInOut',
  509.                 width: $("#view-port").width() + "px",
  510.                 height: $("#view-port").height() + "px",
  511.                 top: ($(window).height() >= $("#view-area").height()) ?
  512.                     -(($(window).height() - $("#view-area").height()) / 2) :
  513.                     0,
  514.                 left: ($(window).width() >= $("#view-area").width()) ?
  515.                     -(($(window).width() - $("#view-area").width()) / 2) :
  516.                     0
  517.             });
  518.  
  519.         },
  520.         light_contur: function () {
  521.  
  522.             return TweenMax.to($("#light-contur"), 1, {
  523.                 opacity: 1,
  524.                 paused: true,
  525.                 delay: 0.2
  526.             });
  527.         },
  528.         rev_light_contur: function () {
  529.             return TweenMax.to($("#light-contur"), 1, {
  530.                 opacity: 0
  531.             });
  532.         },
  533.         warning: function () {
  534.             return TweenMax.to($(".warning", "#start-content"), 1, {
  535.                 opacity: 0
  536.             });
  537.         },
  538.         title: function () {
  539.             return TweenMax.to($(".title", "#start-content"), 1, {
  540.                 opacity: 0
  541.             });
  542.         }
  543.     },
  544.     main_area: {
  545.         start: {
  546.             expand: function () {
  547.                 return TweenMax.to(main_area, 2.7, {
  548.                     ease: 'Expo.easeInOut',
  549.                     css: {
  550.                         marginTop: -408,
  551.                         marginLeft: -408,
  552.                         width: 816,
  553.                         height: 816
  554.                     }
  555.                 });
  556.             }
  557.         },
  558.         menu: {
  559.             shrink: function () {
  560.                 return 0;
  561.             }
  562.         },
  563.         route: {
  564.             toRoute: function (_routeName) {
  565.                 return TweenMax.to(map.main_area, 2, {
  566.                     css: routes[_routeName].opt,
  567.                     onComplete: function () {
  568.                         // TODO: add callback functions
  569.                     },
  570.                     paused: true
  571.                 });
  572.             },
  573.             hide_menuitem: function (_this) {
  574.                 return TweenMax.to(_this, 1, {
  575.                     css: {
  576.                         opacity: 0
  577.                     },
  578.                     onComplete: function () {
  579.                         TweenMax.set(_this, {
  580.                             css: {
  581.                                 left: temp_menuitem_pos.left,
  582.                                 top: temp_menuitem_pos.top,
  583.                                 scale: [1,1]
  584.                             }
  585.                         });
  586.                         map.menu.css({
  587.                             display: "none"
  588.                         });
  589.                     }
  590.                 });
  591.             },
  592.             show_content: function () {
  593.                 return TweenMax.to(map.layer, 1, {
  594.                     css: {
  595.                         opacity: 1
  596.                     }
  597.                 });
  598.             },
  599.             hide_content: function () {
  600.                 return TweenMax.to(map.layer, 1, {
  601.                     css: {
  602.                         opacity: 0
  603.                     }
  604.                 });
  605.             },
  606.             show_menuitem: function (_this) {
  607.                 return TweenMax.to(_this, 1, {
  608.                     css: {
  609.                         opacity: 1
  610.                     }
  611.                 });
  612.             },
  613.             getToRoute: function (_routeName) {
  614.                 return TweenMax.to(map.main_area, 2, {
  615.                     css: routes[_routeName].opt,
  616.                     ease: "easeIn"
  617.                 });
  618.             }
  619.         },
  620.         layer_buttons: {
  621.             getTween: function (_this, _properties) {
  622.                 return TweenMax.to(_this,0.5, {
  623.                     css: _properties,
  624.                     paused: true,
  625.                     delay: 0.2
  626.                 });
  627.             }
  628.         }
  629.     },
  630.     menu: {
  631.         show: function () {
  632.             return TweenMax.staggerTo(menu_item_array, 1, {
  633.                 opacity: 1
  634.             }, 0.25)
  635.         },
  636.         hide: function (lastElement) {
  637.             // Hide menu
  638.             // TODO: Stagger each menu item with 0.1 interval leaving lastElement as last element
  639.         },
  640.         menu_item_title: function (_this) {
  641.             return TweenMax.to(_this.parent().find("img.title"), 0.3, {
  642.                 css: {
  643.                     scaleX: 1,
  644.                     scaleY: 1
  645.                 },
  646.                 ease: "linear",
  647.                 onStart: function () {
  648.                     TweenMax.set(_this.parent().find("img.title"), {
  649.                         css: {
  650.                             opacity: 1
  651.                         }
  652.                     });
  653.                 },
  654.                 onReverseComplete: function () {
  655.                     TweenMax.set(_this.parent().find("img.title"), {
  656.                         css: {
  657.                             opacity: 0
  658.                         }
  659.                     });
  660.                 }
  661.             });
  662.         },
  663.         menu_item_icon: function (_this) {
  664.             return TweenMax.to(_this.parent().find("img.icon"), 0.3, {
  665.                 css: {
  666.                     scaleX: 2,
  667.                     scaleY: 0
  668.                 },
  669.                 ease: "linear"
  670.             });
  671.         },
  672.         menu_item_click: {
  673.             clicked_btn: function (_this) {
  674.                 return TweenMax.to(_this, 2, {
  675.                     css: {
  676.                         left: 472,
  677.                         top: 292.5,
  678.                         scale: [2,2]
  679.                     },
  680.                     ease: "easeIn"
  681.                 });
  682.             },
  683.             other_btns: function (_this) {
  684.                 return TweenMax.to(_this, 1, {
  685.                     css: {
  686.                         opacity: 0
  687.                     }
  688.                 });
  689.             }
  690.         }
  691.     },
  692.     layer: {
  693.  
  694.     },
  695.     gallery: {
  696.  
  697.     }
  698. }
  699.  
  700. var routeExe = {
  701.     menu_to_route: function (_this) {
  702.         timelines.menu.item_click(_this).play();
  703.     },
  704.     route_to_route: function (_routeName) {
  705.        
  706.         // 1. reove click,mouseeneter
  707.         // 2. trigger mouseleave
  708.         // 3. remove mouseleave
  709.         // 4. set appropriate menu button to center and scale[2,2]
  710.         // 5. fade out content
  711.         // .. onComplete clear inner html
  712.         // 6. push state with new url
  713.         // 7. start routeTo and fade in menu button at same time
  714.         // 8. onComplete start to load new content
  715.         // 9. onLoad fadeOut menubutton and fadein content+ +  
  716.  
  717.     },
  718.     start: function () {
  719.         // 1. Fade out layers
  720.         // ...clear layers html
  721.         // 2. Route to start
  722.         // 3. Fade in menu and attach menuhandler
  723.  
  724.         tweens.main_area.route.hide_content().eventCallback("onComplete", function () {
  725.  
  726.             // Clear layers html
  727.             map.layer.html("");
  728.            
  729.             // Hide layers
  730.             map.layer.css({
  731.                 display: "none"
  732.             });
  733.  
  734.             // Shows menu
  735.             map.menu.css({
  736.                 display: "block"
  737.             });
  738.  
  739.             // Route to start
  740.             tweens.main_area.route.getToRoute("start").eventCallback("onComplete", function () {
  741.  
  742.                 // Attach event handler
  743.                 menuButtonHandler();
  744.  
  745.                 // Fade in menu
  746.                 tweens.menu.show();
  747.  
  748.             });
  749.         });
  750.     }
  751. }
  752.  
  753. // Timeline object
  754. // stored all animations in timelines
  755. // it's possible to call them independently trough console
  756. var timelines = {
  757.     start: {
  758.         intro: function () {
  759.             _this = new TimelineMax({
  760.                 onComplete: function () {
  761.                     $("#menu").css("display", "block");
  762.                     timelines.menu.show().play();
  763.                 },
  764.                 paused: true
  765.             });
  766.             _this.add([
  767.                 tweens.start.key_hole.expand(),
  768.                 tweens.start.sim_background(),
  769.                 tweens.main_area.start.expand()
  770.             ]);
  771.  
  772.             return _this;
  773.         },
  774.         fade_out: function () {
  775.             _this = new TimelineMax({
  776.                 onComplete: function () {
  777.                     $("#start-content").remove();
  778.                     timelines.start.intro().play();
  779.                 },
  780.                 paused: true
  781.             });
  782.             _this.add([
  783.                 tweens.start.title(),
  784.                 tweens.start.rev_light_contur(),
  785.                 tweens.start.warning()
  786.             ]);
  787.  
  788.             return _this;
  789.         }
  790.     },
  791.     menu: {
  792.         show: function () {
  793.             _this = new TimelineMax();
  794.  
  795.             _this.add(tweens.menu.show());
  796.  
  797.             return _this;
  798.         },
  799.         hover_item: function (_dom) {
  800.             _this = new TimelineMax({ paused: true });
  801.  
  802.             _this.add([
  803.                 tweens.menu.menu_item_icon(_dom),
  804.                 tweens.menu.menu_item_title(_dom)
  805.             ]);
  806.  
  807.             return _this;
  808.         },
  809.         item_click: function (_this) {
  810.             // Get routename
  811.             var routeName = _this.find("a.handler").attr("data-menu-item");
  812.            
  813.             // Push HTML state
  814.             history.pushState("", "", routes[routeName].url);
  815.  
  816.             // Set up Timeline object
  817.             var _self = new TimelineMax(
  818.                 {
  819.                     paused: true,
  820.                     onComplete: function () {
  821.  
  822.                         // Hide layer
  823.                         TweenMax.set(map.layer, {
  824.                             css: {
  825.                                 display: "block",
  826.                                 opacity: 0
  827.                             }
  828.                         });
  829.  
  830.                         // Load content
  831.                         map.layer.load("" + routes[routeName].url + " #" + routeName, function (data) {
  832.  
  833.                             // Hide menu button and fade in loaded content
  834.                             timelines.main_area.show_content(_this).play();
  835.  
  836.                             // If we get information route, attach customscrollbar plugin
  837.                             if (routeName === "information") {
  838.                                 $(".text", "#information-content").mCustomScrollbar({
  839.                                     set_width: 436,
  840.                                     set_height: 357,
  841.                                 });
  842.                             }
  843.  
  844.                             // Attach layers event handler
  845.                             attachLayerBtnHandlers();
  846.  
  847.                         });
  848.                     }
  849.                 });
  850.  
  851.             // First fade out all other buttons
  852.             _self.add(tweens.menu.menu_item_click.other_btns($(".menu-item", "#menu").not(_this)));
  853.  
  854.             // Secon pull menu button to center and animate route
  855.             _self.add([
  856.                 tweens.menu.menu_item_click.clicked_btn(_this),
  857.                 tweens.main_area.route.getToRoute(routeName)
  858.             ]);
  859.  
  860.             // Return object for use
  861.             return _self;
  862.         }
  863.     },
  864.     main_area: {
  865.         show_content: function (_this) {
  866.             var _self = new TimelineMax({ paused: true });
  867.  
  868.  
  869.             _self.add(
  870.                 tweens.main_area.route.hide_menuitem(_this)
  871.             );
  872.             _self.add(
  873.                 tweens.main_area.route.show_content());
  874.            
  875.  
  876.             return _self;
  877.         }
  878.     },
  879.     layers: {
  880.  
  881.     },
  882.     gallery: {
  883.  
  884.     }
  885. }
  886.  
  887. // Custom binds for animation manipulation
  888. var binds = {
  889.     start: {
  890.         lc_click: function () {
  891.             start_warning_show = false;
  892.             $(this).off("mouseenter mouseleave");
  893.             timelines.start.fade_out().play();
  894.         }
  895.     },
  896.     menu: {
  897.     },
  898.     main_area: {
  899.  
  900.     },
  901.     gallery: {
  902.  
  903.     }
  904. }
  905.  
  906. // Set css rules for cross browser support
  907. // all chrome,firefox,opera,safari broswers >2009 year
  908. // ie9+
  909. var xbrowser = function() {
  910.     /// <summary>Set cross browser css rules for elements</summary>
  911.  
  912.  
  913.     // Set starting page images
  914.     TweenMax.set($("#light-contur"), {
  915.         css: {
  916.             opacity: 0
  917.         }
  918.     });
  919. }
  920.  
  921. // Resize title,price,size fonts using trim and fit
  922. var resizeDetails = function () {
  923.     /// <summary>Resizes image surface detail fonts to fit container</summary>
  924.  
  925.  
  926.     if ($("#layers")[0] > 0) {
  927.         $(".title", ".detail-container").textfill();
  928.         $(".size", ".detail-container").textfill();
  929.         $(".price", ".detail-container").textfill();
  930.     }
  931.  
  932. }
  933.  
  934. // Update legs position all the time
  935. var legPos = function () {
  936.     /// <summary>Updates fixed leg position</summary>
  937.  
  938.  
  939.     // Legs positioning
  940.     if (under_construction) {
  941.         $("#legs-2").css("bottom", "-" + $("#view-area-2").offset().top + "px")
  942.     } else {
  943.         $("#legs").css("bottom", "-" + $("#view-area").offset().top + "px")
  944.     }
  945.  
  946.  
  947. }
  948.  
  949. // Trim text inside information divisions on image surface
  950. var trimAndFit = function () {
  951.     /// <summary>Finds all elements and resizes fonts to container size</summary>
  952.  
  953.     $("#layers").find(".detail-container").each(function () {
  954.         $(".title", this).text($(".title", this).text().trim());
  955.         $(".size", this).text($(".size", this).text().trim());
  956.         $(".price", this).text($(".price", this).text().trim());
  957.     });
  958.  
  959.     $(".title", ".detail-container").fill_with_text();
  960.     $(".size", ".detail-container").fill_with_text();
  961.     $(".price", ".detail-container").fill_with_text();
  962. }
  963.  
  964. // Update keyHoleComponent positions
  965. // on start screen
  966. var keyHolePos = function () {
  967.     /// <summary>Updates key hole position</summary>
  968.  
  969.     if (under_construction) {
  970.         var keyHoleStyle2 = {
  971.             'left': -((375 - $("#view-area-2").width()) / 2) + "px",
  972.             'top': -((375 - $("#view-area-2").height()) / 2) + "px"
  973.         }
  974.         $("#key-hole-2").css(keyHoleStyle2)
  975.     } else {
  976.         var keyHoleStyle = {
  977.             'left': -(($("#key-hole").width() - $("#view-area").width()) / 2) + "px",
  978.             'top': -((375 - $("#view-area").height()) / 2) + "px"
  979.         }
  980.  
  981.         var simulatedBgStyle = {
  982.             'left': -((375 - $("#view-area").width()) / 2) + "px",
  983.             'top': -((375 - $("#view-area").height()) / 2) + "px"
  984.         }
  985.         var starting_content = {
  986.             'left': -(($("#start-content").width() - $("#view-area").width()) / 2) + "px",
  987.             'top': -((375 - $("#view-area").height()) / 2) + "px"
  988.         }
  989.  
  990.  
  991.         $("#simulated-background").css(simulatedBgStyle);
  992.         $("#key-hole").css(keyHoleStyle)
  993.         $("#start-content").css(starting_content);
  994.     }
  995. }
  996.  
  997. // Set KeyHoleComponent event handlers
  998. // and intro animation launch
  999. var keyHoleHandler = function () {
  1000.     /// <summary>Attach key hole handlers</summary>
  1001.  
  1002.  
  1003.     // Define light contur animation timeline
  1004.     var light_contur = tweens.start.light_contur();
  1005.  
  1006.     // Attach functions to even listeners
  1007.     $("#light-contur").on('mouseenter', function () {
  1008.         light_contur.play();
  1009.     }).on('mouseleave', function () {
  1010.         light_contur.reverse();
  1011.     });
  1012.  
  1013.     // Launch on click event
  1014.     $("#light-contur").on("click", binds.start.lc_click);
  1015.  
  1016. }
  1017.  
  1018. // Set menu button handlers
  1019. var menuButtonHandler = function () {
  1020.     /// <summary>Attach menu handlers</summary>
  1021.  
  1022.  
  1023.     // Find all menu buttons and assign actions to each of them
  1024.     $("#menu").find(".menu-item a.handler").each(function () {
  1025.  
  1026.         // Define menu buttons timeline
  1027.         var menu_tl = timelines.menu.hover_item($(this));
  1028.  
  1029.         // Set title begining css rules
  1030.         TweenMax.set($(this).parent().find("img.title"), {
  1031.             css: {
  1032.                 scaleY: 0,
  1033.                 scaleX: 0,
  1034.                 opacity: 0
  1035.             }
  1036.         });
  1037.  
  1038.         // Set icon begining css rules
  1039.         TweenMax.set($(this).parent().find("img.icon"), {
  1040.             css: {
  1041.                 scaleY: 1,
  1042.                 scaleX: 1,
  1043.                 opacity: 1
  1044.             }
  1045.         });
  1046.  
  1047.         // Actions for mouseenter/mouseleave/click
  1048.         $(this).on("mouseenter",function () {
  1049.             $(this).parent().css({"z-index": "10"});
  1050.             menu_tl.play();
  1051.         }).on("mouseleave",function () {
  1052.             $(this).parent().css({ "z-index": "0" });
  1053.             menu_tl.reverse();
  1054.         }).on("click tap",function () {
  1055.             _this = $(this).parent();
  1056.             // Remove all events on all menu buttons
  1057.             $(".menu-item a.handler", "#menu").off("mouseenter mouseleave click");
  1058.             // Save current menu buttons position
  1059.             temp_menuitem_pos = _this.position();
  1060.             temp_menuitem_ele = _this;
  1061.             // Animate new main area position
  1062.             menu_tl.reverse().eventCallback("onReverseComplete", function () {
  1063.  
  1064.                 // Execute menu to route
  1065.                 routeExe.menu_to_route(_this);
  1066.             });
  1067.         });
  1068.  
  1069.     });
  1070. }
  1071.  
  1072. // Set route button event handlers and destinations
  1073. // and push history state
  1074. var layerRouteBtnHandler = function () {
  1075.     /// <summary>Attach layer route button handlers</summary>
  1076.  
  1077.     // Define destination for route buttons
  1078.     $("#layers").delegate(".route-btn", "mouseenter", function () {
  1079.         $(this).bind('click', function () {
  1080.             var routeName = $(this).attr("data-route");
  1081.  
  1082.             // Push new URL and execute route
  1083.             if (routeName === "start") {
  1084.  
  1085.                 // Push state
  1086.                 history.pushState("", "", "/");
  1087.  
  1088.                 // Execute route
  1089.                 routeExe.start();
  1090.  
  1091.             } else {
  1092.  
  1093.                 // Push state
  1094.                 history.pushState("", "", routes[routeName].url);
  1095.  
  1096.                 // Execute route
  1097.                 routeExe.route_to_route(routeName);
  1098.  
  1099.             }
  1100.  
  1101.         });
  1102.     }).on('mouseleave', function () {
  1103.         $(this).unbind('click');
  1104.     });
  1105.  
  1106.  
  1107. }
  1108.  
  1109. // Attach appropriate handlers
  1110. // this is needed to increase overall performance
  1111. // attaching destinct handlers only if needed
  1112. // not all at once
  1113. var attachLayerBtnHandlers = function() {
  1114.     /// <summary>Attach layer route button animations</summary>
  1115.  
  1116.  
  1117.     if ($(".layer-item", "#layers").length) {
  1118.  
  1119.         _this = $(".layer-item", "#layers");
  1120.  
  1121.         // Get appropriate handlers and launch them
  1122.         layer_btn_handlers[_this.attr("data-current-pos")]();
  1123.  
  1124.     }
  1125.  
  1126. }
  1127.  
  1128.  
  1129. // Initiation functions
  1130. var init = function () {
  1131.  
  1132.     // Update legs position
  1133.     legPos();
  1134.  
  1135.     if (key_hole_visiable > 0) {
  1136.         // Update keyhole
  1137.         keyHolePos();
  1138.  
  1139.         // Update keyhole event handlers
  1140.         keyHoleHandler();
  1141.  
  1142.         // Warning direction
  1143.         setTimeout(function () {
  1144.             if (start_warning_show)
  1145.                 $(".warning", "#start-content").fadeIn(800);
  1146.         }, 3000);
  1147.     }
  1148.  
  1149.     if (testing_env > 0) {
  1150.         console.log("Under construction site");
  1151.         // Update keyhole
  1152.         keyHolePos();
  1153.     }
  1154.  
  1155.     // If information layer is loaded at first
  1156.     if ($("#information-content").length > 0) {
  1157.         $(".text", "#information-content").mCustomScrollbar({
  1158.             set_width: 436,
  1159.             set_height: 357,
  1160.         });
  1161.     }
  1162.  
  1163.     // Set manu button event Handlers
  1164.     menuButtonHandler();
  1165.  
  1166.     // Set route button event handlers and destinations
  1167.     layerRouteBtnHandler();
  1168.  
  1169.     // Attach appropriate animations to layer buttons
  1170.     attachLayerBtnHandlers();
  1171.  
  1172.     // Resize details
  1173.     resizeDetails();
  1174.  
  1175.     //Trim
  1176.     trimAndFit();
  1177.  
  1178.     // Disable any functions if #menu div click event is fired
  1179.     $("#menu").bind('click', false);
  1180.  
  1181.     // Cross browser css rule ssupport
  1182.     xbrowser();
  1183.  
  1184.     // Attach handlers to layers buttons
  1185.     attachLayerBtnHandlers();
  1186. }
  1187.  
  1188.  
  1189. // On resize update functions
  1190. $(window).resize(function () {
  1191.  
  1192.     // Update legs position
  1193.     legPos();
  1194.  
  1195.     if (key_hole_visiable > 0) {
  1196.         // Update keyhole
  1197.         keyHolePos();
  1198.     }
  1199.  
  1200. });
  1201.  
  1202. // Initial function after window is fully loaded
  1203. $(window).load(function () {
  1204.  
  1205.     // Set keyhole position
  1206.     if ($("#key-hole").length || $("#key-hole-2").length)
  1207.         keyHolePos();
  1208.  
  1209.     // Normal site
  1210.     TweenMax.to($("#view-port"), 0.5, {
  1211.         css: {
  1212.             opacity: 1
  1213.         }
  1214.     });
  1215.    
  1216.     // Under construction site
  1217.     TweenMax.to($("#view-port-2"), 0.5, {
  1218.         css: {
  1219.             opacity: 1
  1220.         }
  1221.     });
  1222.    
  1223.  
  1224.     // Launch initialisation
  1225.     init();
  1226. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!