// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
//
// Title : Raceforlife 2010 Functions
// Author : Rapp UK
//
// Description : Core functionality for standard sites developed by Rapp UK
//
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

//scroll the message box to the top offset of browser's scrool bar
//$(window).scroll(function()
//{
//  $('#basket-container ').animate({top:$(window).scrollTop()+"px" },{queue: false, duration: 350});
//});

//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;

var imageroot = "images/2010/shop/";
var transitionImage = "images/2010/shop/large/placeholder.png";

//using the clicked on image switch the main image for it's large version
function updatePopUp(childimg) {
    //using the 'rel' attribute retrieve which image is the main one, and which is the selected thumb
    var frameimagenum, selectedimagenum;
    selectedimagenum = childimg.attr('rel');
    frameimagenum = $(".frame-image").attr('rel');

    var main, mainalt, selected, selectedalt;

    //switch the main image for its thumb equivalent
    switch (frameimagenum) {
        case "one":
            selected = $(".popupthumbnail1").val();
            selectedalt = $(".popupimage_alt1").val();
            break;
        case "two":
            selected = $(".popupthumbnail2").val();
            selectedalt = $(".popupimage_alt2").val();
            break;
        case "three":
            selected = $(".popupthumbnail3").val();
            selectedalt = $(".popupimage_alt3").val();
            break;
    }

    //switch the selected thumb for its large equivalent
    switch (selectedimagenum) {
        case "one":
            main = $(".popupimage_src1").val();
            mainalt = $(".popupimage_alt1").val();
            break;
        case "two":
            main = $(".popupimage_src2").val();
            mainalt = $(".popupimage_alt2").val();
            break;
        case "three":
            main = $(".popupimage_src3").val();
            mainalt = $(".popupimage_alt3").val();
            break;
    }

    //set the main image, alt and 'rel' attribute to new value
    $(".frame-image").css("background-image", "url(" + main + ")");
    $(".popupalt1").attr("alt", mainalt);
    $(".frame-image").attr('rel', selectedimagenum);

    //set the selected thumb image, alt and 'rel' attribute to new value
    childimg.css("background-image", "url(" + selected + ")");
    childimg.children("img").attr('alt', selectedalt);
    childimg.attr('rel', frameimagenum);

    //fade back in
    childimg.fadeIn("slow");
    setTimeout(function() { $(".frame-image").fadeIn("slow"); }, 500);
}

//get text content of a control
function getTextContent(el) {
    if (typeof el.textContent == 'string')
        return el.textContent;
    if (typeof el.innerText == 'string')
        return el.innerText;

    return getText2(el);

    function getText2(el) {
        var x = el.childNodes;
        var txt = '';
        for (var i = 0, len = x.length; i < len; ++i) {
            if (3 == x[i].nodeType) {
                txt += x[i].data;
            } else if (1 == x[i].nodeType) {
                txt += getText2(x[i]);
            }
        }
        return txt.replace(/\s+/g, ' ');
    }
}


//initial population of popup images
function initialPopulate(parentdiv) {
    
    //set hidden input values in popup for selected stock category
    $(".popupthumbnail1").val(imageroot + parentdiv.children()[0].value);
    $(".popupthumbnail2").val(imageroot + parentdiv.children()[1].value);
    $(".popupthumbnail3").val(imageroot + parentdiv.children()[2].value);

    $(".popupimage_src1").val(imageroot + parentdiv.children()[3].value);
    $(".popupimage_src2").val(imageroot + parentdiv.children()[4].value);
    $(".popupimage_src3").val(imageroot + parentdiv.children()[5].value);

    $(".popupimage_alt1").val(parentdiv.children()[6].value);
    $(".popupimage_alt2").val(parentdiv.children()[7].value);
    $(".popupimage_alt3").val(parentdiv.children()[8].value);

    //now do intial population of popup fields
    //set the title
    //var title = parentdiv.children()[11].textContent;
    var title = getTextContent(parentdiv.children()[11]);
    $(".title").html(title);
    
    //the price
    //var price = parentdiv.children()[14].textContent;
    var price = getTextContent(parentdiv.children()[14]);
    $(".popup_price").html(price);

    //set images and assign a value to the 'rel' attribute to keep track of which image is where
    var imageurl, imageurl2, imageurl3;

    imageurl = imageroot + parentdiv.children()[3].value;
    $(".frame-image").css("background-image", "url(" + imageurl + ")");
    $(".frame-image").attr('rel', 'one');

    imageurl2 = parentdiv.children()[1].value;
    if (imageurl2 == "")
        $(".popupthumb2").hide();
    else {
        $(".popupthumb2").css("background-image", "url(" + imageroot + imageurl2 + ")");
        $(".popupthumb2").show();
        $(".popupthumb2").attr('rel', 'two');
    }

    imageurl3 = parentdiv.children()[2].value;
    if (imageurl3 == "")
        $(".popupthumb3").hide();
    else {
        $(".popupthumb3").css("background-image", "url(" + imageroot + imageurl3 + ")");
        $(".popupthumb3").show();
        $(".popupthumb3").attr('rel', 'three');
    }

    if (imageurl2 == "" && imageurl3 == "") {
        $(".line1").hide();
        $(".views").hide();
    }
    else {
        $(".line1").show();
        $(".views").show();
    }

    //populate the alt text
    var alt_text;
    alt_text = parentdiv.children()[6].value;
    $(".popupalt1").attr("alt", alt_text);

    alt_text = parentdiv.children()[7].value;
    $(".popupalt2").attr("alt", alt_text);

    alt_text = parentdiv.children()[8].value;
    $(".popupalt3").attr("alt", alt_text);

    //finally the description paras
    alt_text = parentdiv.children()[9].value;
    $(".popupstockinfo1").html(alt_text);

    alt_text = parentdiv.children()[10].value;
    $(".popupstockinfo2").html(alt_text);
}
        
//loading popup with jQuery magic!
function loadPopup(){
	//loads popup only if it is disabled
	if(popupStatus==0){
		$(".backgroundPopup").css({
			"opacity": "0.7"
        });
		$(".backgroundPopup").fadeIn("slow");
		$(".popupBox").fadeIn("slow");
		popupStatus = 1;
	}
}

//disabling popup with jQuery magic!
function disablePopup(){
	//disables popup only if it is enabled
	if(popupStatus==1){
		$(".backgroundPopup").fadeOut("slow");
		$(".popupBox").fadeOut("slow");
		popupStatus = 0;
	}
}

//centering popup
function centerPopup(){
	//request data for centering
	var windowWidth = document.documentElement.clientWidth;
	var windowHeight = document.documentElement.clientHeight;
	var popupHeight = $(".popupBox").height();
	var popupWidth = $(".popupBox").width();
	
	//centering - absolute positioning if IE6
	if ($.browser.msie && $.browser.version.substring(0, 1) === '6') {
	    $(".popupBox").css({
	        "position": "absolute",
	        "top": windowHeight / 2 - popupHeight / 2,
	        "left": windowWidth / 2 - popupWidth / 2
	    });
	}
	else {
	    $(".popupBox").css({
	        "position": "fixed",
	        "top": windowHeight / 2 - popupHeight / 2,
	        "left": windowWidth / 2 - popupWidth / 2
	    });
	}
	
	//only need force for IE6
	
	$(".backgroundPopup").css({
		"height": windowHeight
	});
	
}

//CONTROLLING EVENTS IN jQuery
$(document).ready(function() {

    //LOADING POPUP
    //Click the button event!
    $(".more").click(function() {

        //IE6 hack
        if ($.browser.msie && $.browser.version.substring(0, 1) === '6') {

            //var location = $(window).height();
            var scrollTop = $(window).scrollTop();
            var popup_offset = -175;

            $(".popupBox").css({ "margin-top": (scrollTop+popup_offset) + "px" });
        }

        //select the parent div of the selected more info link and initially populate images
        var parentdiv = $(this).parents(".product-content");
        initialPopulate(parentdiv);

        //centering with css
        centerPopup();
        //load popup
        loadPopup();
    });

    //TOGGLE IMAGE EVENT
    $(".imagetoggle").click(function() {

        //get the span that has the background image property of the thumb
        var childimg = $(this).children(".thumb-image");

        //fade out the affected images
        childimg.fadeOut("slow");
        updatePopUp(childimg);

        //        $(".frame-image").fadeOut("slow", function() {
        //            //$(".frame-image").css("background-image", "url(" + transitionImage + ")");
        //            updatePopUp(childimg);
        //        });

    });

    //CLOSING POPUP
    //Click the x event!
    $(".popupContactClose").click(function() {
        disablePopup();
    });
    //Click out event!
    $(".backgroundPopup").click(function() {
        disablePopup();
    });
    //Press Escape event!
    $(document).keypress(function(e) {
        if (e.keyCode == 27 && popupStatus == 1) {
            disablePopup();
        }
    });

});