/*
 * OptionLayers 0.1 (2009-02-28)
 *
 */
jQuery.preloadImages = function()
{
  for(var i = 0; i<arguments.length; i++)
  {
    jQuery("<img>").attr("src", arguments[i]);
  }
}
$.preloadImages('/fileadmin/templates/pics/layer/option_layer_1_small_bg.png', '/fileadmin/templates/pics/layer/option_layer_2_small_bg.png', '/fileadmin/templates/pics/layer/option_layer_3_small_bg.png', '/fileadmin/templates/pics/layer/option_layer_4_small_bg.png', '/fileadmin/templates/pics/layer/option_layer_5_small_bg.png', '/fileadmin/templates/pics/layer/option_layer_6_small_bg.png', '/fileadmin/templates/pics/layer/option_layer_7_small_bg.png');

$(document).ready(function() {

      var layers_count =$('div.option_layers div.option_layer_wrapper').length;
      // container width
      var olc_width = $('div.option_layers').width(); //  
      var olc_margin = ($('body').width() - olc_width) / 2;
      // layer width
      var ol_width = $('div.option_layer_wrapper').width(); //300
      // layer height
      var ol_height = $('div.option_layer_wrapper').height(); //300
      // layer offset  
      var ol_offset = 80;
      var top_offset = 8; //8
      var olc_top =  $('div.option_layers').position().top;


   // wait function

  // find layers, position, resize them and set z-index
  jQuery.fn.extend({
    wait: function(time, type) {
        time = time || 1000;
        type = type || "fx";
        return this.queue(type, function() {
            var self = this;
            setTimeout(function() {
                $(self).dequeue();
            }, time);
        });
    },

    initializeLayers: function() {
        
      // positioning to absolute
      $('div.option_layers div.option_layer_wrapper').css('position', 'absolute');
      
      // Unbind Events
      $('div.option_layers div.option_layer_wrapper').unbind();
      $('div.option_layers div.option_layer_wrapper .fg-button').remove();
      
      //$('div.option_layers div.option_layer_wrapper').reflect();

      // preload images
      $('div.option_layers div.option_layer_wrapper img').each(function() {
        $.preloadImages($(this).attr('src'));
      });
      
            
      // initialize position
      $('div.option_layers div.option_layer_wrapper').each( function(i) {
        //$(this).effect("scale", { percent: ol_width / $(this).width() * 100  }, 0);
        $(this).animate( 
          { 
            left:   olc_width/2 + olc_margin - ol_width/2 - 25,
            top:    olc_top + (layers_count)*top_offset
          }, 0);
      });

      $('div.option_layers div.option_layer_wrapper').css('visibility', 'visible');

      $('div.option_layers div.option_layer_wrapper').each(function(i) {
      
        if( !$(this).hasClass('initialized') ) {
          $(this).addClass('option_layer_' + (i + 1) );
          $(this).addClass('initialized');
          img = new Image();
          $(img)
              .attr('width',450)
              .attr('height',333)          
              .load(function() {
                $(this).reflect( { height:0.2, opacity: 0.8 } );
              
              })
              .attr('src', '/fileadmin/templates/pics/layer/' + 'option_layer_' + (i + 1) + '_small_bg.png');
          $(this).find('.option_layer_bgimage img').replaceWith($(img));
          $(this).find('.option_layer_bgimage').css('display','block');
          
        }
      
        if(i === 0) {
          $(this).find('.overlay').css('display', 'none');
          // center layer
          $(this).css('left', olc_width/2 + olc_margin - ol_width/2 - 25);
          $(this).css('top', olc_top + (layers_count - i)*top_offset);
          //$(this).effect("scale", { percent: 100-i*4 }, 0);
          $(this).bind('click', function() {
            //$(this).zoomLayer();
          });

          $(this).css('z-index', 100);
/*          
          $(this).append('<a href="#" class="left fg-button ui-state-default fg-button-icon-left ui-corner-all"><span class="ui-icon ui-icon-circle-arrow-w"/></a>');
          $(this).find('a.left').click(function() {
            $(this).parents('.option_layer_wrapper').nextAll('div.option_layer_' + (parseInt($(this).parents('.option_layer_wrapper').attr('class').replace('option_layer_wrapper option_layer_','').replace(' initialized','')) + 1) + ':first').selectLayer();
            //$(this).parent().nextAll('div.option_layer_wrapper:first').selectLayer();
          });

          // add navigation buttons
          $(this).append('<a href="#" class="right fg-button ui-state-default fg-button-icon-left ui-corner-all"><span class="ui-icon ui-icon-circle-arrow-e"/></a>');
          $(this).find('a.right').click(function() {
            $(this).parents('.option_layer_wrapper').nextAll('div.option_layer_' + (parseInt($(this).parents('.option_layer_wrapper').attr('class').replace('option_layer_wrapper option_layer_','').replace(' initialized','')) + 2) + ':first').selectLayer();
            //$(this).parent().nextAll('div.option_layer_wrapper:first').nextAll('div.option_layer_wrapper:first').selectLayer();
          });
*/          
        }
        else {
          $(this).find('.overlay').css('display', 'block');
          $(this).find('.overlay').fadeTo(0, 1);
          if(i % 2 == 1) {
            // left layers
            $(this).animate( 
              { 
                left:   olc_width/2 + olc_margin - ol_width/2 - ((i+1)/2)*ol_offset + ol_width - $(this).width() - 25,
                top:    olc_top + (layers_count - i)*top_offset
              }, 
              { duration: 400, 
                   complete: function() {
                     // EVENTS
                     $(this).bind('mouseenter', function() {
                       //$(this).hoverLayer(); 
                     });
                     $(this).bind('click', function() {
                       $(this).stop(false,true);
                       $(this).selectLayer();
                     });
                     $(this).bind('mouseleave', function() {
                       $(this).stop(true,true); 
                       $(this).find('.option_layer_bgimage * canvas').stop(true,true); 
                     });
                   } 
              });
            //$(this).effect("scale", { percent: 100-(i+1)*4 }, 0); //, from: {height:ol_height, width:ol_width}
            $(this).css('z-index', 100-i);
          }
          else
          {
            // right layers
            $(this).animate( 
              { 
                left:   olc_width/2 + olc_margin - ol_width/2 + (i/2)*ol_offset + ol_width - $(this).width() - 25,
                top:    olc_top + (layers_count - i)*top_offset
              }, { duration: 400, 
                   complete: function() {
                     // EVENTS
                     $(this).bind('mouseenter', function() {
                       //$(this).hoverLayer(); 
                     });
                     $(this).bind('click', function() {
                       $(this).stop(false,true);
                       $(this).selectLayer();
                     });
                     $(this).bind('mouseleave', function() {
                       $(this).stop(true,true); 
                       $(this).find('.option_layer_bgimage * canvas').stop(true,true); 
                     });
                   } 
              });
            //$(this).effect("scale", { percent: 100-i*4 }, 0);
            $(this).css('z-index', 100-i);
          }
        }
      });

      $(".option_layers_wrapper .option_layer_bgimage img").reflect( { height:0.2, opacity: 0.5 } );
      $('.option_layer_bgimage div').css('overflow', 'visible');


            
    },
    
    hoverLayer: function() {
      var currentIndex = $('div.option_layer_wrapper').index(this);
            
      $(this).toggleClass('hover');
      $(this).find('.option_layer_bgimage * canvas')
             .animate( {marginTop: '+=0'}, 300)
             .animate({ marginTop: '+=75' }, 200)
             .wait(2020)
             .animate({ marginTop: '-=75' }, 50);
             
      $(this).unbind('mouseenter')
             .animate( {top: '+=0'}, 300)
             .animate( {top: '+=0'},  
                       { duration: 0, 
                         complete: function() { 
                           $(this).unbind('mouseleave'); 
                         }
                       
                       })

             .animate( {top: '-=50', height: '+=50'}, 
                       { duration: 200, 
                         complete: function() { 
                           
                           //$(this).unbind('mouseleave'); 
                         }
                       } 
             )
             .unbind('mouseleave')
             .wait(2000)         
             .animate( {top: '+=50', height: '-=50'}, 100 )
             .bind('mouseenter', function() {
                //$(this).hoverLayer();
              })
             .bind('mouseleave', function() {
               $(this).stop(true,true); 
               $(this).find('.option_layer_bgimage * canvas').stop(true,true); 
             });
             
      //$('div.option_layer_wrapper:lt(' + currentIndex + ')').fadeTo(0, 0.3);
    },
    
    // bring clicked layer to front move first layer to this position
    selectLayer: function() {
      var lastIndex = $(this).css('z-index');
      var currentFirstLayer = $(this).parent().find("div.option_layer[z-index='100']").css('z-index',lastIndex);
      var direction = 1;
      if( $(this).css('z-index') % 2 === 0 ) {
        direction = -1;
      }
      
      // Unbind all events
      $('div.option_layer').unbind();
      currentFirstLayer.find('a.left').remove();
      currentFirstLayer.find('a.right').remove();
      
      $(this)
        .animate( { left: '-=' + ((ol_width/4)*3*direction) }, /* olc_width/2 + olc_margin - ol_width/2 - ol_width*direction */
                  { duration: 300, 
                    complete: function() {
                      currentFirstLayer.replaceWith($(this).parent().prepend($(this))); 
                      $(this).parent().initializeLayers();                      
                    } 
        })
        .animate( { left: olc_width/2 + olc_margin - ol_width/2 - 25 }, 
                  { duration: 300, 
                    complete: function(){

                    }});      
      
    },
    
    zoomLayer: function()  {
        $(this).animate({ left: '-='  }, 1000);
    }
  });


  $('.overlay').hover(
    function() {
      $(this).fadeTo('fast',0.5);
    },
    function() {
      $(this).fadeTo('fast',1);
    }
  );
  
  $(window).load(function() {
    $('body').initializeLayers();
  });
  

});