var $jq = jQuery.noConflict();

// window.load gaat pas af als ook de images ingeladen zijn, dan kan onderstaande pas worden uitgevoerd
$jq(window).load(function() {

});

// document.ready gaat af als de elementen zijn ingeladen, niet de images dus.
$jq(document).ready(function() {

 
    $jq(".box").hover(function() {
        if ($jq(this).find(".teaser").length != 0) {
            $jq(this).find("h3").css({ 'position': 'absolute', 'top': '-80px', 'width': '167px' });
            $jq(this).css({ 'padding-top': '21px' });
            $jq(this).find(".teaser").show();
        }
    },
  function() {
      $jq(".box select").mouseleave(function(event) { event.stopPropagation(); });
      $jq(this).find(".teaser").hide();
      $jq(this).find("h3").css({ 'position': 'static', 'top': '0' });
      $jq(this).css({ 'padding-top': '0px' });
  });

    /* alleen op pagina's waar de snelzoeker staat dit uitvoeren*/
    if ($jq("#snelzoeken").attr("id") == "snelzoeken") {

        /* inladen van merken en modellen als er een snelzoeker is.*/
        $jq.ajax({
            type: "POST",
            url: chAppCall,
            dataType: "text",
            data: {
                appactie: "occssearch",
                functietype: chFunctietype,
                gropcd: chGropcd
            },
            success: function(response) {

                // Convert text to XML DOM
                var response = fuTextToXml(response);

                $jq("#merk option").attr("value", "").text(chSelectboxDefault);
                $jq(response).find("MERK").each(function() {
                    var merk = $jq(this);
                    $jq("#merk").append($jq("<option></option>").attr("value", merk.attr("merkcd")).text(merk.attr("merkom")));
                });
            },
            error: function(requestobject, errortype, exeptionobject) {
                fuAjaxError(requestobject, this);
            }
        });
        $jq.ajax({
            type: "POST",
            url: chAppCall,
            dataType: "text",
            data: {
                appactie: "occsrandom",
                aantal: "2",
                foto: true,
                gropcd: chGropcd
            },
            success: function(response) {

                // Convert text to XML DOM
                var response = fuTextToXml(response);
                var arRandomFoto = [];
                var arRandomOmschrijving = [];
                var arRandomOccsno = [];
                var arRandomPrijs = [];

                // arrays vullen met retourwaarden
                $jq(response).find("OCCS-R").each(function(i) {
                    // foto
                    var werkfoto = "";
                    werkfoto = $jq("FOTOLOCATIE", this).text() + $jq("FOTONAAM", this).text();
                    werkfoto = werkfoto.substring(0, werkfoto.length - 4) + "_tile2.jpg"
                    arRandomFoto[i] = chFotoWebsite + werkfoto;

                    // omschrijving
                    arRandomOmschrijving[i] = $jq("OMS", this).text();

                    // occsno
                    arRandomOccsno[i] = $jq("OCCSNO", this).text();

                    //prijs
                    arRandomPrijs[i] = "&#128; " + fuFormatDuizendtallen($jq("OCCSPRVK", this).text()) + ",-";

                });



                $jq("#occsbox1 h3").html("Occasions");
                $jq("#occsbox1 #occsbox1link").attr("title", arRandomOmschrijving[0]);
                $jq("#occsbox1 img").hide(); // verbergen van foto, soms front end resize nodig... verderop in timeout
                $jq("#occsbox1 img").attr("src", arRandomFoto[0]);
                $jq("#occsbox1 p span.left").html(arRandomOmschrijving[0] + " - " + arRandomPrijs[0]);

                $jq("#occsbox2 h3").html("Occasions");
                $jq("#occsbox2 #occsbox2link").attr("title", arRandomOmschrijving[0]);
                $jq("#occsbox2 img").hide(); // verbergen van foto, soms front end resize nodig... verderop in timeout
                $jq("#occsbox2 img").attr("src", arRandomFoto[1]);
                $jq("#occsbox2 p span.left").html(arRandomOmschrijving[1] + " - " + arRandomPrijs[1]);


                // verkleinen foto's als ze te breed zijn
                setTimeout(function() {
                    width1 = $jq("#occsbox1 div.occfoto img").width();
                    width1 = parseInt(width1);

                    if (width1 > 177) {
                        $jq("#occsbox1 div.occfoto img")
                            .css({ 'width': '177px', 'height': $jq("#occsbox1 div.occfoto img").height() })
                    }
                    $jq("#occsbox1 div.occfoto img").fadeIn("fast");
                }, 1000)
                setTimeout(function() {
                    width2 = $jq("#occsbox2 div.occfoto img").width();
                    width2 = parseInt(width2);

                    if (width2 > 177) {
                        $jq("#occsbox2 div.occfoto img").css("width", "177px");
                    }
                    $jq("#occsbox2 div.occfoto img").fadeIn("fast");
                }, 1000)


            },
            error: function(requestobject, errortype, exeptionobject) {
                fuAjaxError(requestobject, this);
            }
        });

        $jq("#merk").bind("change", function(e, data) {

            $jq.ajax({
                type: "POST",
                url: chAppCall,
                dataType: "xml",
                data: {
                    appactie: "getmodel",
                    functietype: chFunctietype,
                    gropcd: chGropcd,
                    merkcd: $jq(this).val()
                },
                success: function(response) {

                    $jq("#model option").remove();
                    $jq("#model").append($jq("<option></option>").attr("value", "").text("-- Uw keuze --"));
                    $jq(response).find("MODL").each(function() {
                        var model = $jq(this);
                        $jq("#model").append($jq("<option></option>").attr("value", model.attr("modlcd")).text(model.attr("modlom")));
                    });
                },
                error: function(requestobject, errortype, exeptionobject) {
                    fuAjaxError(requestobject, this); ;
                }
            });
        });

        // change merk, modellen inladen

        // klikafhandeling van snelzoekknop
        $jq("#snelzoeken").click(function() {

            location.href = "/Occasions.aspx?merk=" + $jq("#merk").val() + "&model=" + $jq("#model").val();
            return false;

        });

    }

});