/**
 * Interface Elements for jQuery
 * 3D Carousel
 * 
 * http://interface.eyecon.ro
 * 
 * Copyright (c) 2006 Stefan Petre
 * Dual licensed under the MIT (MIT-LICENSE.txt) 
 * and GPL (GPL-LICENSE.txt) licenses.
 *
 */
/**
 * Created a 3D Carousel from a list of images, with reflections and animated by mouse position
 * 
 * @example window.onload = 
 *      function()
 *      {
 *        $('#carousel').Carousel(
 *          {
 *            itemWidth: 110,
 *            itemHeight: 62,
 *            itemMinWidth: 50,
 *            items: 'a',
 *            reflections: .5,
 *            rotationSpeed: 1.8
 *          }
 *        );
 *      }
 * HTML
 *      <div id="carousel">
 *        <a href="" title=""><img src="" width="100%" /></a>
 *        <a href="" title=""><img src="" width="100%" /></a>
 *        <a href="" title=""><img src="" width="100%" /></a>
 *        <a href="" title=""><img src="" width="100%" /></a>
 *        <a href="" title=""><img src="" width="100%" /></a>
 *      </div>
 * CSS
 *      #carousel
 *      {
 *        width: 700px;
 *        height: 150px;
 *        background-color: #111;
 *        position: absolute;
 *        top: 200px;
 *        left: 100px;
 *      }
 *      #carousel a
 *      {
 *        position: absolute;
 *        width: 110px;
 *      }
 *
 * @desc Creates a 3D carousel from all images inside div tag with id 'carousel'
 *
 *
 * @name 3D Carousel
 * @description Created a 3D Carousel from a list of images, with reflections and animated by mouse position
 * @param Hash hash A hash of parameters
 * @option String items items selection
 * @option Integer itemWidth the max width for each item
 * @option Integer itemHeight the max height for each item
 * @option Integer itemMinWidth the minimum width for each item, the height is automaticaly calculated to keep proportions
 * @option Float rotationSpeed the speed for rotation animation
 * @option Float reflectionSize the reflection size a fraction from items' height
 *
 * @type jQuery
 * @cat Plugins/Interface
 * @author Stefan Petre
 */
jQuery.iCarousel = {
  
  build : function(options)
  {
    return this.each(
      function()
      {
        var el = this;
        var increment = 2*Math.PI/360;
        var maxRotation = 2*Math.PI;
        if(jQuery(el).css('position') != 'relative' && jQuery(el).css('position') != 'absolute') {
          jQuery(el).css('position', 'relative');
        }
        el.carouselCfg = {
          items : jQuery(options.items, this),
          itemWidth : options.itemWidth,
          itemHeight : options.itemHeight,
          itemMinWidth : options.itemMinWidth,
          maxRotation : maxRotation,
          size : jQuery.iUtil.getSize(this),
          position : jQuery.iUtil.getPosition(this),
          start : Math.PI/2,
          rotationSpeed : options.rotationSpeed,
          reflectionSize : options.reflections,
          reflections : [],
          protectRotation : false,
          increment: 2*Math.PI/360
        };
        el.carouselCfg.radiusX = (el.carouselCfg.size.w - el.carouselCfg.itemWidth)/2;
        el.carouselCfg.radiusY =  (el.carouselCfg.size.h - el.carouselCfg.itemHeight - el.carouselCfg.itemHeight * el.carouselCfg.reflectionSize)/2;
        el.carouselCfg.step =  2*Math.PI/el.carouselCfg.items.size();
        el.carouselCfg.paddingX = el.carouselCfg.size.w/2;
        el.carouselCfg.paddingY = el.carouselCfg.size.h/2 - el.carouselCfg.itemHeight * el.carouselCfg.reflectionSize;
        var reflexions = document.createElement('div');
        jQuery(reflexions)
          .css(
            {
              position: 'absolute',
              zIndex: 1,
              top: 0,
              left: 0
            }
          );
        jQuery(el).append(reflexions);
        el.carouselCfg.items
          .each(
            function(nr)
            {
              image = jQuery('img', this).get(0);
              height = parseInt(el.carouselCfg.itemHeight*el.carouselCfg.reflectionSize);
//              if (jQuery.browser.msie) {
                canvas = document.createElement('img');
                jQuery(canvas).css('position', 'absolute');
                canvas.src = image.src;       
                canvas.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(opacity=60, style=1, finishOpacity=0, startx=0, starty=0, finishx=0)';
/*          
              } else {
                canvas = document.createElement('canvas');
                if (canvas.getContext) {
                  context = canvas.getContext("2d");
                  canvas.style.position = 'absolute';
                  canvas.style.height = height +'px';
                  canvas.style.width = el.carouselCfg.itemWidth+'px';
                  canvas.height = height;
                  canvas.width = el.carouselCfg.itemWidth;
                  context.save();
            
                  context.translate(0,height);
                  context.scale(1,-1);
                  
                  context.drawImage(
                    image, 
                    0, 
                    0, 
                    el.carouselCfg.itemWidth, 
                    height
                  );
          
                  context.restore();
                  
                  context.globalCompositeOperation = "destination-out";
                  var gradient = context.createLinearGradient(
                    0, 
                    0, 
                    0, 
                    height
                  );
                  
                  gradient.addColorStop(1, "rgba(255, 255, 255, 1)");
                  gradient.addColorStop(0, "rgba(255, 255, 255, 0.6)");
            
                  context.fillStyle = gradient;
                  if (navigator.appVersion.indexOf('WebKit') != -1) {
                    context.fill();
                  } else {
                    context.fillRect(
                      0, 
                      0, 
                      el.carouselCfg.itemWidth, 
                      height
                    );
                  }
                }
              }
*/              
              el.carouselCfg.reflections[nr] = canvas;
              jQuery(reflexions).append(canvas);
            }
          )
          .bind(
            'mouseover',
            function(e)
            {
              el.carouselCfg.protectRotation = true;
              el.carouselCfg.speed = el.carouselCfg.increment*0.1 * el.carouselCfg.speed / Math.abs(el.carouselCfg.speed);
              return false;
            }
          )
          .bind(
            'mouseout',
            function(e)
            {
              el.carouselCfg.protectRotation = false;
              return false;
            }
          );
        jQuery.iCarousel.positionItems(el);
        el.carouselCfg.speed = el.carouselCfg.increment*0.2;
        el.carouselCfg.rotationTimer = window.setInterval(
          function()
          {
            el.carouselCfg.start += el.carouselCfg.speed;
            if (el.carouselCfg.start > maxRotation)
              el.carouselCfg.start = 0;
            jQuery.iCarousel.positionItems(el);
          },
          20
        );
        jQuery(el)
          .bind(
            'mouseout',
            function()
            {
              el.carouselCfg.speed = el.carouselCfg.increment*0.2 * el.carouselCfg.speed / Math.abs(el.carouselCfg.speed);
            }
          )
          .bind(
            'mousemove',
            function(e)
            {
              if (el.carouselCfg.protectRotation == false) {
                pointer = jQuery.iUtil.getPointer(e);
                mousex =  el.carouselCfg.size.w - pointer.x + el.carouselCfg.position.x;
                el.carouselCfg.speed = el.carouselCfg.rotationSpeed * el.carouselCfg.increment * (el.carouselCfg.size.w/2 - mousex) / (el.carouselCfg.size.w/2);
              }
            }
          );
      }
    );
  },

  positionItems : function(el)
  {
    el.carouselCfg.items.each(
      function (nr)
      {
        angle = el.carouselCfg.start+nr*el.carouselCfg.step;
        x = el.carouselCfg.radiusX*Math.cos(angle);
        y = el.carouselCfg.radiusY*Math.sin(angle) ;
        itemZIndex = parseInt(100*(el.carouselCfg.radiusY+y)/(2*el.carouselCfg.radiusY));
        parte = (el.carouselCfg.radiusY+y)/(2*el.carouselCfg.radiusY);
        
        width = parseInt((el.carouselCfg.itemWidth - el.carouselCfg.itemMinWidth) * parte + el.carouselCfg.itemMinWidth);
        height = parseInt(width * el.carouselCfg.itemHeight / el.carouselCfg.itemWidth);
        this.style.top = el.carouselCfg.paddingY + y - height/2 + "px";
          this.style.left = el.carouselCfg.paddingX + x - width/2 + "px";
          this.style.width = width + "px";
          this.style.height = height + "px";
          this.style.zIndex = itemZIndex;
        el.carouselCfg.reflections[nr].style.top = parseInt(el.carouselCfg.paddingY + y + height - 1 - height/2) + "px";
        el.carouselCfg.reflections[nr].style.left = parseInt(el.carouselCfg.paddingX + x - width/2) + "px";
        el.carouselCfg.reflections[nr].style.width = width + "px";
        el.carouselCfg.reflections[nr].style.height = parseInt(height * el.carouselCfg.reflectionSize) + "px";
      }
    );
  }
};
jQuery.fn.Carousel = jQuery.iCarousel.build;