/* Queue the Site Load Events
===================================================================================== */
if(typeof sIFR == "function") {
    addLoadEvent(initSIFR);
}
addLoadEvent(initClearInputs);
addLoadEvent(initProductImages);
  
/* Product Image Commands
===================================================================================== */
var ProductImage;

function initProductImages(){
    if (getElementsByClass('ProductImage', null, 'img')[0]) {
        ProductImage = getElementsByClass('ProductImage', null, 'img')[0] ;
        ProductImage.onclick = open;
        ProductImage.style.cursor = 'pointer';
        ProductImage.style.cursor = 'hand';
          	
        extraThumbs = getElementsByClass('extraThumbs', null, 'div')[0] ;
        extraThumbLnk = extraThumbs.getElementsByTagName('a') ;
        for (var i=0; i < extraThumbLnk.length; i++) {
          extraThumbLnk[i].onclick = toggle;
        }
    }
}
function toggle() {
  smlImg = getChild(this) ;
  smlSrc = smlImg.src ;
  lrgSrc = smlSrc.substring(0,smlSrc.lastIndexOf('.')) + ".thumb?w=275&h=275";
  ProductImage.src = lrgSrc
  return false;
}
function open() {
  smlSrc = this.src ;
  lrgSrc = smlSrc.substring(0,smlSrc.lastIndexOf('.')) + ".thumb?w=475&h=475";
  ShowPopup(lrgSrc,lrgSrc,515,485,true);
  return false;
}



/* Flash Image Replacement
===================================================================================== */
function initSIFR() {
   	sIFR.bAutoInit = false;
    sIFR.setup();
    sIFR.replaceElement("headers", named({sSelector:".content h1", sFlashSrc:"/Scripts/SIFR/copperplate.swf", sColor:"#424242", sLinkColor:"#424242", sBgColor:"#FFFFFF",sWmode:"transparent"}));
    sIFR.replaceElement("subhead", named({sSelector:".content h2", sFlashSrc:"/Scripts/SIFR/sackersgothic.swf", sColor:"#666666", sLinkColor:"#666666", sBgColor:"#FFFFFF", sCase:"upper"}));

    sIFR.replaceElement("homehead", named({sSelector:"form.home .head h1", sFlashSrc:"/Scripts/SIFR/sackersgothic.swf", sColor:"#FFFFFF", sLinkColor:"#FFFFFF", sBgColor:"#FFFFFF",sWmode:"transparent"}));
    sIFR.replaceElement("hometext", named({sSelector:"p.hometext", sFlashSrc:"/Scripts/SIFR/sackersgothic.swf", sColor:"#FFFFFF", sLinkColor:"#FFFFFF", sBgColor:"#FFFFFF",sWmode:"transparent",nPaddingBottom:"10"}));

}

/* Homepage Flash Replacement
===================================================================================== */
function build_flash(src, w, h, altID) {
    
    getElement(altID).style.display = 'none';
    getElement('flashHead').style.display = 'block';
    
    	
	document.write('<div style="clip: rect(10px, 5px, 10px, 5px)">');
	document.write('<object type="application/x-shockwave-flash" bgcolor="#000000" data="'+src+'" width="'+w+'" height="'+h+'">') ;
	document.write('<param name="movie" value="'+src+'" />') ;
	document.write('<param name="bgcolor" value="#000000" />') ;
	document.write('<param name="wmode" value="transparent" />') ;
	document.write(getElement(altID).innerHTML) ;
	document.write('</object></div>') ;
}


/* Personalised Stationery Shopping Process
===================================================================================== */
function initConfig() {
    var flds = document.getElementsByTagName('fieldset');
    var max = 0;
     
    getElement("Price").style.display = 'block';
      
    for (i = 0; i < flds.length; i++) {
        var f = flds[i];
        
        if (f.offsetHeight > max) max = f.offsetHeight;
        if (i != 0) f.style.display = 'none';   
  
        f.setAttribute('index',i);
        f.className = '';
        configStep(f);
    }
   
    getElement('jswrap').style.height = (max+40) + "px";
    
    createProgress();
    getElementsBySelector("#envonly")[0].style.display = 'none';
}

var selfont;
var prc = 0.00;
var qty = 0;

function configStep(f) {
    switch (f.id)
    {
        case 'size':
            var radios = f.getElementsByTagName('input');
            
            for (var i = 0; i < radios.length; i++){
                var btn = document.createElement('img');
                btn.setAttribute('src','/Images/imgSelect.gif');
                btn.className = 'hand';
                btn.setAttribute('option',i);
                btn.onclick = proceedStep;
                radios[i].style.display = 'none';
                
                var par = radios[i].parentNode.parentNode;
                par.appendChild(btn);
                par.style.paddingTop = '3px';
                par.style.paddingLeft = '0px';
                par.style.width = '60px';
            }
            
            break;
    
        case 'font':
            var radios = f.getElementsByTagName('input');
            
            for (var i = 0; i < radios.length; i++){
                var btn = document.createElement('img');
                btn.setAttribute('src','/Images/imgSelect.gif');
                btn.className = 'hand';
                btn.style.marginTop = '10px';
                btn.setAttribute('option',i);
                btn.onclick = proceedStep;
                radios[i].style.display = 'none';
                
                var par = radios[i].parentNode.parentNode;
                par.appendChild(btn);
             //   par.style.paddingTop = '3px';
                par.style.paddingLeft = '0px';
                par.style.width = '60px';
            }
            
            f.appendChild(buildBack());
            break;
            
        case 'paper':
            var radios = f.getElementsByTagName('input');
            
            for (var i = 0; i < radios.length; i++){
                var btn = document.createElement('img');
                btn.setAttribute('src','/Images/imgSelect.gif');
                btn.className = 'hand';
                btn.setAttribute('option',i);
                btn.onclick = proceedStep;
                btn.onmouseover = highlightPaper;
                
                radios[i].style.display = 'none';
                
                var par = radios[i].parentNode.parentNode;
                par.appendChild(btn);
                par.style.paddingTop = '4px';
                par.style.width = '60px';
                par.style.paddingLeft = '0px';
            }
            
            f.appendChild(buildBack());
            break;
            
        case 'ink':
            var radios = f.getElementsByTagName('input');
            
            for (var i = 0; i < radios.length; i++){
                var btn = document.createElement('img');
                btn.setAttribute('src','/Images/imgSelect.gif');
                btn.className = 'hand';
                btn.setAttribute('option',i);
                btn.onclick = proceedStep;
                btn.onmouseover = highlightInk;
                
                radios[i].style.display = 'none';
                
                var par = radios[i].parentNode.parentNode;
                par.appendChild(btn);
                par.style.paddingTop = '4px';
                par.style.width = '60px';
                par.style.paddingLeft = '0px';
            }
            
            f.appendChild(buildBack());
            break;
            
        case 'reverse':
            var radios = f.getElementsByTagName('input');
            
            for (var i = 0; i < radios.length; i++){
                var btn = document.createElement('img');
                btn.setAttribute('src','/Images/imgSelect.gif');
                btn.className = 'hand';
                btn.setAttribute('option',i);
                btn.onclick = proceedStep;
                
                radios[i].style.display = 'none';
                
                var par = radios[i].parentNode.parentNode;
                par.appendChild(btn);
                par.style.paddingTop = '4px';
                par.style.width = '60px';
                par.style.paddingLeft = '0px';
            }
            
            f.appendChild(buildBack());
            break;
            
        case 'tissue':
            var radios = f.getElementsByTagName('input');
            
            for (var i = 0; i < radios.length; i++){
                var btn = document.createElement('img');
                btn.setAttribute('src','/Images/imgSelect.gif');
                btn.className = 'hand';
                btn.setAttribute('option',i);
                btn.onclick = proceedStep;
                btn.onmouseover = highlightEnvelope;
                
                radios[i].style.display = 'none';
                
                var par = radios[i].parentNode.parentNode;
                par.appendChild(btn);
                par.style.paddingTop = '4px';
                par.style.width = '60px';
                par.style.paddingLeft = '0px';
            }
            
            f.appendChild(buildBack());
            break;
        
        case 'details':
            f.appendChild(buildBack());
            break;
                        
        default:
            break;
    }
}

function proceedStep() {
    var fs = getFieldset(this);
 
    if (fs){
        var radios = fs.getElementsByTagName('input');
        radios[this.getAttribute('option')].checked = true;
        
        UpdatePrice();
        
        if (fs.id == "size"){
            setReversePrice();
            setTissuePrice();
            setPaperPreview();
        }
        else if (fs.id == "font"){
            getFontSel();
            var pvw = getElementsBySelector('#ink img.prev')[0];
            pvw.src = '/Images/M/BlackFont' + selfont + '.gif';
        }
        else if(fs.id == "reverse"){
            var tx = getElementsBySelector("#details textarea")[0];
            var bt = getElementsBySelector("#details input.btn")[0];
            
            if (isReverse()){
                getElementsBySelector("#envonly")[0].style.display = 'block';
                bt.style.visibility = "hidden";    
                tx.onkeyup = function(){if (this.value.length > 0) getElementsBySelector("#details input.btn")[0].style.visibility = "visible"; else { getElementsBySelector("#details input.btn")[0].style.visibility = "hidden"}};
            }
            else{
                getElementsBySelector("#envonly")[0].style.display = 'none';
                bt.style.visibility = "visible";    
                tx.onkeyup = function(){return true;};
            }
        }
        
        nextStep(fs);
    }
}
function highlightInk() {
    var img = getPrevious(this.parentNode).getElementsByTagName('img')[0];
    var pvw = getElementsBySelector('#ink img.prev')[0];
    pvw.src = '/Images/M/' + img.getAttribute('alt') + 'Font' + selfont + '.gif';
}
function highlightEnvelope() {
    var img = getPrevious(this.parentNode).getElementsByTagName('img')[0];
    var pvw = getElementsBySelector('#tissue img.prev')[0];
    pvw.src = '/Images/Envelope' + img.getAttribute('alt') + '.gif';
}
function highlightPaper() {
    var img = getPrevious(this.parentNode).getElementsByTagName('img')[0];
    var pvw = getElementsBySelector('#paper img.prev')[0];
    pvw.src = "/Images/" + getTemplateName() + "-" + img.getAttribute('alt') + ".gif";
}
function getFieldset(n) {
    var pn = n.parentNode;
    
    while (pn.nodeName != "FIELDSET"){
        pn = pn.parentNode;
    }
    
    return pn;
}
function getPrevious(n) {
    var pn = n.previousSibling;
    
    while (pn.nodeType != 1)
    {
        pn = pn.previousSibling;
    }
    
    return pn;
}
function buildBack() {
    var btn = document.createElement('a');
    btn.className = 'btn back';
    btn.setAttribute('href','#');
    btn.appendChild(document.createTextNode("Previous"));
    btn.onclick = prevStep;
    
    return btn;
}

function nextStep(fs) {
    var flds = document.getElementsByTagName('fieldset');
    var id = fs.getAttribute('index')
    var current = flds[id];
    var next = flds[parseInt(id) + 1];
    
    setProgress(id+1);
    
    new Effect.SwitchOff(current,{queue:'front',duration: 0.6});
    if (next) {   
        new Effect.BlindDown(next,{queue:'end',duration: 0.6}); 
    }
}
function prevStep() {
    var fs = getFieldset(this);
    var flds = document.getElementsByTagName('fieldset');
    var id = fs.getAttribute('index')
    var current = flds[id];
    var next = flds[parseInt(id) - 1];
    
    setProgress(id-1);
    
    new Effect.SwitchOff(current,{queue:'front',duration: 0.6});
    if (next) {   
        new Effect.BlindDown(next,{queue:'end',duration: 0.6}); 
    }
    return false;
}
function getFontSel(){
    var opt = getElementsBySelector('#font input');

    for (i = 0;i < opt.length;i++){
        var r = opt[i];
        if (r.checked)
        {
            selfont = r.parentNode.getAttribute('node');
            selfont = selfont.substring(selfont.length-1,selfont.length);
        }
    }
}
function setReversePrice(){
    var opt = getElementsBySelector('#reverse input');
    if (!opt) return;
    var txt = null;
    var cost;
    
    for (i = 0;i < opt.length;i++){
        var r = opt[i];
        var flag = "per" + qty;
        if (r.parentNode.getAttribute('node') == "Yes"){
            cost = r.parentNode.getAttribute(flag);
            txt = getPrevious(r.parentNode.parentNode);   
        }
    }
    
    if (txt) txt.innerHTML = "&pound;" + cost + " additional cost";
}
function setTissuePrice(){
    var opt = getElementsBySelector("#tissue dd span")[1];
    if (!opt) return;
    var cost;
    var flag = "per" + qty;

    cost = opt.getAttribute(flag);
    getElementsBySelector("#tissue div.ink div")[0].innerHTML = "Our luxurious tissue lined enevlopes are available at an additional cost of &pound;" + cost;
}
function isReverse(){
   var opt = getElementsBySelector('#reverse input');

    for (i = 0;i < opt.length;i++){
        var r = opt[i];
        if (r.checked)
        {
            var sel = r.parentNode.getAttribute('node');
            if (sel == "Yes")
            {
                return true;
            }else{
                return false;
            }
        }
    }
}
function setPaperPreview(){
    var img = getElementsBySelector("#paper img.prev")[0];
    img.src = "/Images/" + getTemplateName() + "-White.gif";
}
function getTemplateName(){
    var opts = getElementsBySelector("#size input");
    var ret;
    
    for (i = 0;i < opts.length;i++){
        var r = opts[i];
        if (r.checked)
        {
            ret = r.parentNode.getAttribute('opt');
            break;
        }
    }
    
    return ret;   
}

function createProgress(){
    // Create the Header Element
    var hd = document.createElement("h4");
    hd.appendChild(document.createTextNode("Order Progress"));
    getElementsBySelector("div.nav")[0].appendChild(hd);
    
    // Create the Progress Steps
    var ul = document.createElement("ul");
    ul.className = "progress";
    
    var fs = getElementsBySelector("fieldset");
    
    for (i=0;i < fs.length;i++){
        var li = document.createElement("li")
        li.innerHTML = "<span>" + fs[i].getAttribute("section") + "</span>";
        if (fs[i].getAttribute("section") == "") li.innerHTML = "<span>Size &amp; Quantity</span>";
        last = fs[i].innerText;
        ul.appendChild(li);
    }

    getElementsBySelector("div.nav")[0].appendChild(ul);
    setProgress(0);
}
function setProgress(id) {
    var li = getElementsBySelector("ul.progress li");
    
    for (i = 0;i<li.length;i++)
    {
        if (i==id) { 
            li[i].className = "on";
        }
        else{
            li[i].className = "";
        }
    }

}

/* Calculation Methods */
function UpdatePrice(){
    var rads = document.getElementsByTagName('input');
    
    for (i = 0; i < rads.length; i++)
    {
        r = rads[i];
        if (r.getAttribute("type") == "radio")
        {
            if (r.checked)
            {
                r = r.parentNode;
                
                if (r.getAttribute("qty")){
                    qty = r.getAttribute("qty");
                    prc = parseFloat(r.getAttribute("baseprice"));
                }
                else
                {
                    var flag = "per" + qty;
                    if (r.getAttribute(flag))
                    {
                        prc = prc + parseFloat(r.getAttribute(flag));
                    }
                }
            }
        }
    }
    new Effect.CashRegister('CurrentPrice',prc,{duration:0.6});
}

Effect.CashRegister = Class.create();
  Object.extend(Object.extend(Effect.CashRegister.prototype, Effect.Base.prototype), {
    initialize: function(element, price) {
      var options = arguments[2] || {};
      this.element = $(element);
      this.startPrice = parseFloat(this.element.innerHTML.substring(1));
      this.finishPrice = price;
      this.delta = (this.finishPrice-this.startPrice);
      this.start(options);
    },
    update: function(position) {
      var value = (this.startPrice + (this.delta*position)).toString().split('.');
      var cent  = value.length==1 ? '00' : (
        value[1].length == 1 ? value[1]+"0" : value[1].substring(0,2));
      Element.update(this.element, '£' + value[0] + '.' + cent);
    }
  });