/*jslint white: false, onevar: true, undef: true, nomen: true, eqeqeq: true, plusplus: true, bitwise: true, regexp: false, strict: true, newcap: true, immed: true */
/*global $, jQuery, crashcycles */
"use strict";

var cc = {};

cc.scrollTo = function(label,duration) {
    if (!label.size()) {
        return;
    }
    if (!duration) {
        duration = 1000;
    }
    //
    $('html, body').animate({
        scrollTop: label.offset().top
    }, duration);
};

cc.init = function() {
   
    // Navigation
    $('.navi li a:not(.impressum), .crashlogo').click(function(e){
        e.preventDefault();
        cc.scrollTo($($(this).attr('href')));
    });

    // Slideboxes
    $('#coda-slider-contact').codaSlider({firstPanelToLoad:1,crossLinking:false});

    // Contactform links
    var contactPrev, contactNext;
    contactPrev = $('.contactBox .coda-nav .tab1 a');
    contactNext = $('#coda-slider-contact').parent().find('.coda-nav-right a');

    contactPrev.click(function(e){
        $(this).hide();
        contactNext.show();
    }).hide();
    contactNext.click(function(e){
        $(this).hide();
        contactPrev.show();
    });

    // open kontakt form if not shown..
    $('.contactFormLink').click(function(e){
        e.preventDefault();
        if (contactNext.is(':visible')) {
            contactNext.click();
        }
        cc.scrollTo($('#contact'),300);
    });

    // show always first frame when clicking on navi
    $('.navi li a.contact').click(function(e){
        if (!contactNext.is(':visible')) {
            contactPrev.click();
        }
    });

    $(window).resize(cc.checkWindowSize);

    // call it once on load..
    cc.checkWindowSize();
}

cc.checkWindowSize = function() {
    if ($(window).width()<1120) {
        $('body').addClass('mobile');
    } else {
        $('body').removeClass('mobile');
    }
}

// Init...
$().ready(cc.init);


cc.initBikefinder = function() {

    // vars
    var finderFrame, finderPicContainer, finderTitle, finderDescription, finderConfigTitle, finderConfigTable, finderName, finderThumbnails, finderBrands, finderTags, selectedTags, selectedBrands, autoLoadBike;
    // methods
    var loadBikeInfo, loadBikeThumbs, defineJSClickHandler, updateLinks, updateThumbnails;

    finderFrame = $('#bikefinderFrame');
    if (!finderFrame.size()) {
        return;
    }

    autoLoadBike = true;
    selectedTags = {all:true};
    selectedBrands = {all:true};

    finderPicContainer = finderFrame.find('#bikefinderPicContainer');
    finderTitle = finderFrame.find('#bikefinderTitle');
    finderName = finderFrame.find('#bikefinderName');
    finderDescription = finderFrame.find('#bikefinderDescription');
    finderConfigTitle = finderFrame.find('#bikefinderConfigTitle');
    finderConfigTable = finderFrame.find('#bikefinderConfigTable');
    finderThumbnails = finderFrame.find('#bikefinderThumbnails');
    finderBrands = finderFrame.find('#bikefinderBrands');

    finderTags = finderFrame.find('#bikefinderTags');

    defineJSClickHandler = function(e) {
        e.preventDefault();
        loadBikeThumbs($(this));
    }
    finderBrands.find('a').click(defineJSClickHandler);
    finderTags.find('a').click(defineJSClickHandler);
    finderThumbnails.find('a').click(function(e){
        e.preventDefault();
        loadBikeInfo($(this).attr('rel'), $(this));
    });

    // BIKEFINDER GLücksrad
    $('.bikefinderLink').click(function(e){
        e.preventDefault();
        autoLoadBike = false;

        finderTags.find('a').each(function(e){
            if (!$(this).hasClass('catgrouplink')) {
                if (parseInt(Math.random()*3)==0) {
                    $(this).click();
                }
            }
        });
        finderBrands.find('a').each(function(e){
            if (!$(this).hasClass('all')) {
                if (parseInt(Math.random()*3)==0) {
                    $(this).click();
                }
            }
        });

        autoLoadBike = true;
        loadBikeThumbs(null);
    });


    // HOWTO OVERLAY
    finderFrame
        .append('<img src="./images/bikefinder_start.png" id="bfstartoverlay" alt="Select your bike!">')
        .one('click',function(e){
            $('#bfstartoverlay').remove();
        });

    // link click handler
    loadBikeThumbs = function(refer) {

        var tags = '', brands = '', uri;

        if (refer) {
            updateLinks(refer.attr('id'), refer);
        }

        if (!autoLoadBike) {
            return;
        }

        for (var key in selectedBrands) {
            key = key!='all' ? key.substr(6) : key;
            brands += ','+key;
        }
        for (var key in selectedTags) {
            key = key!='all' ? key.substr(4) : key;
            tags += ','+key;
        }

        // if for some reason there is no tag or no brand selected don't send a new request..
        if (!tags.substr(1) || !brands.substr(1)) {
            updateThumbnails({thumbs:{}});
            return;
        }

        // build json uri..
        uri = './bikes/'+tags.substr(1)+'/'+brands.substr(1)+'.json'

        $.getJSON(uri, updateThumbnails);
    }


    updateThumbnails = function(data) {

        var thumbs, lnk, num, newWidth;

        thumbs = $('<div></div>');
        num = 0;
        $.each(data.thumbs, function(key, val) {
            num += 1;
            lnk = $('<a href="#"><img src="./uploads/bikes/thumbs/'+val.thumb+'" alt="'+val.name+'"/></a>').click(function(e){
                e.preventDefault();
                loadBikeInfo('bike/'+val.id+'.json');
            });
            thumbs.append(lnk);
        });

        // bike counter
        $('.bikefinder_choice small').text('('+(num)+' Bike'+(num!=1?'s':'')+')');

        newWidth = ((150+22)*num)-22;
        finderThumbnails.attr('style', 'width:'+newWidth+'px');
        finderThumbnails.html(thumbs.children());
        finderThumbnails.find('a:last-child').addClass('last');

        $('.scrollingHotSpotLeft').hide();
        $('.scrollingHotSpotRight').hide();

        if (num>5){
            $("#thumbScroller").smoothDivScroll("recalculateScrollableArea").find('.scrollingHotSpotRight').show();
        }

        // show details of first thumb..
        if (finderThumbnails.find('a').size()) {
            finderThumbnails.find('a:first-child').click();
        }
        else {
            finderPicContainer.cycle('destroy').attr('style','').html('<img src="./images/bikefinder_nomau.png" alt="Probiers nomau!">');
            finderTitle.text('');
            finderName.text('Kes Bike gfungä');
            finderDescription.text('');
            finderConfigTitle.text('');
            finderConfigTable.text('');
        }
    }

    updateLinks = function(refid, refer) {
        
        if (refer.text()=='Alle anzeigen') {
            refer.text('Alle ausblenden');
        }
        else if (refer.text()=='Alle ausblenden') {
            refer.text('Alle anzeigen');
        }

        /********************
         * Tag clicked
         *********************/
        if (refid.indexOf('tag')!==-1) {

            var taggrp, allSelected;
            
            taggrp = refid.substr(4).split(',');

            // tag group link clicked..
            if (taggrp.length>1) {

                // if all was selected..
                allSelected = selectedTags['all']
                if (allSelected) {
                    selectedTags = {};
                }

                // hide all
                if (refer.text()=='Alle anzeigen') {

                    finderTags.find('a').each(function(e){
                        // link is one of the tag group
                        if (jQuery.inArray($(this).attr('id').substr(4), taggrp) !== -1) {
                            delete selectedTags[$(this).attr('id')];
                            $(this).removeClass('selected');
                        }
                    });

                }

                // show all
                if (refer.text()=='Alle ausblenden') {
                    
                    finderTags.find('a').each(function(e){
                        // link is one of the tag group
                        if (jQuery.inArray($(this).attr('id').substr(4), taggrp) !== -1) {
                            selectedTags[$(this).attr('id')] = true;
                            $(this).addClass('selected');
                        } else {
                            // if all was selected hide others..
                            if (allSelected) {
                                $(this).removeClass('selected');
                            }
                        }
                    });
                }
                
                return;

            }

            // all was selected.. deselect all except referer
            if (selectedTags['all']) {
                finderTags.find('a').each(function(e){
                    selectedTags = {};
                    selectedTags[refid] = true;
                    if ($(this).attr('id') !== refid) {
                        $(this).removeClass('selected');
                    }
                });
                return;
            }

            // current element was already selected..
            if (selectedTags[refid]) {
                // deselect..
                refer.removeClass('selected');
                delete selectedTags[refid];
                // check if its the last one.. if true select all..
                /*if (jQuery.isEmptyObject(selectedTags)) {
                    selectedTags = {all:true};
                    finderTags.find('a').each(function(e){
                        $(this).addClass('selected')
                    });
                }*/

            } else {
                // add..
                refer.addClass('selected');
                selectedTags[refid] = true;
            }
        }

        /********************
         * Brand clicked
         *********************/
         if (refid.indexOf('brand')!==-1) {
            // clicked on all link..
            if (refid == 'brand-all') {


                // hide all
                if (refer.text()=='Alle anzeigen') {

                    selectedBrands = {};
                    finderBrands.find('a').each(function(e){
                        $(this).removeClass('selected')
                    });
                }

                // show all
                if (refer.text()=='Alle ausblenden') {

                    selectedBrands = {all:true};
                    finderBrands.find('a').each(function(e){
                        $(this).addClass('selected')
                    });
                }

                return;
            }

            // all was selected.. deselect all except referer
            if (selectedBrands['all']) {
                finderBrands.find('a').each(function(e){
                    selectedBrands = {};
                    selectedBrands[refid] = true;
                    if ($(this).attr('id') !== refid) {
                        $(this).removeClass('selected');
                    }
                });
                return;
            }

            // current element was already selected..
            if (selectedBrands[refid]) {
                // deselect..
                refer.removeClass('selected');
                delete selectedBrands[refid];
                // check if its the last one.. if true select all..
                /*if (jQuery.isEmptyObject(selectedBrands)) {
                    selectedBrands = {all:true};
                    finderBrands.find('a').each(function(e){
                        $(this).addClass('selected')
                    });
                }*/

            } else {
                // add..
                refer.addClass('selected');
                selectedBrands[refid] = true;
            }
        }
    }

    // click on thumbnail
    loadBikeInfo = function(uri, refer) {

        $.getJSON(uri, function(data) {

            finderTitle.html(data.title?'"'+data.title+'"':'');
            finderName.html(data.name);
            finderDescription.html(data.description);

            // preise & konfiguration..
            var cnum = 0;
            var config = $('<table></table>');
            $.each(data.config, function(key, val) {
                if (key && val) {
                    cnum += 1;
                    config.append('<tr><td class="left">'+key+'</td><td class="right">'+val+'</td></tr>');
                }
            });

            if(data.manufacturer.val) {
                var link = data.manufacturer.val;
                if (data.manufacturer.url) {
                    link = '<a href="'+data.manufacturer.url+'" target="_blank">'+data.manufacturer.val+'</a>'
                }
                config.append('<tr><td class="left">'+data.manufacturer.title+'</td><td class="right">'+link+'</td></tr>');
            }

            var ct = cnum>1 ? 'Preise &amp; Konfiguration' : 'Preis';

            finderConfigTitle.html('<h5>'+ct+'</h5>');
            finderConfigTable.html(config.children());

            var pics = $('<div></div>');
            $.each(data.pics, function(key, val) {
                if(val) {
                    pics.append('<img src="./uploads/bikes/'+val+'" '+(parseInt(key) ?'style="display:none"':'')+' alt=""/>');
                }
            });

            finderPicContainer.cycle('destroy').attr('style','').html(pics.children());

			// fix some height bugs..
			setTimeout(function(){
				finderPicContainer.cycle({
	                fx: 'fade',
	                speed: 1000,
	                timeout: 3000,
	                after: function() {
	                  finderPicContainer.animate({height:(this.height+15)});
	                }
	            });
			},1000);
            
        });
    }
}