/*
 * OptionLayers 0.2 (2009-02-28)
 *
 */

$(document).ready(function() {

  var layers_count =$('div.option_layers div.option_layer_wrapper').length;
  // container width
  var olc_width = $('div.option_product_layers_wrapper').width(); //  
  var olc_height = $('div.option_product_layers_wrapper').height(); //  
  var olc_margin = ($('body').width() - olc_width) / 2 ;
  var olc_top =  $('div.option_layers').position().top;
  // 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 = 200;
  var top_offset = 8;
  // offset for all layers
  var ol_offset_left = 40 * (layers_count - 1) * (-1);

  var layer_width;
  var layer_height;
  var href;



   // wait function
  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);
        });
    },

    // find layers, position, resize them and set z-index
    initializeLayers: function() {
     // $('a.thickbox').remove();

      // positioning to absolute
      $('div.option_layers div.option_layer_wrapper').css('position', 'absolute');
      $('div.option_layers div.option_layer_wrapper').css('left', '315px');
      $('div.option_layers div.option_layer_wrapper').css('top', '224px');
      
      $(".option_product_layers_wrapper .option_layer_bgimage img").fadeTo(0,0.5);
      //$(this).css('width', '450px');
      //$(this).css('height', '333px');
      
      // Unbind Events
      $('div.option_layers div.option_layer_wrapper').unbind();

      $('div.option_layers div.option_layer_wrapper').show(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).show();          
        }

        if( !$(this).hasClass('initialized') ) {
          $(this).addClass('option_layer_' + (i + 1) );
          $(this).addClass('initialized');

          $(this).css('background-color', '#' + i + i + i + i + i + i);
          $(this).css('display','block');
        }
              
        
        if(i === 0) {
          // center layer
          $(this).css('z-index', 100);
          $(this).addClass('cursor');


          $(this).animate( 
          { 
            left:   olc_width/2 + olc_margin - ol_width/2 - $(this).width() + (i/2)*ol_offset + ol_width + ol_offset_left,
            top:    olc_top + (layers_count - i)*top_offset
          }, 0);

          var width = parseInt($(this).css('width').replace('px',''),10);
          var height = parseInt($(this).css('height').replace('px',''),10);        
          // thickbox

          if($(this).find('h1:first a').hasClass('thickbox')) {
            $(this).wrap('<a href="' + $(this).find('h1:first a').attr('href') + '" title="" class="thickbox"></a>');
          }
          else {
            if($(this).find('h1:first a').attr('href').indexOf('?') == -1 ) {
              href = $(this).find('h1:first a').attr('href') + '?keepThis=true&TB_iframe=true&height=600&width=800';
            }
            else
            {
              href = $(this).find('h1:first a').attr('href') + '&keepThis=true&TB_iframe=true&height=600&width=800';            
            }
            $(this).wrap('<a href="' + href + '" title="" class="thickbox"></a>');
            $(this).find('h1:first a').addClass('thickbox');
            $(this).find('h1:first a').attr('href', href);
            $(this).find('h1:first a').attr('title','');
          }
        }
        else
        {
          $(this).removeClass('cursor');
          $(this).click(function() {
            $(this).selectLayer();
          });
        }

        // all layers
        $(this).find('.option_layer_bgimage img').unreflect();
        

        $(this).animate( 
          { 
            left:   olc_width/2 + olc_margin - ol_width/2 - $(this).width() + (i/2)*ol_offset + ol_width + ol_offset_left,
            top:    olc_top + (layers_count - i)*top_offset
          }, { duration: 0, 
               complete: function() {} 
          });
        $(this).css('z-index', 100-i);
      });

      $(".option_product_layers_wrapper .option_layer_bgimage img").reflect( { height:0.2, opacity: 0.8 } );


      //$('#content .option_product_layers_wrapper .option_layers .option_layer_wrapper:not(:first)').click(function() {
      //  $(this).selectLayer();
      //});      
      
      // thickbox
      tb_init('a.thickbox');

    },
    
    hoverLayer: function() {
      var currentIndex = $('div.option_layer_wrapper').index(this);
            
      $(this).toggleClass('hover');
    },
    

    selectLayer: function() {
      var currentIndex = $('div.option_layer_wrapper').index(this);
      var currentLayer = $(this);
      var layerCount = $(this).parents('.option_layers').find('.option_layer_wrapper:lt(' + currentIndex + ')').length;
      $(this).parents('.option_layers').find('.option_layer_wrapper:lt(' + currentIndex + ')').each(function(i) {
        var self = this;
        setTimeout(function() {
          $(self).nextLayer((layerCount-1)==i);
        }, i*200);
        
        //setTimeout(function() {$(this).nextLayer();},i*400); 
      });
      
            
    },
    
    nextLayer: function(init) {
      if (typeof init == "undefined") {
        init = true;
      }
      var lastIndex = $(this).css('z-index');
      var direction = 1;
      var clone = $(this).clone();
      $(this).hide();
      $(this).after(clone);
      $(this).hide();
      clone.hide("drop", { percent: 400 }, 500);
      $(this).animate({borderWidth: 1},{duration:500, complete: function() { 
          $('div.option_layers').append($(this));
          clone.remove();
          if(init) {
            $(this).initializeLayers(); 
          }
      }});   
    },

    prevLayer: function() {
      var lastIndex = $(this).css('z-index');
      var direction = 1;
      var clone = $(this).clone();
      $(this).hide();
      $(this).after(clone);
      $(this).hide();
      clone.hide("drop", { percent: 400 }, 500);
      $(this).animate({borderWidth: 1},{duration:500, complete: function() { 
          $('div.option_layers').prepend($(this));
          clone.remove();
          $(this).initializeLayers(); 
      }});  
    }
  });

    
  $(this).initializeLayers();

  // forward event
  $('#content .option_product_layers_wrapper .navigation .forward').click(function() {
    $('#content .option_product_layers_wrapper .option_layers .option_layer_wrapper:first').nextLayer();
  });

  // backward event
  $('#content .option_product_layers_wrapper .navigation .backward').click(function() {
    $('#content .option_product_layers_wrapper .option_layers .option_layer_wrapper:last').prevLayer();
  });
  

  
});