$(document).ready(function() {

    var basketBox = new BasketBox();
    basketBox.initialize();
    basketBox.maker();

    // provide some functions from basketBox for global space
    BasketBoxCaller.refreshBasket = function(basketBoxHtml) {
        if (basketBox.init) {

            var options = {};
            if (basketBox.made) {
                options.basketOpen = basketBox.basketOpen;
                basketBox.disabled = true;
                basketBox.eBasketBox.remove();
            }

            var element = $(basketBoxHtml);
            basketBox.eBasketArea.append(element);
            basketBox.maker(options);

            if (basketBox.made) {
                var fakeEvent = {
                    'data': {
                        'scope': basketBox,
                        'before': function() {
                            if (basketBox.eBasketBoxScrollBar.length) {
                                basketBox.eBasketBoxScrollBar.scrollDown();
                            }
                        },
                        'after': function() {
                            basketBox.timer = setTimeout('BasketBoxCaller.hideBasket()', 1500);
                        }
                    }
                };
                basketBox.showBasket(fakeEvent);
            } else {
                element.remove();
            }

        }
    }
    
    BasketBoxCaller.showBasket = function() {
        basketBox.showBasket();
    }

    BasketBoxCaller.hideBasket = function() {
        basketBox.hideBasket();
    }

});

var BasketBoxCaller = {};

var BasketBox = function() {
    
    this.initialize = function() {

        this.init = false;
        this.eBasketArea = $('#basketArea');
        this.eBasketButton = $('#basketEnv');

        if (this.eBasketArea.length && this.eBasketButton.length) {
            // attach events
            this.eBasketArea.bind('mouseenter', {scope: this}, this.showBasket);
            this.eBasketArea.bind('mouseleave', {scope: this}, this.hideBasket);

            this.init = true;
        }
    }
    
    this.maker = function(options) {

        this.made = false;
        this.eBasketBox = $('#basketBox');
        this.eBasketBoxWrapper = $('#basketBox_wrapper');

        var settings = options || {};

        if (this.init && this.eBasketBox.length && this.eBasketBoxWrapper.length) {

            // init basket status (visible/hidden)
            this.basketOpen = settings.basketOpen || false;

            // init variable for storing basket timeout
            this.timer = null;

            // init basket scroll bar
            this.eBasketBoxScrollBar = this.eBasketBox.find('div.basketBoxScrollContent.scrollable');
            if (this.eBasketBoxScrollBar.length) {
                this.eBasketBoxScrollBar.tinyscrollbar();
            }

            // init basket wrapper
            this.basketBoxWrapperOffset = this.eBasketBoxWrapper.height();

            // init basket position
            if (this.basketOpen === false) {
                this.eBasketBoxWrapper.css('top', (-1)*this.basketBoxWrapperOffset);
                this.eBasketBox.css('height', 0);
            } else {
                this.eBasketBoxWrapper.css('top', 0);
                this.eBasketBox.css('height', this.basketBoxWrapperOffset);
            }
            this.eBasketBox.css('visibility', 'visible');

            // attach events
            this.eBasketBox.find('div.productBox_wrapper').bind({
                mouseenter: function() {
                    var view_part = $(this).find('div.view_productBox_part');
                    var change_part = $(this).find('div.change_productBox_part');
                    if (view_part && change_part) {
                        view_part.css('display', 'none');
                        change_part.css('display', 'block');
                    }
                },
                mouseleave: function() {
                    var view_part = $(this).find('div.view_productBox_part');
                    var change_part = $(this).find('div.change_productBox_part');
                    if (view_part && change_part) {
                        view_part.css('display', 'block');
                        change_part.css('display', 'none');
                    }
                }
            });

            this.disabled = false;
            this.made = true;
            
        }
    }

    this.showBasket = function(e) {
        var scope = (e && e.data && e.data.scope) ? e.data.scope : this;
        var before = (e && e.data && e.data.before && $.isFunction(e.data.before)) ? e.data.before : function() {};
        var after = (e && e.data && e.data.after && $.isFunction(e.data.after)) ? e.data.after : function() {};

        if (scope.init && scope.made && !scope.disabled) {

            if (scope.timer !== null) {
                clearTimeout(scope.timer);
            }

            scope.eBasketButton.attr('class', 'BasketHovered');

            if (!scope.basketOpen) {
                before();
                scope.basketOpen = true;
                scope.eBasketBoxWrapper.animate({top: 0}, {
                    duration: 'slow',
                    queue: false,
                    step: function(currentTop) {
                        scope.eBasketBox.css('height', scope.basketBoxWrapperOffset + currentTop);
                    },
                    complete: after
                });
            }
        }
        
        var specialTrim = new SpecialTrimForBasket();
        specialTrim.run({ rootElementId:'basketBox_wrapper', widthByClass:'product_details', txtClass:'product_name'});
    }

    this.hideBasket = function(e) {
        var scope = (e && e.data && e.data.scope) ? e.data.scope : this;
        var before = (e && e.data && e.data.before && $.isFunction(e.data.before)) ? e.data.before : function() {};
        var after = (e && e.data && e.data.after && $.isFunction(e.data.after)) ? e.data.after : function() {};

        if (scope.init && scope.made && !scope.disabled) {

            if (scope.timer !== null) {
                clearTimeout(scope.timer);
            }

            scope.eBasketButton.attr('class', 'BasketNotEmpty');

            if (scope.basketOpen) {
                before();
                scope.basketOpen = false;
                scope.eBasketBoxWrapper.animate({top: (-1)*scope.basketBoxWrapperOffset}, {
                    duration: 'slow',
                    queue: false,
                    step: function(currentTop) {
                        scope.eBasketBox.css('height', scope.basketBoxWrapperOffset + currentTop);
                    },
                    complete: after
                });
            }
        }
    }

}

//-----------------------------------------------------------------------------
// JQ version SpecialTrim
// for fixed width 150
//-----------------------------------------------------------------------------
/*
	$('#basketBox_wrapper .TC01').each( function(index) {
		 tmpTxt = $(this).text();
	     while( $(this).width() > 150){
				tmpTxt = tmpTxt.substring(0, tmpTxt.length-1);
				$(this).text(tmpTxt + "...");
	     }
	});
*/

var SpecialTrimForBasket = function(){
	
	//-----------------------------------------------------------------------------
	// get elements by class name 
	//-----------------------------------------------------------------------------
	this.getElementsByClassName = function(classCss, sc){
	    //Init
	    var elements, i, results = [], curClass;  

	    //Default scope is document
	    sc = sc || document;

	    //Get all children of the scope node
	    elements = sc.getElementsByTagName('*');
	    for( i=0; i < elements.length; i++ ){
	        curClass = elements[i].className;
	        if(curClass != null){
	            curClass = curClass.split(" ");
	            for( j=0; j < curClass.length; j++){
	                if(curClass[j] === classCss){
	                    results.push( elements[i] );
	                    break;
	                }
	            }
	        }
	    }

	    return results;
	};
	
	//-----------------------------------------------------------------------------
	// trim texts to width txtWidthInPx
	//-----------------------------------------------------------------------------
	this.trimTextsToWidth = function( elNameRoot, classTxt, txtWidthInPx){
		var allElWithClass = this.getElementsByClassName(classTxt, document.getElementById(elNameRoot));
		for (var i = 0; i < allElWithClass.length; i++) {
			this.trimSpanTextToWidthPx( allElWithClass[i], txtWidthInPx);
		}
	};

	//-----------------------------------------------------------------------------
	// trim text to width txtWidthInPx
	//-----------------------------------------------------------------------------
	this.trimSpanTextToWidthPx = function( el, widthPx){
		var tmpTxt  = ""; 
		if( el){
			tmpTxt = el.innerHTML;
			if( el.offsetWidth){
				while( el.offsetWidth > widthPx){
					tmpTxt = tmpTxt.substring(0, tmpTxt.length-1);
					el.innerHTML = tmpTxt + "...";
				}
			}
		}
	};
	
	//-----------------------------------------------------------------------------
	// obj.rootElementId	... root element for update elements with class txtClass
	// obj.widthByClass		... set width by first element in rootElement with class widthByClass
	// obj.txtClass			... update all span innerHtml in rootElement with class txtClass
	//-----------------------------------------------------------------------------
	this.run = function( obj){
		
		if( !obj.rootElementId	) return;
		if( !obj.widthByClass	) return;
		if( !obj.txtClass		) return;
		
		//... get width for txt
		var elementsForWidth = this.getElementsByClassName( obj.widthByClass, document.getElementById(obj.rootElementId));
		if( !elementsForWidth){
			return;
		}
		
		var txtWidthInPx = elementsForWidth[0].clientWidth;

		//... trim texts
		this.trimTextsToWidth( obj.rootElementId, obj.txtClass, txtWidthInPx-3);
	};
	
};