var categoryID = 999;
var colorID = 0;
var mySlider;
var priceMin = 0;
var priceMax = 50;
var admin = 0;
var details = -1;
var sort = null;
var provider = null;

var reload = true;

var isDetailsVisible = false;
var isShowContentLoader = false;

var gridFadingOutEffect = null;
var showDetailsFX = null;

var dataLoadingPostFunction = null;


window.addEvent('domready', function()
{
    readState();
    addSlider();

    dataLoadingPostFunction = function()
    {
        if (details > -1)
        {
            showDetails(details);
        }
    }

    reload = false;


});


function readState()
{
    var categoryIDFromURL = getParamValueFromURL("categoryID");
    var colorIDFromURL = getParamValueFromURL("colorID");
    var priceMinFromURL = getParamValueFromURL("priceMin");
    var priceMaxFromURL = getParamValueFromURL("priceMax");
    var adminFromURL = getParamValueFromURL("admin");
    var detailsFromURL = getParamValueFromURL("details");
    var sortFromURL = getParamValueFromURL("sort");
    var providerFromURL = getParamValueFromURL("provider");

    if (categoryIDFromURL != null)
    {
        categoryID = categoryIDFromURL;
    }
    if (colorIDFromURL != null)
    {
        colorID = colorIDFromURL;
    }

    if (priceMinFromURL != null)
    {
        priceMin = priceMinFromURL;
    }
    if (priceMaxFromURL != null)
    {
        priceMax = priceMaxFromURL;
    }
    if (adminFromURL != null)
    {
        admin = adminFromURL;
    }
    if (detailsFromURL != null)
    {
        details = detailsFromURL;
    }
    if (sortFromURL != null)
    {
        sort = sortFromURL;
    }
    if (providerFromURL != null)
    {
        provider = providerFromURL;
    }

    checkMainNavi();
    checkColors();


}

function checkColors()
{
    var elColorBox = $("color-box");
    if (elColorBox == null) return;
    elColorBox.getElements("div.name").set("class", "name")

    var elColor = $("color" + colorID);
    elColor.getElement("div.name").set("class", "name active")
}


function checkMainNavi()
{

    $$(".mainnavi").getElements("li").each(function(el)
    {
        el.set("class", "");
    });

    $("mainnavi_" + categoryID).set("class", "active");

}


function showFocusesFlower(focusOn, el)
{
    var pID = el.get('productID');


    var elImg = el.getElement('img');
    var width = elImg.get('width');
    var height = elImg.get('height');

    var pos = el.position();
    // alert(pos.top);


    /*
    var fx = new Fx.Elements(elImg,
    {
        duration: 350,
        onComplete: function()
        {
            if (focusOn)
            {

            }
            else
            {
                el.style.position = "relative";
            }
        }
    });
    */

    /*
    if (focusOn)
    {
        // el.setStyle({top:pos.top,left: pos.left});
        el.style.position = "absolute";
        fx.start({
            '0': {
                'width': [width * 1.5],
                'height':[height * 1.5]
            }
        });
    }
    else
    {
        fx.start({
            '0': {
                'width': [width],
                'height':[width]
            }
        });
    }
    */
}

function getParamValueFromURL(param)
{
    var url = document.location.hash;
    var parameters = url.substring(1);

    //alert(parameters);
    var regex = param + "=(\\d+)";
    var myregex = new RegExp(regex);
    var match = myregex.exec(parameters);
    if (match == null)
    {
        return null;
    }
    else
    {
        return RegExp.$1;
    }
}

function saveState(catID, cID, pMin, pMax, _details, _sort, _provider)
{
    if (catID == -1)
    {
        catID = categoryID;
    }

    if (cID == -1)
    {
        cID = colorID;
    }

    if (pMin == -1)
    {
        pMin = priceMin;

    }

    if (pMax == -1)
    {
        pMax = priceMax;
    }

    if (_details == -1)
    {
        _details = details;
    }
    if (_details == -2)
    {
        _details = -1;
    }
    if (_sort == null)
    {
        _sort = sort;
    }
     if (_provider == null)
    {
        _provider = provider;
    }

    categoryID = catID;
    colorID = cID;
    priceMin = pMin;
    priceMax = pMax;
    details = _details;
    sort = _sort;
    provider = _provider;

    var url = "#categoryID=" + catID + "&colorID=" + cID + "&priceMin=" + pMin + "&priceMax=" + pMax;
    if (admin > 0)
    {
        url += "&admin=" + admin;

    }
    if (details > -1)
    {
        url += "&details=" + details;

    }
    if (sort != null)
    {
        url += "&sort=" + sort;
    }

     if (provider != null)
    {
        url += "&provider=" + provider;
    }
    window.location.href = url;


}

function loadCategory(catID)
{
    saveState(catID, -1, -1, -1, -1, null,null);
    checkMainNavi();
    loadData();
}

function loadData()
{
    var priceMaxHack = priceMax;
    //alert("priceMax="+priceMax);
    if (priceMaxHack == 50)
    {
        priceMaxHack = 999;
        //hack f??r >50
    }
    //alert("priceMax="+priceMaxHack);
    var path = baseUrl + "loader.php";
    var req2 = new Request({
        method: 'get',
        url: path,
        data: {
            'cmd' : 'getFlowers',
            'categoryID' : categoryID,
            'colorID':colorID,
            'priceMin':priceMin,
            'priceMax':priceMaxHack,
            'sort':sort,
            'provider':provider
        },
        onRequest: function()
        {
            showContentLoader(true);
        },
        onComplete: function(response)
        {
            //  alert(response);
            showContentLoader(false);
            if (response == "")
            {
                $("product-grid-items").set('html', "keine Blumen gefunden");
            }
            else
            {
                $("product-grid-items").set('html', response);
            }
            //alert(dataLoadingPostFunction);
            dataLoadingPostFunction.call();


        }
    }).send();

    /*
    $('makeRequest').addEvent('click', function()
    {
        req.send();
    });
    */

}

function showContentLoader(show)
{
    isShowContentLoader = show;
    if (show)
    {
        $("contentloader").setStyle("opacity", "0.5");
        $("contentloader").setStyle("visibility", "visible");

        gridFadingOutEffect = new Fx.Elements($('product-grid-items'),
        {
            duration: 550,
            onComplete: function()
            {
                $("contentloader").setStyle("opacity", "1");
            }
        });

        gridFadingOutEffect.start({
            '0': {
                'opacity': [0]
            }
        });

    }
    else
    {
        if (gridFadingOutEffect != null)
        {
            gridFadingOutEffect.cancel();
        }
        $("contentloader").style.visibility = "hidden";
        $('product-grid-items').setStyle("opacity", "1");
        $('product-grid-items').setStyle("visibilty", "visible");
    }

}

function filterByColor(cID)
{
    saveState(0, cID, -1, -1, -1, null,null);
    checkMainNavi();
    checkColors();
    loadData();
}

function sortData()
{
    saveState(-1, -1, -1, -1, -1, $("sort").value,null);
    loadData();
}

function filterProvider()
{
    saveState(-1, -1, -1, -1, -1, null, $("provider").value);
    loadData();
}

function showDetails(id)
{
    var elItem = $("item" + id);
    if (elItem == null) return;

    saveState(-1, -1, -1, -1, id, null,null);


    isDetailsVisible = true;
    var elLoadingTable = $("loadingTable");
    var elDetails = $("details");


    showOverlay(false, null);

    var pos = elItem.getPosition();
    var coords = elItem.getCoordinates();


    if (showDetailsFX != null)
    {
        showDetailsFX.cancel();
    }
    showDetailsFX = new Fx.Elements($('details'),
    {
        duration: 550,
        onComplete: function()
        {

        }
    });


    var path = "loader.php?cmd=details";
    var req = new Request({
        method: 'get',
        url: path,
        evalResponse: false,
        evalScripts: true,
        data: { 'productID' : id,'admin':admin},
        onRequest: function()
        {
            var firstItem = $("product-grid").getElement("div.item");
            var firstItemPos = firstItem.getPosition();

            var detailsX = firstItemPos.x + 7;
            var detailsY = coords.bottom - 6;

            elDetails.position({
                x: detailsX,
                y: detailsY
            });


            var bodyHeight = $$("body")[0].getSize().y;

            var detailsBottom = detailsY + elDetails.getSize().y;


            var yDiff = detailsBottom - bodyHeight;
            if (yDiff > 0)
            {
                window.scroll(0, yDiff);
            }


            elDetails.setStyle("visibility", "visible");
            elDetails.setStyle("opacity", "0");

            elDetails.set('html', elLoadingTable.get("html"));


            showDetailsFX.start({
                '0': {
                    'opacity': [1]
                }
            });
        },
        onComplete: function(response)
        {
            $("details").set('html', response);
            elDetails.setStyle("opacity", "1");
        }
    }).send();


}

function closeDetails()
{
    isDetailsVisible = false;

    var modalBGFx = new Fx.Morph($('details'),
    {
        duration: 350,
        transition: Fx.Transitions.Sine.easeOut,
        onComplete: function()
        {
            //$("modalBG").style.visibility = "hidden";
            saveState(-1, -1, -1, -1, -2, null,null);
        }
    });

    // $("details").set("html","");
    modalBGFx.start({
        'opacity': [0]
        //    'width': [0],
        //  'height': [0]
    });


}


function addSlider()
{
    mySlider = new Slider($('slider_minmax_gutter_m'), $('slider_minmax_minKnobA'), $('slider_bkg_img'), {
        start: 0,
        end: 50,
        offset:8,
        snap:false,
        numsteps:10,
    //knobheight: 40,
        onChange: function(pos)
        {
            $('slider_minmax_min').set("html", pos.minpos + " €");

            var maxp = pos.maxpos;
            if (maxp == 50)
            {
                maxp = ">50";
            }
            $('slider_minmax_max').set("html", maxp + " €");

            var minX = $('slider_minmax_minKnobA').getPosition($('slider_minmax_minKnobA').getParent()).x + 20;
            var maxX = $('slider_minmax_maxKnobA').getPosition($('slider_minmax_maxKnobA').getParent()).x + 20;

            $('slider_minmax_min').setStyle("left", minX + "px");
            $('slider_minmax_max').setStyle("left", maxX + "px");
            //$('slider_minmax_maxKnobA').setStyle("top", "-20px");

            if (!reload)
            {
                priceMin = pos.minpos;
                priceMax = pos.maxpos;
            }

            // alert(priceMax);
        },
        onComplete: function()
        {
            filterByPrice(priceMin, priceMax);

        }
    }
            , $('slider_minmax_maxKnobA')).setMin(parseInt(priceMin)).setMax(parseInt(priceMax));
}


function getPriceMin()
{
    return priceMin;
}

function getPriceMax()
{
    return priceMax;
}

function filterByPrice(pMin, pMax)
{
    saveState(-1, -1, pMin, pMax, -1, null,null);
    loadData();
}

function showOverlay(visible, item)
{
    if (visible && isDetailsVisible) return;

    /*
    if (!e) var e = window.event;
    var relTarg = e.relatedTarget || e.fromElement;
    alert(relTarg);
    */


    var el = $("overlay");
    if (visible)
    {
        var pID = $(item).get('productID');

        el.removeEvents('click');
        el.addEvent('click', function(event)
        {
            showOverlay(false, item);
            showDetails(pID);
        });


        var itemName = $(item).getElement(".name").get("html");
        el.getElement(".name").set("html", itemName);

        var itemProvider = $(item).getElement(".provider").get("html");
        el.getElement(".provider").set("html", itemProvider);


        var pos = item.getPosition();

        var y = pos.y - 53;
        var x = pos.x - 29;

        el.setStyle("left", x + "px");
        el.setStyle("top", y + "px");
        el.setStyle("visibility", "visible");
        // el.setStyle("opacity", "0");

        /*
        var fx = new Fx.Elements(el,
        {
            duration: 550,
            onComplete: function()
            {
               // el.setStyle("visibility", "hidden");
            }
        });
        fx.start({
            '0': {
                'opacity': [1]
            }
        });
        */
    }
    else
    {

        el.setStyle("visibility", "hidden");
        /*
        var fx = new Fx.Elements(el,
        {
            duration: 550,
            onComplete: function()
            {
                el.setStyle("visibility", "hidden");
            }
        });

        fx.start({
            '0': {
                'opacity': [0]
            }
        });
        */


    }
}