var c;

function addBuyStep(el) {
	
	// Numéro de l'étape d'achat
	if (el) {
		c = el;
	} else {
		c = 2;
	}
	
	$("#product-description-box .toggle").each(function(){
		if(!$(this).hasClass("jquerified")) {
			$(this).addClass("closed");
			$(this).addClass("jquerified");
			
			$(this).prepend(c + ". ");
			
			//alert($(this).html());
			// Hide next row
			$(this).next(".row").hide();
			
			$(this).click(function(e){
				if ($(this).hasClass("open")) {
					$(this).addClass("closed");
					$(this).removeClass("open");
				} else {
					$(this).removeClass("closed");
					$(this).addClass("open");
				}
				$(this).next(".row").toggle("slow");
				e.stopPropagation();
				return false;
				
			});
			
		}
		c++;
	});
	$("#complement-title-rank").html(c + ". ");
}

jQuery(function(){
    // Load the first technical picture
    $( '#technical_picture' ).html( $( '#technical' + $( '#product-row div input:first' ).attr( 'value' ) ).html() );

    // Rebind les trucs quand on load les options en ajax
    $().ajaxComplete( function() {
        
        /*
        $('#product-description-box input:radio').checkbox({
            empty: '/imports/css/checkbox/empty.png'
        });
        $('#product-description-box input:checkbox').checkbox({
            empty: '/imports/css/checkbox/empty.png'
        });
        $('#required-row input:radio').checkbox({
            cls: 'jquery-radio',
            empty: '/imports/css/checkbox/empty.png'
        });
        */

        // Tooltips
        $('.tooltip-anchor').tooltip({
            position: ['top', 'center'], 
            offset: [-2, 10], 
            effect: 'slideup', 
            opacity: 0.95
            
        });
		
		addBuyStep(2);
		//$("#complement-title-rank").html(c + ". ");
    
        //  Hide color chooser box
        //$(".colorChoice").hide();
    } );
    
    /*
    $('#product-description-box input:radio').filter( ':not( #required-row )' ).checkbox({
        empty: '/imports/css/checkbox/empty.png'
    });
    $('#product-description-box input:checkbox').filter( ':not( #required-row )' ).checkbox({
        empty: '/imports/css/checkbox/empty.png'
    });
    $('#required-row input:radio').checkbox({
        cls: 'jquery-radio',
        empty: '/imports/css/checkbox/empty.png'
    });
    */
    

    /**
     * Page layout - option appear when a product is selected
     **/

    //  Hide option on load
    $("#options-wrapper").hide();
	
	
   
    $("#product-row input:radio").live( 'click', function(){
        $("#product-row .col").removeClass("printable");
        $( this ).parents(".col").addClass("printable");
        
        $("#options-wrapper").hide();

        // Put the right technical picture.
        $( '#technical_picture' ).html( $( '#technical' + $(this).attr("value") ).html() );

        $.get( '../common-asset/options.php', 
			{ 
				'surfamily_id' : $(this).attr("surfamily_id"), 
				'product_id' : $(this).attr("value") ,
				'category_id' : $("#category_id").val() 
			},
			function( arg ) {
            $( "#options-wrapper" ).html( arg );

            // todo - Validate value checked - hide preselected slide
            $("#options-wrapper").slideDown("fast");
            
            
            $('#options-wrapper .tooltip-anchor').tooltip({
                position: ['top', 'center'], 
                offset: [-2, 10], 
                effect: 'slideup', 
                opacity: 0.95
                
            });
            
        } );
        
        $.get( '../common-asset/files.php', { 'surfamily_id' : $(this).attr("surfamily_id"), 'product_id' : $(this).attr("value") }, function( arg ) {
            $("#files-list").html( arg );
            $("#files-list").slideDown("fast");
        } );

        // Draw shadow but dont show it (shadow cause bug when element is not visible)
        $(".picker").dropShadow({
            left: 2, 
            top: 2, 
            blur: 4,
            opacity: 0.9
            
        });
        $(".picker").removeShadow();
    
        // Show color picker and redraw shadow
        $(".color-chooser-link").live( 'click' , function() {
            var id = "#" + $(this).attr('id') + "-wrapper";
            
            // Toggle visibility
            if ($(id).is(':hidden') ) {
                $(id).show( 1, function(){
                    $(id).redrawShadow();
                });
            } else {
                $(id).hide().removeShadow();
            }
            
            // Stop event bubble 
            return false;
        });
        
        // Close color picker
        $(".color-chooser .close").live( 'click', function(){
            $(this).parents(".color-chooser").hide().removeShadow();
            return false;
        });
        
    
        // Choose a color and update link
        /*
        $(".color-chooser .color-list a").click(function(){
    
            alert("asd");
            // Update link
            var link = $("#" + $(this).parents(".color-chooser").attr("id").replace("-wrapper", ""));
            link.attr("style", $(this).attr("style") );
            
            // Close color picker
            $(".color-chooser .close").click();
            
            // Stop event bubble 
            return false;
        });
        */
    
    });
    
    
  

    /*
    
    // Draw shadow but dont show it (shadow cause bug when element is not visible)
    $(".picker").dropShadow({
        left: 2, 
        top: 2, 
        blur: 4,
        opacity: 0.9
        
    });
    $(".picker").removeShadow();
    
    
    // Show color picker and redraw shadow
    $(".color-chooser-link").live( 'click', function(){
        var id = "#" + $(this).attr('id') + "-wrapper";
        
        // Toggle visibility
        if ($(id).is(':hidden') ) {
            $(id).show( 1, function(){
                $(id).redrawShadow();
            });
        } else {
            $(id).hide().removeShadow();
        }
        
        // Stop event bubble 
        return false;
    });
    
    // Close color picker
    $(".color-chooser .close").live( 'click', function(){
        $(this).parents(".color-chooser").hide().removeShadow();
        return false;
    });
    
    
    
    */
    // Choose a color and update link
    $(".color-chooser .color-list a").live( 'click', function(){
        // Update link
        var link = $("#" + $(this).parents(".color-chooser").attr("id").replace("-wrapper", ""));
        
        //alert(  $(this).parents(".color-chooser").attr("id").replace("-wrapper", "") );
        //link.attr("style", $(this).attr("style") );

        // Update label beside color box.
        //$("#" + $(this).parents(".color-chooser").attr("id").replace("-wrapper", "")).next().html( $( this ).next().html() );
        $( "label", link).html( $("label", this).html() );
        $( ".color-box", link).attr( "style", $(".color-box", this).attr( "style" ) );
        
        
        // Close color picker
        $(".color-chooser .close").click();
        
        // Stop event bubble 
        return false;
    });

    // GeoLocalisation
    $( '#infoboxGeolocator form' ).submit( function() {
        $.get( '/stores.php', { 'postalCode' : $( '#geo_postal_code' ).attr( 'value' ), 'surfamily_id': $( '#geo_surfamily_id' ).attr( 'value' ) }, function( arg ) {
            $( '#stores-list' ).html( arg );
        } );

        // Stop event bubble 
        return false;
    } );


    // Complements
    $( '#complements li strong' ).live( 'click', function() {
        if( $( '#complements' + $( this ).attr( 'id' ) ).css( 'display' ) === 'none' ) {
            $( '#complements' + $( this ).attr( 'id' ) ).css( 'display', 'block' );
        } else {
            $( '#complements' + $( this ).attr( 'id' ) ).css( 'display', 'none' );
        }
    } );
    
    // Tooltips
    $( '.tooltip-anchor' ).tooltip({
        position: ['top', 'center'], 
        offset: [-2, 10], 
        effect: 'slideup', 
        opacity: 0.95
        
    });


    // Image cycle
    $('#topImage').cycle({
        //fx: 'fadeRight',
        timeout: 4000,
        delay:  1000,
        speed: 1500,
        next: '#toppager .next',
        prev: '#toppager .previous',
        pager:'#toppager .cycle-pager',
        pagerAnchorBuilder:function(i,o) {
            return '<a href="#">' + (i+1) + '</a>';
        }
    });


    // Loupe aggrandir swap on hover de la photo
    $( '#topImage a' ).hover( function() {
        $('.aggrandir img').attr( 'src', '/imports/images/loupe_noir.gif');
    }, function() {
        $('.aggrandir img').attr( 'src', '/imports/images/loupe_grise.gif');
    } )

        // Image cycle_complete
    $('#topImage_complete').cycle({
        //fx: 'fadeRight',
        timeout: 4000,
        delay:  1000,
        speed: 1500,
        next: '#toppager .next',
        prev: '#toppager .previous',
        pager:'#toppager .cycle-pager',
        pagerAnchorBuilder:function(i,o) {
            return '<a href="#">' + (i+1) + '</a>';
        }
    });
    
    // Image topImage_accueil
    $('#topImage_accueil').cycle({
        //fx: 'fadeRight',
        timeout: 4000,
        delay:  1000,
        speed: 1500,
        next: '#toppager_accueil .next',
        prev: '#toppager_accueil .previous',
        pager:'#toppager_accueil .cycle-pager_accueil',
        pagerAnchorBuilder:function(i,o) {
            return '<a href="#">' + (i+1) + '</a>';
        }
    });
    
    addBuyStep(2);
    
    // Clik sur le bain seul
    $("#product-row input:first").click();
    
    
    // Show / hide color chooser box.
    $( '#accessories-row input, #options-row input' ).live( 'click', function() {
        if( $( this ).attr( 'checked' ) === true ) {
            $( this ).parents(".col").addClass("printable");
            $( this ).siblings( '.colorChoice' ).show();
        } else {
            $( this ).parents(".col").removeClass("printable");
            $( this ).siblings( '.colorChoice' ).hide();
        }
    } );
	
	
	
	
    
});