[Summary view] [Print] [Text view]

   1  $(document).ready(function() {
   2  
   3      // link demos

   4  
   5      $(".demoflow div.wrapper").click(function() {
   6  
   7          var demo = $(this).children('img').attr('_demo');
   8  
   9          if (demo) {
  10              location.href = '/repository/real-world/' + demo;
  11          }else {
  12              //alert('Under construction!');

  13          }
  14  
  15      });
  16  
  17      if ($("div.demoflow").size()) {
  18  
  19          var inst = new $.ui.carousel($("div.demoflow")[0], { height: 200, width: 310 });
  20  
  21          $("div.demoflow-button-left, div.demoflow-button-right").bind("mousedown", function() {
  22              var right = this.className.indexOf("right") == -1;
  23              if(inst.autoRotator) window.clearInterval(inst.autoRotator);
  24              inst.timer = window.setInterval(function() { inst.rotate(right ? "right" : null); }, 13);
  25          })
  26          .bind("mouseup", function() {
  27              window.clearInterval(inst.timer);
  28          });
  29  
  30          $('.demoflow div.shadow').hover(function() {
  31              this._lastopacity = $(this).css('opacity');
  32              $(this).stop().animate({opacity: 0 }, 300); 
  33          }, function() {
  34              $(this).stop().animate({opacity: this._lastopacity }, 300);
  35          });
  36  
  37  
  38          window.setTimeout(function() {
  39              inst.element.animate({ opacity: 1 },2000); inst.rotate(0,2000,0.45);
  40              window.setTimeout(function() {
  41                  inst.autoRotator = window.setInterval(function() { inst.rotate(0,2000,0.45); },5000);
  42              },3000);
  43          },0);
  44  
  45      }
  46  
  47      $('a').click(function(){
  48          this.blur();
  49      });
  50  
  51      // smooth hover effects by DragonInteractive

  52      var hover = hoverEffects();
  53      hover.init();
  54  
  55  });
  56  
  57      $.ui.carousel = function(element, options) {
  58  
  59          this.element = $(element);
  60          this.options = $.extend({}, options);
  61          var self = this;
  62  
  63          $.extend(this, {
  64              start: Math.PI/2,
  65              step: 2*Math.PI/$("> *", this.element).length,
  66              radiusX: 400,
  67              radiusY: -45,
  68              paddingX: this.element.outerWidth() / 2,
  69              paddingY: this.element.outerHeight() / 2
  70          });
  71  
  72          $("> *", this.element).css({ position: "absolute", top: 0, left: 0, zIndex: 1 });
  73          this.rotate();
  74          this.rotate("right");
  75  
  76          this.element.parent().bind("mousewheel", function(event ,delta) {
  77              if(self.autoRotator) window.clearInterval(self.autoRotator);
  78              self.rotate(delta < 0 ? "right" : "left");
  79              return false;
  80          });
  81  
  82      };
  83  
  84      $.ui.carousel.prototype.rotate = function(d,ani,speed) {
  85  
  86          this.start = this.start + (d == "right" ? -(speed || 0.03) : (speed || 0.03));
  87          var o = this.options;
  88          var self = this;
  89  
  90          setTimeout(function(){
  91              $("> *", self.element).each(function(i) {
  92                  var angle = self.start + i * self.step;
  93                  var x = self.radiusX * Math.cos(angle);
  94                  var y = self.radiusY * Math.sin(angle);
  95                  var _self = this;
  96  
  97                  var width = o.width * ((self.radiusY+y) / (2 * self.radiusY));
  98                  width = (width * width * width) / (o.width * o.width); //This makes the pieces smaller

  99                  var height = parseInt(width * o.height / o.width);
 100  
 101                  //This is highly custom - it will hide the elements at the back

 102                  $(_self).css({ visibility: height < 30 ? "hidden" : "visible" });
 103                  if(height < 30 && !ani) return; //This imrpoves the speed, but cannot be used with animation

 104  
 105  
 106                  if(ani) {
 107                      $(_self).animate({
 108                          top: Math.round(self.paddingY + y - height/2) + "px",
 109                          left: Math.round(self.paddingX + x - width/2) + "px",
 110                          width: Math.round(width) + "px",
 111                          height: Math.round(height) + "px"
 112                      },{ duration: ani, easing: "easeOutQuad" });
 113                  $(_self).css({ zIndex: Math.round(parseInt(100 * (self.radiusY+y) / (2 * self.radiusY))) });
 114                  } else {
 115                      $(_self).css({
 116                          top: self.paddingY + y - height/2 + "px",
 117                          left: self.paddingX + x - width/2 + "px",
 118                          width: width + "px",
 119                          height: height + "px",
 120                          zIndex: parseInt(100 * (self.radiusY+y) / (2 * self.radiusY))
 121                      });
 122                  }
 123  
 124                  $("div.shadow",_self).css({ opacity: 1 - (width / o.width) });
 125  
 126              });
 127          }, 0);
 128      }
 129  
 130  
 131  /**

 132   * All credit here goes to DragonInteractive and Yuri Vishnevsky

 133   */
 134  var hoverEffects = function() {
 135      var me = this;
 136      var args = arguments;
 137      var self = {
 138          c: {
 139              navItems: '.download .click-to-download, #launch-pad .launch-pad-button, div.demoflow-button-left, div.demoflow-button-right',
 140              navSpeed: ($.browser.safari ? 600: 350),
 141              snOpeningSpeed: ($.browser.safari ? 400: 250),
 142              snOpeningTimeout: 150,
 143              snClosingSpeed: function() {
 144                  if (self.subnavHovered()) return 123450;
 145                  return 150
 146              },
 147              snClosingTimeout: 700
 148          },
 149          init: function() {
 150              //$('.bg', this.c.navItems).css({

 151              //    'opacity': 0

 152              //});

 153              this.initHoverFades()
 154          },
 155          subnavHovered: function() {
 156              var hovered = false;
 157              $(self.c.navItems).each(function() {
 158                  if (this.hovered) hovered = true
 159              });
 160              return hovered
 161          },
 162          initHoverFades: function() {
 163              //$('#navigation .bg').css('opacity', 0);

 164              $(self.c.navItems).hover(function() {
 165                  self.fadeNavIn.apply(this)
 166              },
 167              function() {
 168                  var el = this;
 169                  setTimeout(function() {
 170                      if (!el.open) self.fadeNavOut.apply(el)
 171                  },
 172                  10)
 173              })
 174          },
 175          fadeNavIn: function() {
 176              $('.bg', this).stop().animate({
 177                  'opacity': 1
 178              },
 179              self.c.navSpeed)
 180          },
 181          fadeNavOut: function() {
 182              $('.bg', this).stop().animate({
 183                  'opacity': 0
 184              },
 185              self.c.navSpeed)
 186          },
 187          initSubmenus: function() {
 188              $(this.c.navItems).hover(function() {
 189                  $(self.c.navItems).not(this).each(function() {
 190                      self.fadeNavOut.apply(this);
 191                  });
 192                  this.hovered = true;
 193                  var el = this;
 194                  self.fadeNavIn.apply(el);
 195              },
 196              function() {
 197                  this.hovered = false;
 198                  var el = this;
 199                  if (!el.open) self.fadeNavOut.apply(el);
 200              })
 201          }
 202      };
 203  
 204      return self;
 205  };