﻿window.onload = load;
var off=true;
var mouse=false;
var mouseon=false;
var leftStatus=new Array(4);
var leftSize=89;

function load()
{
    brandload();
    fullload();
    leftLoad();

    //var payform = document.getElementById("overlay");
    //var paysubmit = document.getElementById("paymentSubmit");
    //payform.onsubmit = submitcheck();
}

function fullload()
{
    var overlay = document.getElementById("overlay");
    var container = document.getElementById("container");
    var dims = getDimensions(container);
    var docHeight = dims.height;
    overlay.style.height=docHeight+"px";
    try {showOther(document.getElementById('title').value)} catch(e) {}
}

function leftLoad() {
    for ( var i=0, len=leftStatus.length; i<len; ++i ) {
        var element = document.getElementById("side_r" + i);
        if(element) {
            var linkdiv = document.getElementById("side_link"+i);
            var dims = getDimensions(element);
            var total = dims.height;
            var viewable = dims.cheight;
            var cookiestatus = readCookie("leftstatus"+i);
            
            if(total > leftSize) {
                var partialsize = leftSize;
                var morelink = true;
            } else {
                var partialsize = total;
                var morelink = false;
            }

            if(cookiestatus) {
                leftStatus[i] = cookiestatus;
            } else {
                leftStatus[i] = 1;
            }
            
            if(leftStatus[i] == 0) {
                linkdiv.innerHTML='<a href="javascript:leftTog('+i+',1)">view [+]</a>';
                setHeight(0,element.id,true)
            } else if(leftStatus[i] == 1) {
                if(morelink) {linkdiv.innerHTML='<a href="javascript:leftTog('+i+',1)">view all [+]</a>';} else {linkdiv.innerHTML='';}
                setHeight(partialsize,element.id,true)
            } else if(leftStatus[i] == 2) {
                if(morelink) {linkdiv.innerHTML='<a href="javascript:leftTog('+i+',1)">view less [-]</a>';} else {linkdiv.innerHTML='';}
                setHeight(total,element.id,true);
            }
        }
    }
}

function leftTog(id,status)
{
    var element = document.getElementById("side_r"+id);
    var linkdiv = document.getElementById("side_link"+id);
    var dims = getDimensions(element);
    var total = dims.height;
    var viewable = dims.cheight;
    
    if(total > leftSize) {
        var partialsize = leftSize;
        var morelink = true;
    } else {
        var partialsize = total;
        var morelink = false;
    }

    if(status == 1) {
        if(leftStatus[id] == 0) {
            //alert("set partial view (from off)");
            leftStatus[id]=1;
            blind(element,0,partialsize,true,10,10);
        } else if(leftStatus[id] == 1) {
            //alert("set full view (from partial)");
            leftStatus[id]=2;
            blind(element,partialsize,total,true,10,10);
        } else if(leftStatus[id] == 2) {
            //alert("set partial view (from full)");
            leftStatus[id]=1;
            blind(element,total,partialsize,true,10,10);
        }
    } else {
        if(leftStatus[id] != 0) {
            //alert("set off");
            leftStatus[id]=0;
            blind(element,viewable,0,true,20,5);
        } else {
            //alert("set partial view (from off)");
            leftStatus[id]=1;
            blind(element,0,partialsize,true,10,10);
        }
    }
    
    if(leftStatus[id] == 0) {
        linkdiv.innerHTML='<a href="javascript:leftTog('+id+',1)">view [+]</a>';
    } else if(leftStatus[id] == 1) {
        if(morelink) {linkdiv.innerHTML='<a href="javascript:leftTog('+id+',1)">view all [+]</a>';} else {linkdiv.innerHTML='';}
    } else if(leftStatus[id] == 2) {
        if(morelink) {linkdiv.innerHTML='<a href="javascript:leftTog('+id+',1)">view less [-]</a>';} else {linkdiv.innerHTML='';}
    }
    
    createCookie('leftstatus'+id,leftStatus[id],0);
}

function zoomTog(img)
{
    var image_main = document.getElementById('info_image_main');
    var image_zoom = document.getElementById('info_image_zoom');
    var zoom_over = document.getElementById("zoom_over");
    var mouse_window = document.getElementById("mouseWindow");
    var link_zoom = document.getElementById("link_zoom");

    
    if(off) {
        mouse_window.onmousemove = track_movement;
        image_main.onmousemove = track_movement;
        mouse_window.onmouseout = mouse_out;
        image_main.onmouseout = mouse_out;
        link_zoom.className = 'link_zoom_on';
        off=false;
    } else {
        mouse_window.onmousemove = '';
        image_main.onmousemove = '';
        mouse_window.onmouseout = '';
        image_main.onmouseout = '';
        link_zoom.className = 'link_zoom';
        mouse_out()
        off=true;
    }
}

function track_movement(e)
{
    var image_main = document.getElementById('info_image_main');
    var image_zoom = document.getElementById('info_image_zoom');
    var zoom_over = document.getElementById("zoom_over");
    var mouse_window = document.getElementById("mouseWindow");
    var link_zoom = document.getElementById("link_zoom");

    IEdifference = 0;
    zoom_over.style.display="block";
    mouse_window.style.display="block";
    
    var IE = document.all?true:false;
    if (IE){
        pageXpos = event.clientX + IEdifference;
        pageYpos = event.clientY + IEdifference;
    } else {
        pageXpos = e.clientX;
        pageYpos = e.clientY;
    }  
    imageH = image_main.height;
    imageW = image_main.width;
    
    zoomH = image_zoom.height;
    zoomW = image_zoom.width;
    viewH = zoom_over.offsetHeight;
    viewW = zoom_over.offsetWidth;
    if (isNaN(zoomH)) {zoomH=0;}
    if (isNaN(zoomW)) {zoomW=0;}
    if (isNaN(viewH)) {viewH=0;}
    if (isNaN(viewW)) {viewW=0;}
    ratio = zoomH / imageH;
    
    var ScrollTop = document.body.scrollTop;
    if (ScrollTop == 0){
        if (window.pageYOffset)
            ScrollTop = window.pageYOffset;
        else
            ScrollTop = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
    }
    
    if (window.XMLHttpRequest) {ie6xpos=0;} else { ie6xpos=imageW;}
    
    var coords = findPos(image_main);
    divXpos = coords[0];
    divYpos = coords[1]-ScrollTop;
    imageYpos = (-pageYpos + divYpos) * ratio + (viewH / 2);
    imageXpos = (-pageXpos + divXpos) * ratio + (viewW / 2);
    winH = Math.round(viewH / ratio);
    winW = Math.round(viewW / ratio);
    
    if (isNaN(winH)) {winH=0;}
    if (isNaN(winW)) {winW=0;}
    
    mouse_window.style.height = winH + "px";
    mouse_window.style.width = winW + "px";
    winYpos = (pageYpos - divYpos - (winH / 2));
    winXpos = (pageXpos - divXpos - (winW / 2));
    maxXpos = -imageW*ratio + (viewW);
    maxYpos = -imageH*ratio + (viewH);
    maxXwin = imageW - (winW);
    maxYwin = imageH - (winH);
    if(imageXpos > 0){imageXpos=0;}
    if(imageYpos > 0){imageYpos=0;}
    if(imageXpos < maxXpos){imageXpos = maxXpos;}
    if(imageYpos < maxYpos){imageYpos= maxYpos;}
    if(winXpos < 0){winXpos=0;}
    if(winYpos < 0){winYpos=0;}
    if(winXpos > maxXwin){winXpos = maxXwin;}
    if(winYpos > maxYwin){winYpos = maxYwin;}
    mouse_window.style.marginTop = winYpos + "px"
    mouse_window.style.marginLeft = winXpos + "px"
    image_zoom.style.marginTop = imageYpos + "px";
    image_zoom.style.marginLeft = imageXpos + "px";
}

function mouse_out()
{
    document.getElementById("zoom_over").style.display="none";
    document.getElementById("mouseWindow").style.display="none";
}

function showImage(pcode,pcol,img,status)
{
    var container = document.getElementById("fullscreen_container");
    var mouse_window = document.getElementById("mouseWindow");
    var image_main = document.getElementById("info_image_main");
    var overlay = document.getElementById("overlay");
    
    var xmlHttp=null;

    if (pcode.length==0)
      { 
      container.innerHTML="";
      return;
      }
    try
      {
      xmlHttp=new XMLHttpRequest();
      }
    catch(e)
      {
      try
        {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
      catch(e)
        {
        alert ("Your browser does not support XMLHTTP!");
        return;  
        }
      }
    var url="fullscreen.asp";
    url=url+"?pcode=" + pcode;
    url=url+"&pcol=" + pcol;
    url=url+"&img=" + img;
    url=url+"&status=" + status;
    xmlHttp.open("GET",url,false);
    xmlHttp.send(null);
    container.innerHTML=xmlHttp.responseText;
    
    if (!status) {
        blind(container,0,700,true,25,20);
        opacity(overlay,0,60,1,300);
    } else {
        var fullscreen_image_div = document.getElementById("fullscreen_image_div");
        opacity(fullscreen_image_div,0,100,1,100);
    }
}

function hideImage()
{
    var overlay = document.getElementById("overlay");
    var container = document.getElementById("fullscreen_container");
    blind(container,700,0,true,20,20);
    opacity(overlay,60,0,1,150);
}

function clearDefault(el) 
{
    if (el.defaultValue==el.value) el.value = "";
}

function showOther(str)
{
    c = document.getElementById("title_other");
    if(str =="Other")
    {
        c.style.display="block";
    }
    else
    {
        c.style.display="none";
    }
}

function bskremove(product)
{
    document.getElementById(product).checked=true;
    document.basket.submit();
}
  
function findPos(obj) {
    var curleft = curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
    }    
    return [curleft,curtop];
}

function opacity(element,opacStart,opacEnd,block,millisec) {
	var speed = Math.round(millisec / 100);
	var timer = 0;

	if(opacStart > opacEnd) {
		for(i = opacStart; i >= opacEnd; i--) {
			setTimeout("setOpacity(" + i + ",'" + element.id + "'," + block + ")",(timer * speed));
			timer++;
		}
	} else if(opacStart < opacEnd) {
		for(i = opacStart; i <= opacEnd; i++)
			{
			setTimeout("setOpacity(" + i + ",'" + element.id + "'," + block + ")",(timer * speed));
			timer++;
		}
	}
}

function blind(element,intStart,intEnd,block,increment,speed) {
	var timer = 0;
	if(intStart > intEnd) {
		for(i = intStart; i >= intEnd; i=i-increment) {
			setTimeout("setHeight(" + i + ",'" + element.id + "'," + block + ")",Math.round(timer * speed));
			timer++;
		}
		setTimeout("setHeight(" + intEnd + ",'" + element.id + "'," + block + ")",Math.round(timer * speed));
	} else if(intStart < intEnd) {
		for(i = intStart; i <= intEnd; i=i+increment) {
			setTimeout("setHeight(" + i + ",'" + element.id + "'," + block + ")",Math.round(timer * speed));
			timer++;
		}
		setTimeout("setHeight(" + intEnd + ",'" + element.id + "'," + block + ")",Math.round(timer * speed));
		
	}
	//alert("start"+intStart+" end:"+intEnd);
}

function setOpacity(opacity,id,block) {
	var element = document.getElementById(id).style;
	element.opacity = (opacity / 100);
	element.MozOpacity = (opacity / 100);
	element.KhtmlOpacity = (opacity / 100);
	element.filter = "alpha(opacity=" + opacity + ")";
	element.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + opacity + ')';
	if(block) {
	    if(opacity == 0) {
	        element.display="none"; 
	    } else {
	        element.display="block"; 
	    }
	}
}

function setHeight(height,id,block) {
	var element = document.getElementById(id).style;
	element.height = height+"px";

    if(block) {
	    if(height == 0) {
	        element.display="none"; 
	    } else {
	        element.display="block"; 
	    }
	}
}

function getDimensions(element) {
    var display = getStyle(element,'display');
    if (display != 'none' && display != null) 
        return {width: element.scrollWidth, height: element.scrollHeight, cwidth: element.offsetWidth, cheight: element.offsetHeight};

    var originalVisibility = element.style.visibility;
    var originalPosition = element.style.position;
    var originalDisplay = element.style.display;
    element.style.visibility = 'hidden';
    element.style.position = 'absolute';
    element.style.display = 'block';
    var contentWidth = element.scrollWidth;
    var contentHeight = element.scrollHeight;
    var currWidth = element.offsetWidth;
    var currHeight = element.offsetHeight;
    element.style.display = originalDisplay;
    element.style.position = originalPosition;
    element.style.visibility = originalVisibility;
    return {width: contentWidth, height: contentHeight, cwidth: currWidth, cheight: currHeight};
}
  
function getStyle(element,elementStyle)
{
	if (element.currentStyle)
		var status = element.currentStyle[elementStyle];
	else if (window.getComputedStyle)
		var status = document.defaultView.getComputedStyle(element,null).getPropertyValue(elementStyle);
	return status;
}

function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

function submitcheck() {
    var first_name_label = document.getElementById("firstNameLabel");
    var last_name_label = document.getElementById("lastNameLabel");
    var card_type_label = document.getElementById("creditCardTypeLabel");
    var card_num_label = document.getElementById("creditCardNumberLabel");
    var valid_month_label = document.getElementById("stDateLabel");
    var exp_month_label = document.getElementById("expDateLabel");
    var cvv2_num_label = document.getElementById("cvv2NumberLabel");
    var issue_num_label = document.getElementById("issueNumberLabel");
    
    var first_name = document.getElementById("firstName").value;
    var last_name = document.getElementById("lastName").value;
    var card_type = document.getElementById("creditCardType").value;
    var card_num = document.getElementById("creditCardNumber").value;
    var valid_month = document.getElementById("stDateMonth").value;
    var valid_year = document.getElementById("stDateYear").value;
    var exp_month = document.getElementById("expDateMonth").value;
    var exp_year = document.getElementById("expDateYear").value;
    var cvv2_num = document.getElementById("cvv2Number").value;
    var issue_num = document.getElementById("issueNumber").value;

    var submit_save = document.getElementById("paymentSubmit");
    var submit_error = document.getElementById("payformerror");
    
    var error_colour = '#FF0000';
    var valid_colour = '#666666';
    var date_seper = '/';

    var err1 = 0;

    if (!first_name || first_name.count(' ') >= first_name.length) {
        first_name_label.style.color = error_colour;
        err1 = 1;
    } else {
        first_name_label.style.color = valid_colour;
    }

    if (!last_name || last_name.count(' ') >= last_name.length) {
        last_name_label.style.color = error_colour;
        err1 = 1;
    } else {
        last_name_label.style.color = valid_colour;
    }

    if (!card_type || card_type.count(' ') >= card_type.length) {
        card_type_label.style.color = error_colour;
        err1 = 1;
    } else {
        card_type_label.style.color = valid_colour;
    }

    if (!card_num || card_num.count(' ') >= card_num.length) {
        card_num_label.style.color = error_colour;
        err1 = 1;
    } else {
        card_num_label.style.color = valid_colour;
    }

    if (!exp_month || !exp_year) {
        exp_month_label.style.color = error_colour;
        err1 = 1;
    } else {
        exp_month_label.style.color = valid_colour;
    }

    if (!cvv2_num || cvv2_num.count(' ') >= cvv2_num.length) {
        cvv2_num_label.style.color = error_colour;
        err1 = 1;
    } else {
        cvv2_num_label.style.color = valid_colour;
    }

    
    if(err1 == 1) {
        //submit_save.disabled = true;
        submit_error.style.display = "block";
    } else {
        //submit_save.disabled = false;
        submit_error.style.display = "none";
        document.payform.submit(); 
    }

    return false;
}

String.prototype.count = function (s1) {
    return (this.length - this.replace(new RegExp(s1, "g"), '').length) / s1.length;
}
