function findLeft(id) {
    if (id == 'car2' || id == 'car5' || id == 'car8') {
        return '98px';
    } else if (id == 'car3' || id == 'car6' || id == 'car9') {
        return '206px';
    }
    return '0px';
}

function findTop(id) {
    if (id == 'car4' || id == 'car5' || id == 'car6') {
        return '110px';
    } else if (id == 'car7' || id == 'car8' || id == 'car9') {
        return '198px';
    }
    return '21px';
}


function reset(elem, event) {
    //console.log("RESET currentTarget: "+event.currentTarget.id+"("+event.currentTarget.className+"), target: "+event.target.id+"("+event.target.className+"), secTarget: "+event.relatedTarget.id+"("+event.relatedTarget.className+")");
    //console.log("reset "+elem.id+" x: "+event.layerX+", y: "+event.layerY+" elem x:"+elem.offsetLeft+", elem y"+elem.offsetTop+", elem widht: "+elem.offsetWidth);


    if (!event) event = window.event;
    var relatedTarget = (event.relatedTarget) ? event.relatedTarget : event.toElement;

    while (relatedTarget && relatedTarget.tagName != 'BODY'){
        if (relatedTarget.id == elem.id || relatedTarget.className == 'carField'){
            return;
        }
        relatedTarget = relatedTarget.parentNode;
    }

    if (swapcars.currentCar) {
        swapcars.currentCar.onmousemove = null;
    }
    swapcars.currentCar = null;
    swapcars.mouseMovementCounter = 0;
    fadeOut(elem, 100);
    //re-enable 15 second timer
    swapcars.timer = setInterval(function() {
        swapcars.makeCarDiv(swapcars.itemList)
    }, 15000);
}

function SwapCars() {
    this.itemNumber = 0;
    this.itemList = new Array();
    this.timer = 0;
    this.obscuraUrl = "";
    this.carImageSize = "140x78rc/";
    this.distImageSize = "140x35r/";
    this.landingBaseUrl = "";
    this.detailBaseUrl = "";
    this.resourceBaseUrl = "";
    this.bigFallbackImg = "bil_placeholder_140x105.gif";
    this.fallbackImg = "bil_placeholder_140x73.gif";
    this.nedstatCode = "dev"; //default

    //register onmouseover handler for the popup to cancel fadeout when one reenters the big div
    document.getElementById('bigCarField').onmouseover = function() {
        if (swapcars.currentCar) {
            swapcars.currentCar.onmousemove = null;
        }
        swapcars.currentCar = null;
        swapcars.mouseMovementCounter = 0;
        clearTimeout(swapcars.fadeTimeout);
    }

}

SwapCars.prototype.bigCarOn = function(elem, event) {
    if (swapcars.currentCar != elem) {
        //cancel fade timeout
        if (swapcars.currentCar) {
            swapcars.currentCar.onmousemove = null;
        }
        //temporary store car elem
        swapcars.currentCar = elem;

        setTimeout(function() {
            //reset mouse movement counter
            swapcars.mouseMovementCounter = 0;
            clearTimeout(swapcars.fadeTimeout);
            //start 1 second fade timeout.
            swapcars.fadeTimeout = setTimeout(function() {
                fadeOut(document.getElementById('bigCarField'), 100)
            }, 1000);
            if (swapcars.currentCar) {
             
                swapcars.currentCar.onmousemove = function(event) {
                    //assign onmousemove handler to small car div. it will count move events.
                    swapcars.observeMouseMovement(event)
                };
            }
        }, 50);
    }
};

SwapCars.prototype.observeMouseMovement = function(event) {
    if (!event) event = window.event;
    var relatedTarget = (event.target) ? event.target : event.srcElement;

    while (relatedTarget && relatedTarget.tagName != 'BODY'){
        if (relatedTarget == swapcars.currentCar){
            swapcars.mouseMovementCounter++;
            if (swapcars.mouseMovementCounter > 1) {
                clearTimeout(swapcars.fadeTimeout);
                swapcars.updateBigCar(swapcars.currentCar);
                if (swapcars.currentCar) {
                    swapcars.currentCar.onmousemove = null;
                }
                swapcars.mouseMovementCounter = 0;
                swapcars.currentCar = null;
                break;
            }
        }
        relatedTarget = relatedTarget.parentNode;
    }
};

SwapCars.prototype.updateBigCar = function(elem) {
    var carImageSize = "140x105r/";
    var distImageSize = "210x45r/";

    var bigCarField = document.getElementById("bigCarField");
    var bigCarContent = document.getElementById("bigCarContent");

    bigCarContent.innerHTML = elem.innerHTML;
    
    //unfortunately, innerHTML copying ignores event handlers. therefore we must copy those separately
    var newLinks = bigCarContent.getElementsByTagName("a");
    var oldLinks = elem.getElementsByTagName("a");
    for (linkCnt = 0; linkCnt < newLinks.length; linkCnt ++) {
        newLinks[linkCnt].onclick = oldLinks[linkCnt].onclick;
    }


    var images = bigCarContent.getElementsByTagName("img");
    var carOrgImg = images[0];
    var distOrgImg = images[1];

    var oldCarSrc = carOrgImg.src;
    var oldDistSrc = distOrgImg.src;

    carOrgImg.src = this.obscuraUrl + carImageSize + oldCarSrc.substring(oldCarSrc.lastIndexOf("/")+1);
    carOrgImg.onerror = function(evt){
        carOrgImg.src = swapcars.resourceBaseUrl+swapcars.bigFallbackImg
        carOrgImg.onerror = null;
    };

    distOrgImg.src = this.obscuraUrl + distImageSize + oldDistSrc.substring(oldDistSrc.lastIndexOf("/")+1);

    if (navigator.appName=="Microsoft Internet Explorer")
    {
        //preload images in IE to be able to set correct image dimensions. else, images get stretched wrongly.
        var tmpImg = new Image();
        tmpImg.onload = function() {
            carOrgImg.width = tmpImg.width;
            carOrgImg.height = tmpImg.height;
        }
        tmpImg.src = carOrgImg.src;

        var tmpImg2 = new Image();
        tmpImg2.onload = function() {
            distOrgImg.width = tmpImg2.width;
            distOrgImg.height = tmpImg2.height;
        }
        tmpImg2.src = distOrgImg.src;
    }

    bigCarField.style.left = findLeft(elem.id);
    bigCarField.style.top = findTop(elem.id);

    this.clipTitle(bigCarContent, 'carContentTitle' , 45, 7);

    //reset swap timer
    bigCarField.className = "bigCarField";
    clearInterval(swapcars.timer);
};

SwapCars.prototype.clipTitle = function(container, titleDivName, maxHeight, clippingStep) {
    var divs = container.getElementsByTagName("div");
    var y;
    for (y = 0; y < divs.length; y++) {
        var tmpDiv = divs[y];
        if (tmpDiv.className == titleDivName) {
            var linkobj = tmpDiv.childNodes[0];
            var clipping = false;

            while (tmpDiv.scrollHeight > maxHeight)  {
                clipping = true;
                linkobj.innerHTML = linkobj.innerHTML.substring(0, linkobj.innerHTML.length - clippingStep);
            }
            if (clipping) {
                linkobj.innerHTML = linkobj.innerHTML.substring(0, linkobj.innerHTML.length - 3) + '...';
            }
            return;
        }
    }
}


SwapCars.prototype.getJsonData = function(json, gfxUrl) {
    this.obscuraUrl = gfxUrl;

    var list = eval('(' + json + ')');
    var distributorList = list.resources.resource.data.forhandlerlist;
    var numberDistributors = distributorList.length;
    if (distributorList != null && (!numberDistributors)) {
        numberDistributors = 1;
    }
    //this.itemList = new Array;
    var number = 0;

    //10 cars per distributor
    for (i = 0; i <= 9; i++) {
        //for each seller
        for (j = 0; j < numberDistributors; j++) {
            if (numberDistributors == 1) {
                distributor = distributorList;
            } else {
                distributor = distributorList[j];
            }
            //if the seller has cars at all
            if (distributor.rss.channel.item) {
                //and if the seller has car number [i]
                if (distributor.rss.channel.item[i]) {
                    //put it into the itemList
                    this.itemList[number] = distributor.rss.channel.item[i];
                    number++;
                } else {
                    if (distributor.rss.channel.item[0]) {
                        //else use this sellers car Nr. 1
                        this.itemList[number] = distributor.rss.channel.item[0];
                        number++;
                    } else {
                        this.itemList[number] = distributor.rss.channel.item;
                        number++;
                    }
                }

            }
        }
    }

    //randomize starting car
    this.itemNumber = Math.floor(Math.random()*this.itemList.length);

    //redraw carbox
    this.makeCarDiv(this.itemList);

    //and set refresh timer to 15 seconds
    this.timer = setInterval(function() {
        swapcars.makeCarDiv(swapcars.itemList)
    }, 15000);
};

SwapCars.prototype.refresh = function() {
    this.makeCarDiv(this.itemList);
    clearInterval(swapcars.timer);
};

SwapCars.prototype.makeCarDiv = function(list) {
    fadeOut(document.getElementById("bigCarField"),100);
    var maxBoxes = 9;
    //loop over all 9 car spots
    for (i = 1; i <= maxBoxes; i++) {

        //remove the current car div
        var removeCar = document.getElementById("car"+i);
        try {
            document.getElementById("carboxContent").removeChild(removeCar);
        } catch (err) {
        //console.log("error removing div" + err);
        }

        if (list[this.itemNumber] != null) {
            var newdiv = this.addNewCar(i, list);
            document.getElementById("carboxContent").appendChild(newdiv);
        } else {
            if (maxBoxes <= list.length)
            maxBoxes++;
        }

        this.itemNumber++;

        //start over again if list is through
        if (this.itemNumber > list.length - 1) {
            this.itemNumber = 0;
        }

    }
};


SwapCars.prototype.addNewCar = function(divNumber, list) {
    var newdiv = document.createElement("div");
    newdiv.id = "car"+divNumber;
    newdiv.className = "carField";
    //newdiv.setAttribute("onmouseout", "reset(newdiv, event);");
    newdiv.onmouseover = function(event) {
        swapcars.bigCarOn(newdiv, event);
    };

    var frame1 = document.createElement("div");
    var frame2 = document.createElement("div");
    var frame3 = document.createElement("div");
    var carContent = document.createElement("div");

    frame1.className = "carFrame1";
    frame2.className = "carFrame2";
    frame3.className = "carFrame3";
    carContent.className = "carContent";

    newdiv.appendChild(frame1);
    newdiv.appendChild(frame2);
    newdiv.appendChild(frame3);
    newdiv.appendChild(carContent);

    this.fillCarContent(carContent, list);

    return newdiv;
};

SwapCars.prototype.fillCarContent = function(carContent,list) {
    var carContentImages = document.createElement("div");
    carContentImages.className = "carContentImages";
    var carContentLogo = document.createElement("div");
    carContentLogo.className = "carContentLogo";
    var carContentRight = document.createElement("div");
    carContentRight.className = "carContentRight";

    //skriver ut tittel
    var carContentTitle = document.createElement("div");
    carContentTitle.className = "carContentTitle";
    carContentTitle.appendChild(this.wrapCarLink(document.createTextNode(list[this.itemNumber].title), list));
    //carContentTitle.appendChild(this.wrapCarLink(document.createTextNode("test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test"), list));

    carContent.appendChild(carContentTitle);
    carContent.appendChild(carContentImages);
    carContent.appendChild(carContentRight);
    carContent.appendChild(carContentLogo);

    this.fillCarImage(carContentImages, list);
    this.fillSellerImage(carContentLogo, list);
    this.fillCarSpecs(carContentRight, list);
};

SwapCars.prototype.fillCarSpecs = function(carContentRight, list) {
    var carContentSpecs = document.createElement("div");
    carContentSpecs.className = "carContentSpecs";

    var priceLabel = document.createElement("label");
    priceLabel.appendChild(this.wrapCarLink(document.createTextNode("Pris:"), list));
    var priceValue = document.createElement("span");
    priceValue.appendChild(this.wrapCarLink(document.createTextNode(this.formatNumber(list[this.itemNumber]["zett:price"])),list));

    var kmLabel = document.createElement("label");
    kmLabel.appendChild(this.wrapCarLink(document.createTextNode("Km:"),list));
    var kmValue = document.createElement("span");
    kmValue.appendChild(this.wrapCarLink(document.createTextNode(this.formatNumber(list[this.itemNumber]["zett:mileage"])),list));

    var yearLabel = document.createElement("label");
    yearLabel.appendChild(this.wrapCarLink(document.createTextNode("\u00C5rsmodell:"),list));
    var yearValue = document.createElement("span");
    yearValue.appendChild(this.wrapCarLink(document.createTextNode(list[this.itemNumber]["zett:modelyear"]),list));

    carContentSpecs.appendChild(priceLabel);
    carContentSpecs.appendChild(priceValue);
    carContentSpecs.appendChild(kmLabel);
    carContentSpecs.appendChild(kmValue);
    carContentSpecs.appendChild(yearLabel);
    carContentSpecs.appendChild(yearValue);

    carContentRight.appendChild(carContentSpecs);

    var carContentLinks = document.createElement("div");
    carContentLinks.className = "carContentLinks";

    var oid = list[this.itemNumber]["zett:objectid"];
    var carLink = this.createLink("text.car");
    carLink.href = this.detailBaseUrl + "?objectId="+oid;
    
    carLink.appendChild(document.createTextNode("Se mer om bilen"));
    carContentLinks.appendChild(carLink);

    var oid = list[this.itemNumber]["zett:companyname"].replace(/&/, '^');
    oid = encodeURIComponent(oid);    
    //oid = encodeURIComponent(list[this.itemNumber]["zett:companyname"]);
    var sellerLink = this.createLink("text.company");
    sellerLink.href = this.landingBaseUrl + "?forhandler="+oid;
    sellerLink.appendChild(document.createTextNode("Se flere biler fra forhandleren"));
    carContentLinks.appendChild(sellerLink);

    carContentRight.appendChild(carContentLinks);
};

SwapCars.prototype.createLink = function(counterText) {
    var link = document.createElement("a");
    link.target = "_top";
    link.onclick = function(e) {
        var a = this;
        //alert('ns_onclick (a='+a+',url='+url+',name='+name+',type='+type+',winopt='+winopt+')');
        if (e.button != 0) {
            //skip method if other mouse buttan than left is pressed.
            return false;
        }
        var ns_l="http://int.sitestat.com/a-pi/"+swapcars.nedstatCode+"/s?rubrikk.bil.forhandlerboks."+counterText+"&ns_type=clickin&ns_action=view&ns__t="+new Date().getTime();
        var url=this.href;
        var ns_0=document.referrer;
        if(ns_0.lastIndexOf('/')==ns_0.length-1)
            ns_0=ns_0.substring(ns_0.lastIndexOf('/'),0);
        if (ns_0.length>0)
            ns_l+='&amp;ns_referrer='+escape(ns_0);
        var    target=(a&&a.target&&a.target!="")?(a.target.substring(0,1)=="_")?a.target.substring(1):a.target:"self";
        var ns_i=new Image();
        if(target&&url){
            if(window[target]){
                window.ns_softclick_timer=function(target,url) {
                    return function(){
                        ns_i.onload=ns_i.onerror=function(){
                            return;
                        };
                        window[((window[target])?target:"self")].location.href=url;
                    }
                } (target,url);
                window.setTimeout('ns_softclick_timer()',5000);ns_i.onload=ns_i.onerror=window.ns_softclick_timer;
            }else{
                window.open(url,target,"");
            }
        }
        ns_i.src=ns_l;
        return false;
    };
    return link;
};

SwapCars.prototype.fillCarImage = function(carContentImages, list) {
    //create car image object
    var img = document.createElement("img");
    //and a link ('a') to wrap the image
    var oid = list[this.itemNumber]["zett:objectid"];
    var linkImage = this.createLink("image.car");
    linkImage.href = this.detailBaseUrl + "?objectId="+oid;

    //contruct obscura URL and assign it to img.src
    try {
        var imageZett = list[this.itemNumber].enclosure.url;
        imageZett = imageZett.replace(/searchthumb/g, "orig");
        imageZett = imageZett.replace(/\//g, "%2f").replace(/:/, "%3a");
        img.src = this.obscuraUrl+ this.carImageSize + imageZett;
        img.onerror = function(evt){
            img.src = swapcars.resourceBaseUrl+swapcars.fallbackImg;
            img.onerror = null;
        };

        img.title = "Klikk for mer informasjon om bilen";
    } catch(err) {
        //console.log("error creating image "+err);
        img.src = swapcars.resourceBaseUrl+swapcars.fallbackImg;
    }

    //wrap image in link
    linkImage.appendChild(img);

    //and add link again to container
    carContentImages.appendChild(linkImage);

    //add price overlay to the image
    var carImagePrice = document.createElement("div");
    carImagePrice.className = "carImagePrice";
    carImagePrice.appendChild(document.createTextNode(this.formatNumber(list[this.itemNumber]["zett:price"]) + ",-"));
    carContentImages.appendChild(carImagePrice);
};

SwapCars.prototype.fillSellerImage = function(carContentLogo, list) {
    //create seller logo image object
    var img = document.createElement("img");
    //and a link ('a') to wrap the image
    //oid = encodeURIComponent(list[this.itemNumber]["zett:companyname"]);
    oid = list[this.itemNumber]["zett:companyname"].replace(/&/, '^');
    oid = encodeURIComponent(oid);
    var linkImage = this.createLink("image.company");
    linkImage.href = this.landingBaseUrl + "?forhandler="+oid;

    //contruct obscura URL and assign it to img.src
    try {
        var imageZett = list[this.itemNumber]["zett:companylogo"];
        imageZett = imageZett.replace(/prospectlogo/g, "orig");
        imageZett = imageZett.replace(/\//g, "%2f").replace(/:/, "%3a");
        img.src = this.obscuraUrl+ this.distImageSize +imageZett;
        img.title = "Klikk for flere biler fra forhandleren";
    } catch(err) {
    //console.log("error creating image "+err);
    }

    //wrap image in link
    linkImage.appendChild(img);

    //and add link again to container
    carContentLogo.appendChild(linkImage);
};


SwapCars.prototype.formatNumber = function(numberText) {
    numberText += '';
    //in case the number has decimals, split those away
    x = numberText.split(',');
    //store the value before comma as x1
    x1 = x[0];
    //and the comma value as x2 (so we can append it again later)
    x2 = x.length > 1 ? ',' + x[1] : '';

    //now create a regex matching all groups of numbers (as $1) followed by another group of 3 numbers ($2)
    var rgx = /(\d+)(\d{3})/;
    //as long as the regex matches,
    while (rgx.test(x1)) {
        //insert a dot ('.') between both groups
        x1 = x1.replace(rgx, '$1' + '.' + '$2');
    }

    //append comma value (x2) and return result
    return x1 + x2;
};

/*
* creates a link (<a> element) pointing to the cars detail page and wraps the given textnode with that link
* returns the newly created link node.
*/
SwapCars.prototype.wrapCarLink = function(textnode, list) {
    var oid = list[this.itemNumber]["zett:objectid"];
    var link = this.createLink("text.other");
    link.href = this.detailBaseUrl + "?objectId="+oid;
    link.appendChild(textnode);
    return link;
};

function fadeOut (obj, o) {
    setOpacity(obj, o);
    if (o > 0) {
        setTimeout(function() {
            fadeOut(obj, o-10)
        }, 30);
    } else {
        obj.className = "hiddenCarField";
        setOpacity(obj, 100);
    }
    
};

function setOpacity (obj, o) {
    obj.style.opacity = (o / 100);
    obj.style.MozOpacity = (o / 100);
    obj.style.KhtmlOpacity = (o / 100);
    obj.style.filter = 'alpha(opacity=' + o + ')';
};