// JavaScript Document


$(function() {
		   
		   
$('.slides ul li').show();
		   

// set selector and call cycle
$('#hero-slider').append('<ul id="hs-nav" class="hs-nav-left">').cycle({ 
// specify parameters
	slideExpr: 'li',
	cleartypeNoBg: true,
	//before:	 onBefore,
	//after:	 onAfter,
	fx:     'fade',
	sync:	1, 
    speed:   4000, 
    timeout: 6000,
	easing: 'easeOutQuint', 
    //pause: 	1,
	pager:  '#hs-nav',
	
     
    // callback fn that creates a thumbnail to use as pager anchor 
    pagerAnchorBuilder: function(idx, slide) {

		 	return '<li><a href="#"></a></li>';

    }
}); // close cycle call

var currentSlide = 0;

//function onAfter(curr,next,opts) {
//	var caption = 'Image ' + (opts.currSlide + 1) + ' of ' + opts.slideCount;
//	$('#caption').html(caption);
//}

// hover function - stop cycle when the user hovers over the image, or videos
$('.hero-image').hover(function() {
//	alert('pauser');
$('#hero-slider').cycle('pause');
	
}, function () {
	
$('#hero-slider').cycle('resume');	
	
}); // close hover function

// prev button config

$('#hs-next-btn').click(function () {


$('#hero-slider').cycle('next');						


});

// next button config
$('#hs-prev-btn').click(function () {


$('#hero-slider').cycle('prev');						


});


// prettyPhoto Config
$(".slides li a[rel^='pp_slideshow']").prettyPhoto({animation_speed:'normal', theme:'facebook', slideshow:8000, autoplay_slideshow:true, opacity:0.6, show_title: false, social_tools: false, deeplinking: false});

$('a.pp_photo').prettyPhoto({animation_speed:'normal', theme:'facebook', opacity:0.6, show_title: false, social_tools: false, deeplinking: false});



// ====================================== alerts


//----------------------------------------------------------------- alerts -------------------------------------------------------------- //

$.fn.popAlerts = function (overlayClass, messageClass, closeClass, offPos, topPos, messageTitle, messageContent) {


    // set variable for out of viewport position
    var thisOffPos = 0;
    // if offPos argument is null
    if (offPos == null) {
        //set thisOffPos
        thisOffPos = '-200px';
        // or	
    } else {
        // set to argument value
        thisOffPos = offPos;

    }


    //set variable for animate to position	
    var thisTopPos = 0;
    // if argument is null
    if (topPos == null) {
        // set standard animate to position
        thisTopPos = '30%';
        // or	
    } else {
        //  set to  argument value
        thisTopPos = topPos;

    }


    var thisMessageTitle = messageTitle;
    var thisMessageContent = messageContent;


    // inject the alert messages if they exist
    if (messageTitle) {
        // if message title exists inject the message
        $('.' + messageClass + ' h3').append(document.createTextNode(thisMessageTitle));

    }

    // if var message conntent exists - inject the message
    if (messageContent) {

        $('.' + messageClass + ' span').append(document.createTextNode(thisMessageContent));
    }


    // insert the element	
    $('body').after($('<div class="' + overlayClass + '"></div>'));
    // fade the element in
    $('.' + overlayClass).fadeIn(900);

    // animate in the alert
    $('.' + messageClass).animate({
        'top': thisTopPos
    }, 500, 'easeInOutCirc');



    // remove the overlays


    function removeOverlay() {



        $('.' + messageClass).animate({
            'top': thisOffPos
        }, 500);
		
		if (messageTitle) {
		  $('.' + messageClass + ' h3').delay(500).empty();
		 }
		 
		 if (messageContent) {
		  $('.' + messageClass + ' span').delay(500).empty();
		 }


        $('.' + overlayClass).delay(500).fadeOut(900);
        $('.' + overlayClass).queue(function () {
            $('.' + overlayClass).remove();
            $(this).dequeue();
            return;
        });









    } // close function


    // on click alert close button
    $('.' + closeClass).click(function (e) {
        e.stopPropagation();
		e.preventDefault();

        removeOverlay();
    }); //close function


    // function for escape key event
    $(document).keyup(function (e) {
        e.stopPropagation();
        if ($('.' + overlayClass).length && e.keyCode == 27) {

            removeOverlay();

        } // close if
    }); // close keyup function



    $('.' + overlayClass).live('click', function (e) {
        e.stopPropagation();

        removeOverlay();

    });



    return this;

};




// ======================================== end alerts


var stepOneComplete = "false";
var sampleChosen = "false";
var stepTwoComplete = "false";
var stepThreeComplete = "false";

$('.order-again').hide();



// ======================================== step 1 actions

$('.step-1-nav').click(function (e) {
								 

e.preventDefault();

$('#ecom-container').scrollTo('0px', 500, {axis:'x', easing: 'easeOutCirc', onAfter: function () {
																								 
// on complete of scroll to step 2 , change the title

$('.stages-title').text('Please Choose The Width Of Your Splashback');

$('.bc-step-two').removeClass('bc-step-complete');
$('.bc-step-three').removeClass('bc-step-complete');
$('.bc-step-four').removeClass('bc-step-complete');

}} );

$('.ecom-nav ul li').removeClass('current');
$(this).parent().addClass('current');

								  
if($('.section-info').not(':visible')) {
$('.section-info').show();	
}

}); // close click function 

// ======================================= step 2 actions ========================================================

$('.step-2-nav').click(function (e) {

e.preventDefault();

if (sampleChosen == "true") {

$('#ecom-container').scrollTo('1900px', 500, {axis:'x', easing: 'easeOutCirc', onAfter: function () {

$('.height-val').text('SAMPLE CHOSEN - HEIGHT NOT REQUIRED');

$('.stages-title').text('Please Choose The Colour Of Your Splashback');

$('.ecom-nav ul li:eq(1)').addClass('section-complete');

$('.ecom-nav ul li').removeClass('current');
$('.ecom-nav ul li:eq(2)').addClass('current');

$('.bc-step-two').addClass('bc-step-complete');
$('.bc-step-three').addClass('bc-step-complete');

}} ); // close scroll


} // close if


  else if (stepOneComplete == "false") {

$(this).popAlerts('overlay','message', 'message-close', '-300px', '30%', 'Error', 'Please choose at least One Width Item');

	
} else {


$('#ecom-container').scrollTo('950px', 500, {axis:'x', easing: 'easeOutCirc', onAfter: function () {
																								 
// on complete of scroll to step 2 , change the title

$('.stages-title').text('Please Choose The Height Of Your Splashback');

$('.bc-step-two').addClass('bc-step-complete');
$('.bc-step-three').removeClass('bc-step-complete');
$('.bc-step-four').removeClass('bc-step-complete');

}} );
	
$('.ecom-nav ul li').removeClass('current');
$(this).parent().addClass('current');


if($('.section-info').not(':visible')) {
$('.section-info').show();	
} // close if

} // close else
								  
}); // close click function 

// ================================== step 3 actions ==================================

$('.step-3-nav').click(function (e) {
e.preventDefault();

if (stepTwoComplete == "false" && sampleChosen =="false") {
	
$(this).popAlerts('overlay','message', 'message-close', '-300px', '30%', 'Error', 'Please choose at least One Width Item, and One Height Item, or choose a Sample');	


} else {



$('#ecom-container').scrollTo('1900px', 500, {axis:'x', easing: 'easeOutCirc', onAfter: function () {
																								 
// on complete of scroll to step 2 , change the title

$('.stages-title').text('Please Choose The Colour Of Your Splashback');


// sort out the breadcrumbs

$('.bc-step-three').addClass('bc-step-complete');
$('.bc-step-four').removeClass('bc-step-complete');

if(stepTwoComplete =="true") {
$('.bc-step-two').addClass('bc-step-complete');
}

}} );
	
$('.ecom-nav ul li').removeClass('current');
$(this).parent().addClass('current');	


if($('.section-info').not(':visible')) {
$('.section-info').show();	
}

} // close if
								  
}); // close click function 


// ============================================== radio button actions ============================================
// reset all radios on doc ready {
	
var widthValue = 0;
var heightValue = 0;
	
	
$('.width-radio input').prop('checked', false);
$('.height-radio input').prop('checked', false);	


$('.width-radio > input').change(function() {

$('.width-section-outer').removeClass('width-section-chosen');


$(this).parents('.width-section-outer').addClass('width-section-chosen');

$('.ecom-nav ul li:eq(0)').addClass('section-complete');

widthValue = $(this).val();
//console.log(widthValue);
$('.width-val').text(widthValue + 'mm');
$('.product-attr-width').text(widthValue + 'mmW');

// if sample selected update variable
if(widthValue == "Sample") {

$('.width-val').text(widthValue);
$('.product-attr-width').text(widthValue);

sampleChosen = "true";
stepTwoComplete = "true";

$('.product-attr-height').text("Sample");

} else {

stepTwoComplete = "true";
sampleChosen = "false";

}

//console.log(sampleChosen);
stepOneComplete = "true";

}); // close change function


$('.height-radio > input').change(function() {

$('.height-section-outer').removeClass('height-section-chosen');

$(this).parents('.height-section-outer').addClass('height-section-chosen');

$('.ecom-nav ul li:eq(1)').addClass('section-complete');


});

$('.hgt-txt-field').change(function () {

heightValue = $(this).val();
//console.log(widthVal);
$('.height-val').text(heightValue + 'mm');
$('.product-attr-height').text(heightValue + 'mmH');



stepTwoComplete ="true";
									 
});


$('.colour-table').find('input').change(function() {
												 
$('.colour-table').find('tr').removeClass('colour-selected');												 
												 
$(this).parents('tr').addClass('colour-selected');

var selectedColour = $(this).parents('tr').find('img').attr('data-colour');

var needsDarkLabel = $(this).parents('tr').find('img').attr('data-darklbl');

var selectedColourText = $(this).parents('tr').find('img').attr('alt');

if(!needsDarkLabel) {
$('.colour-val-vis').css('color', '#fff');	
} else {
$('.colour-val-vis').css('color', '#000');

}

if(selectedColourText =="black" || selectedColourText =="gunmetal") {
	
$('.colour-lbl').css('color', '#fff');	

} else {
	
$('.colour-lbl').css('color', '#000');		
}

 

$('.colour-val-vis').css('background-color', '#' + selectedColour);

$('.sb-colour-output').css('background-color', '#' + selectedColour);

$('.colour-val-vis').text(selectedColourText);

$('.product-attr-colour').text(selectedColourText);

//console.log(selectedColour);

$('.ecom-nav ul li:eq(2)').addClass('section-complete');


stepThreeComplete ="true";

});


// placeholders for height input fields




$(document).bind('ready', function(event) {
 $('.placeholder').each(function(i) {
 
 var item = $(this);
 var text = item.attr('rel');
 var form = item.parents('form:first');

 if (item.val() == '')
 {
 item.val(text);
 item.css('color', '#dfdfdf');
 }
 
 item.bind('focus.placeholder', function(event) {
 if (item.val() == text)
 $('.placeholder').val(text);
 item.val('');
 item.css('color', '');
 item.prev().prop('checked', true);
 $('.height-section-outer').removeClass('height-section-chosen');
 item.parents('.height-section-outer').addClass('height-section-chosen');
 });
 
 item.bind('blur.placeholder', function(event) {
 if (item.val() == '')
 {
 item.val(text);
 item.css('color', '#dfdfdf');
 }
 });
 
 form.bind("submit.placeholder", function(event) {
 if (item.val() == text)
 item.val("");
 });
 
 });
 
});

$('#inp-600-high').change(function () {
								  
var thisValue = parseInt($(this).val(),10);

if(thisValue > 600 ) {

$(this).popAlerts('overlay','message', 'message-close', '-300px', '30%', 'Error', 'Please Enter A Value Under 600mm');

}

});

$('#inp-700-high').change(function () {
								  
var thisValue = parseInt($(this).val(),10);

if(thisValue <601 || thisValue >700  ) {

$(this).popAlerts('overlay','message', 'message-close', '-300px', '30%', 'Error', 'Please Enter A Value Between 601mm amd 700mm');

}

});


$('#inp-800-high').change(function () {
								  
var thisValue = parseInt($(this).val(),10);

if(thisValue <701 || thisValue >800  ) {

$(this).popAlerts('overlay','message', 'message-close', '-300px', '30%', 'Error', 'Please Enter A Value Between 701mm amd 800mm');

}

});


// ================================= step 4 actions ====================================
$('.step-4-nav').click(function (e) {

e.preventDefault();

if (stepOneComplete =="false" && stepTwoComplete == "false" && stepThreeComplete =="false") {
	
$(this).popAlerts('overlay','message', 'message-close', '-300px', '30%', 'Error', 'Please choose at least One Width Item, One Height Item, and Choose A Colour, or choose a Sample');	


} else {

calculatePrice(widthValue,heightValue);

} // close else

}); // close click function 



function calculatePrice(width,height) {
	
var widthInput = width;
var heightInput = height;


if(widthInput =="Sample") {

$('.product-price').text('2.00');

// 600 width

} else if (widthInput =="600" && heightInput < "601") {
	
$('.product-price').text('86.40');	

} else if (widthInput =="600" && heightInput > "600" && heightInput < "701" ) {

$('.product-price').text('100.80');	
	
} else if (widthInput =="600" && heightInput > "700" && heightInput < "801" ) {

$('.product-price').text('115.20');

// 900 width

} else if (widthInput =="900" && heightInput < "601" ) {

$('.product-price').text('129.60');

} else if (widthInput =="900" && heightInput > "600" && heightInput < "701" ) {

$('.product-price').text('151.20');

} else if (widthInput =="900" && heightInput > "700" && heightInput < "801" ) {

$('.product-price').text('172.80');

// 1000 width

} else if (widthInput =="1000" && heightInput < "601" ) {

$('.product-price').text('144.00');

} else if (widthInput =="1000" && heightInput > "600" && heightInput < "701" ) {

$('.product-price').text('168.00');

} else if (widthInput =="1000" && heightInput > "700" && heightInput < "801" ) {

$('.product-price').text('192.00');


// 1000 width

} else if (widthInput =="1100" && heightInput < "601" ) {

$('.product-price').text('158.40');

} else if (widthInput =="1100" && heightInput > "600" && heightInput < "701" ) {

$('.product-price').text('184.40');

} else if (widthInput =="1100" && heightInput > "700" && heightInput < "801" ) {

$('.product-price').text('211.20');

}
getToCart();

} // close function


// function to arrive at step 4 with the price calculated
function getToCart() {

$('#ecom-container').scrollTo('2850px', 500, {axis:'x', easing: 'easeOutCirc', onAfter: function () {
																								 
// on complete of scroll to step 2 , change the title

$('.stages-title').text('Finalise Options And Add To Cart');


// sort out the breadcrumbs

$('.bc-step-four').addClass('bc-step-complete');

if(stepTwoComplete =="true") {
$('.bc-step-two').addClass('bc-step-complete');
}


if(stepThreeComplete =="true") {
$('.bc-step-three').addClass('bc-step-complete');
}

}} );
	
$('.ecom-nav ul li').removeClass('current');
$(this).parent().addClass('current');

$('.section-info').hide();
	
	
} // close function




//$('.not-yet').click(function() {
							 
//$(this).popAlerts('overlay','message', 'message-close', '-300px', '30%', 'Customer Message', 'We are sorry, our shop is still under development at present. Please call back soon, and it will be operational. In the meantime, please contact us on 0845 313 1730, and will will be able to help you with your enquiry. We apologise for any inconvenience.');							 

//});



$('.googlecart-add-button').click(function() {
										   
$('.order-again').show();

});



$('.order-again').click(function (e) {


e.preventDefault();

$('.ecom-nav ul li').removeClass('section-complete');
$('.width-section-outer').removeClass('width-section-chosen');
$('.height-section-outer').removeClass('height-section-chosen');
$('.bc-step-four, .bc-step-three, .bc-step-two').removeClass('bc-step-complete');

stepOneComplete = "false";
sampleChosen = "false";
stepTwoComplete = "false";
stepThreeComplete = "false";

$('.width-val').text("");
$('.height-val').text("");
$('.colour-val-vis').text("");
$('.colour-val-vis').css('background-color', '#f9f9f9');


$('#ecom-container').scrollTo('0px', 500, {axis:'x', easing: 'easeOutCirc'});

$('.section-info').show();

$('.width-radio input').prop('checked', false);
$('.height-radio input').prop('checked', false);

$(this).hide();

$('.stages-title').text('Please Choose The Width Of Your Splashback');

								  
});



}); // close doc ready