$(function() {



	/**################## Handling Shortlist window style ####################*/
	/** Set position string depending on browser (IE6 doesn't have position:fixed) */
    var positionString = 'fixed';
    if($.browser.className=='msie6') positionString = 'absolute';

    /** Calculate position and style the popup window */
    var shortListElement =  $("#shortListWindow");
    var mainWindowElement = $(window);

	var shortListElementWidth = 500;
//	var shortListElementWidth = shortListElement.width();//<== This doesn't work on Firefox very well...
	
    var leftPosition = Math.floor((mainWindowElement.width() - shortListElementWidth)/2);  
    var topPosition  = Math.floor((mainWindowElement.height() - shortListElement.height())/2);
    shortListElement.css({  
                            "position": positionString,
                            "top": topPosition,  
                            "left": leftPosition,
                            "width": "500px",
                            "padding": "0px"
                         })
                    .draggable();
        
    /**################## Open shortlist window ##########################*/
    $("#add-to-my-short-list-botton").attr("style", "cursor:pointer;")
    								 .click(function(){
                                                        displayOverlay();
												        if(shortListElement.is(":hidden")) shortListElement.fadeIn("normal");
                                                      });
    function displayOverlay()
    {
        var height = $('body:first').height();
        var width = document.documentElement.clientWidth;
        $('#overlay').height(height)
                     .width(width)
                     .show()
                     .fadeTo(400, 0.7, function(){
                     
                     							 });     
    }

    /**################## Close Shortlist Window #########################*/
    $("#shortListCloseButton").attr("style", "cursor:pointer;")
                              .click(function(){
                                                    handleCloseShortlistWindow();
                                                });
    $("#continueBrowsingButton").attr("style", "cursor:pointer;")
    							.click(function(){
                                                    handleCloseShortlistWindow();
                                                });
    $("#yourShortlistButton").attr("style", "cursor:pointer;")
    						 .click(function(){
                                                    handleCloseShortlistWindow();
                                                });    
 	function handleCloseShortlistWindow()
 	{
        if(shortListElement.is(":visible")) shortListElement.fadeOut("fast");
        $('#overlay').fadeOut("fast", function(){
											        $("#addToShortlistSuccessBox").hide();
											        $("#shortListForm").fadeIn("slow");
											        $("#formMessage").empty();
											        $("input[name='quantity']").val('');        
        										});
 	}

    /**################### Submit form ############################*/
    $("#addToMyShortlistButton").attr("style", "cursor:pointer;")
                               .click(function(){
                                                    submitShortListForm();
                                                });
    function submitShortListForm()
    {
        /* Get processing image object and show it */
        var proImg = $("#processingImage");
        proImg.show();

        /* Get result box object */
        var resultBox = $("#formMessage");

        /* Get submit button object */
        var submitButton = $("#addToMyShortlistButton");

        /* disable submit button */
        submitButton.attr('disabled', 'disabled');
        
        /* serialize form */
        param = $("#shortListForm").serialize();

        /* ajax */
        $.ajax({
            type: "post",
            url: "/include/product_addDeleteItem.php",
            data: param,
            dataType: "json",
            success: function(data)
            {
                if(data.result==true)
                {
//                  $("#bumpForShortListForm").before("<div>"+data.message+"</div>");
                    $("#shortListForm").fadeOut("fast");
                    $("#addToShortlistSuccessBox").fadeIn("slow");
                    clearAllTheFormElements();
                }
                else
                {
                    resultBox.empty().append(data.message);
                }
                submitButton.removeAttr('disabled');
            },
            complete: function(xhr, myStatus)
            {
                /* Hide processing image */
                proImg.hide();
            }
        });
    }
    
    function clearAllTheFormElements()
    {
    	$("#quantityInput").val('');
    	$("input[name^='option']").removeAttr('checked');
    	$("input[name^='upholsteryId_U']").removeAttr('checked');
    	$("input[name^='upholsteryId_F']").removeAttr('checked');
      $("input[id^='upholsteryTextField']").val('').hide();
    }
        
    /**################## Handle toggle upholstery text field ##################*/
    $("input[id^='upholsteryForm']").click(function(){
                                                        toggleUpholsteryTextField($(this).val());
                                                      });
    function toggleUpholsteryTextField(upholstery_id)
    {
          $("input[id^='upholsteryTextField']").fadeOut("fast");
          $("#upholsteryTextField"+upholstery_id).fadeIn("normal");
    }
/*###*/
    var upholsteryOptionListElementU = $("#upholstery-option-list-U");
    upholsteryOptionListElementU.hide();
    
    /** Display first upholstery as default */
    $(upholsteryOptionListElementU + "div.upholstery-option-item-U:first div.upholstery-title-U span").html('<img src="/images/upholstery-contract.jpg" />');
    $(upholsteryOptionListElementU + "div.upholstery-option-item-U:not(:first) div.upholstery-title-U span").html('<img src="/images/upholstery-expand.jpg" />');
    $(upholsteryOptionListElementU + "div.upholstery-option-item-U:not(:first) div.upholstery-images-U").hide();

    $("#upholstery-options-button-U").attr("style", "cursor:pointer;")
                                   .click(function(){
                                            if($("#upholstery-option-list-U").is(":hidden"))
                                            		$(this).attr("src", "/images/product_details_upholstery_hide.jpg");
                                            else
                                            		$(this).attr("src", "/images/product_details_upholstery.jpg");
                                            $("#upholstery-option-list-U").slideToggle("normal", function(){

                                                                                            });                                                                                             
                                                        });
    $("div.upholstery-title-U").attr("style", "cursor:pointer;")
                             .click(function(){
                                            clickedItem = $(this);
                                            clickedItem.parent()
                                                       .children("div.upholstery-images-U")
                                                       .slideToggle("normal", function(){
	                                                        if($(this).is(":hidden"))
	                                                                clickedItem.find("span").html('<img src="/images/upholstery-expand.jpg" />');
	                                                        else
	                                                                clickedItem.find("span").html('<img src="/images/upholstery-contract.jpg" />');
		                                                });                                                                                             
                                                            });                                                        
/*###*/ 
    var upholsteryOptionListElementF = $("#upholstery-option-list-F");
    upholsteryOptionListElementF.hide();
    
    /** Display first upholstery as default */
    $(upholsteryOptionListElementF + "div.upholstery-option-item-F:first div.upholstery-title-F span").html('<img src="/images/upholstery-contract.jpg" />');
    $(upholsteryOptionListElementF + "div.upholstery-option-item-F:not(:first) div.upholstery-title-F span").html('<img src="/images/upholstery-expand.jpg" />');
    $(upholsteryOptionListElementF + "div.upholstery-option-item-F:not(:first) div.upholstery-images-F").hide();

    $("#upholstery-options-button-F").attr("style", "cursor:pointer;")
                                   .click(function(){
                                            if($("#upholstery-option-list-F").is(":hidden"))
                                            		$(this).attr("src", "/images/product_details_finish_hide.jpg");
                                            else
                                            		$(this).attr("src", "/images/product_details_finish.jpg");
                                            $("#upholstery-option-list-F").slideToggle("normal", function(){

                                                                                            });                                                                                             
                                                        });
    $("div.upholstery-title-F").attr("style", "cursor:pointer;")
                             .click(function(){
                                            clickedItem = $(this);
                                            clickedItem.parent()
                                                       .children("div.upholstery-images-F")
                                                       .slideToggle("normal", function(){
	                                                        if($(this).is(":hidden"))
	                                                                clickedItem.find("span").html('<img src="/images/upholstery-expand.jpg" />');
	                                                        else
	                                                                clickedItem.find("span").html('<img src="/images/upholstery-contract.jpg" />');
		                                                });                                                                                             
                                                            });                                                         
/*###*/    

     
    /**########################### Handle images etc #################################*/
    $('#main-image-lightbox').lightBox({
                                                overlayBgColor: '#000',
                                                overlayOpacity: '0.7'
                                        });

	/** Handle upholstery/finishing images on page */
    $("a[rel^='lightbox']").lightBox({
                                        overlayBgColor: '#000',
                                       overlayOpacity: '0.7'
									});

	/** Handle upholstery/finishing images in the shortlist form */
    $("a[rel^='shortlist-lightbox']").lightBox({
                                           overlayBgColor: '#000',
                                          overlayOpacity: '0.7'
                                 });
    $("a[rel^='shortlist-lightbox']").click(function(){
    														$('#overlay').css({"z-index":"999"});
    												  });                                                   
    $("img[id^='product-thumb-image-']").attr("style", "cursor:pointer")
                                        .click(function(){
                                                            thumbSrc = $(this).attr('src');
                                                            
                                                            /** Replace main thumb image */
                                                            $("img[id^='product-main-image-tag']").attr({
                                                            												src: thumbSrc.replace(/frontItemOther_/, 'frontItemMain_'),
                                                            												alt: $(this).attr('alt')
                                                            											});

															/** */
															$("#product-detailed-code").html($(this).attr('title'));
															
															/** Replace light box image */
                                                            $('#main-image-lightbox').attr({
                                                            									href: thumbSrc.replace(/frontItemOther_/, 'frontItemLight_'),
                                                            									title: $(this).attr('title')
                                                            								});
                                                        });
    $("div.scrollable").scrollable({
        next: 'a.nextg',
        prev: 'a.prevg',            
    	size: 4
    });
    
    /**######################### handle sliding Previous and Next link ################################*/
    $("#previousTab").hover(
                                function()
                                {
                                        $("#previousTab").animate({left: "0px"}, 500);
                                },
                                function()
                                {
                                        $("#previousTab").animate({left: "-118px"}, 500);
                                }
                            )
                                                    
    $("#nextTab").hover(
                                function()
                                {
                                        $("#hideNextTab").css({"opacity": "1"});
                                        $("#nextGreyTab").css({"opacity": "1"});
                                        $("#nextTab").animate({left: "-118px"}, 500);
                                        
                                },
                                function()
                                {
                                        $("#nextTab").animate({left: "0px"}, {duration: "500", complete: function(){
																				                                        $("#hideNextTab").css({"opacity": "0"});
																				                                        $("#nextGreyTab").css({"opacity": "0"});                                        																			
                                        																			}});
//                                        $("#hideNextTab").animate({"opacity": "0"}, 500);
//                                        $("#nextGreyTab").animate({"opacity": "0"}, 500);
                                }
                        ) 
	/**######################### Handle mouse hover to display option images ############################### */
	$("[id^='option-item-id-']").attr("style", "cursor:pointer;")
								.hover(
										function(myEvent){
																thumbStringIdName = $(this).attr("id").replace('option-item-id-', 'option-image-id-');
																offset = $(this).offset();
																$("#"+thumbStringIdName).css({
																							position:"absolute",
																							right:($(window).width()-offset.left+10)+"px",
																							top:(offset.top-70)+"px"
																						})
																						.fadeIn("fast");
															},
										function(){
																thumbStringIdName = $(this).attr("id").replace('option-item-id-', 'option-image-id-');
																$("#"+thumbStringIdName).fadeOut("fast");													
													});
});