//Misc Function
function DOMStyle (styleProp) {
	parseString = styleProp.split("-");
	styleProp = "";
	for (var i = 1 ; i < parseString.length ; i++) {
		parseString[i] = parseString[i].replace(parseString[i].charAt(0), parseString[i].charAt(0).toUpperCase());
	}
	for (var i = 0 ; i < parseString.length ; i++) {
		styleProp += parseString[i];
	}
	return styleProp;
}

function getStyle (element, styleProp) {
    if (element.currentStyle) {
		styleProp = DOMStyle(styleProp);
        var value = isNaN(parseInt(element.currentStyle[styleProp])) ? 0 : element.currentStyle[styleProp];
    }
    else {
        if (window.getComputedStyle) {
        	var value = document.defaultView.getComputedStyle(element,null).getPropertyValue(styleProp);
		}
    }
    return value;
}

function getStyleElementDimension (element) {
    var x = parseInt(getStyle(element, "width")) + parseInt(getStyle(element, "margin-right")) + parseInt(getStyle(element, "margin-left")) + parseInt(getStyle(element, "padding-right")) + parseInt(getStyle(element, "padding-left")) + parseInt(getStyle(element, "border-right-width")) + parseInt(getStyle(element, "border-left-width"));
    var y = parseInt(getStyle(element, "height")) + parseInt(getStyle(element, "margin-top")) + parseInt(getStyle(element, "margin-bottom")) + parseInt(getStyle(element, "padding-top")) + parseInt(getStyle(element, "padding-bottom")) + parseInt(getStyle(element, "border-top-width")) + parseInt(getStyle(element, "border-bottom-width"));
    return {width:x, height:y};
}

function getElementDimension (element) {
    var x = element.clientWidth + parseInt(getStyle(element, "margin-right")) + parseInt(getStyle(element, "margin-left")) + parseInt(getStyle(element, "border-right-width")) + parseInt(getStyle(element, "border-left-width"));
    var y = element.clientHeight + parseInt(getStyle(element, "margin-top")) + parseInt(getStyle(element, "margin-bottom")) + parseInt(getStyle(element, "border-top-width")) + parseInt(getStyle(element, "border-bottom-width"));
    return {width:x, height:y};
}

/**/
Slide = function (element) {
    this.timer = null;
    this.element = element;
    this.originalPos = 0;
    this.targetPos;
    this.speed = arguments[1].speed;
    this.onComplete = arguments[1].onComplete;
}
    //methods
    Slide.prototype.start = function (targetPos) {
        var self = this;
        this.targetPos = targetPos;
        //this.timer = setInterval(function () { self.sliding(); }, 1);
		self.sliding();
    }
    Slide.prototype.sliding = function () {
		var self = this;
        //this.originalPos = this.element.offsetLeft;
        //slide(this.element, this.originalPos, this.targetPos, this.speed, this.timer, this.onComplete);
		$(this.element).animate( { left: this.targetPos + "px" }, this.speed*25, "swing", function () {
			self.onComplete();
		})
    }
    
    //functions
//    function slide (obj, originalPos, targetPos, offset, timer, callback) {
//        var direction = (targetPos - originalPos)/Math.abs(targetPos - originalPos);
//        if (offset > Math.abs(targetPos - originalPos)) {
//            offset = Math.abs(targetPos - originalPos);
//        }
//        if (originalPos != targetPos) {
//            obj.style.left = obj.offsetLeft + direction*offset + "px";
//        }
//        else {
//            clearInterval(timer);
//            if (callback) {
//                callback();
//            }
//        }
//    }
    
Carousel = function () {
    //Default options buttonLeftID
    this.options = {
        clipping: arguments[1].clippingID ? document.getElementById(arguments[1].clippingID) : document.getElementById("clipping"),
        buttonprev: arguments[1].buttonLeftID ? document.getElementById(arguments[1].buttonLeftID) : document.getElementById("buttonleft"),
        buttonnext: arguments[1].buttonRightID ? document.getElementById(arguments[1].buttonRightID) : document.getElementById("buttonright"),
        offset: arguments[1].offset ? Math.round(arguments[1].offset) : 1,
        row: arguments[1].row ? Math.round(arguments[1].row) : 1,
        speed: arguments[1].row ? Math.round(arguments[1].speed) : 20,
		position: arguments[1].position ? true : false
    }
    var self = this;
    this.element = document.getElementById(arguments[0]);
	
    //Styling CLIPPING and UL Carousel
    this.options.clipping.style.overflow = "hidden"; //clipping area
    this.element.style.position = "absolute";
    this.element.style.top = "0px";
    this.element.style.left = "0px";
    //END OF STYLING
	
    this.items = this.element.getElementsByTagName("li");
    var elementDimension = 0;
    for (var i = 0 ; i < this.items.length ; i++) {
        if (i%this.options.row == 0) {
            elementDimension += getElementDimension(this.items[i]).width;
        }
    }
	
    //Remove margin for last items on the X side
    var rowItemsNumber = elementDimension/getElementDimension(this.items[0]).width;
    for (var i = 0 ; i < this.items.length ; i++) {
        if (i%rowItemsNumber == rowItemsNumber-1) {
           this.items[i].className += " LastColItems"; //**LastColItems is required
        }
    }
    //Remove margin for last items on the Y side
    var _YnormalItems = (elementDimension/getElementDimension(this.items[0]).width)*(this.options.row-1);
    for (var i = this.items.length-1 ; i >= _YnormalItems ; i--) {
        this.items[i].className += " LastRowItems"; //**LastRowItems is required
    }
	
	//Setup CLIPPING ZONE
	this.viewzone = {
		width: getStyleElementDimension(this.options.clipping).width,
		height: (this.options.row-1)*getElementDimension(this.items[0]).height + getElementDimension(this.items[this.items.length-1]).height
	}
	this.options.clipping.style.height = this.viewzone.height + "px";

    //Set the TRUE width for the container of carousel's elements : UL
    this.element.style.width = elementDimension - parseInt(getStyle(this.items[0], "margin-right")) + "px";
	
	//offset
    this.offset = 0; //total offset of number of items going to move out
	for (var i = 0 ; i < this.options.offset ; i++) {
		if (typeof(this.items[i]) != "undefined") {
        	this.offset += getElementDimension(this.items[i]).width;
		}
    }
    this.tail = this.element.clientWidth - this.viewzone.width;
	this.hasTail = false;

	/***********Begin Modify*************/
	this.pos = 0;
	if(this.options.position){
		this.active = 0;	
		
		for (i = 0; i < this.items.length; i++){						
			if($(this.items[i]).find('a').hasClass('Active')){
				this.active = i;
			}
		}
	
		if( (this.active + 1) >= this.options.offset ){					
			this.pos = - (Math.floor(this.active/this.options.offset)) * this.offset
		}	
		this.element.style.left = this.pos + 'px';
	}
	/***********End Modify*************/
		
    //add sliding effect to the Carousel
    this.scrollEffect = new Slide(this.element, {
                            speed: this.options.speed,
                            onComplete: function() {
                                self.start();
                            }
                        });
}
    //methods
    Carousel.prototype.start = function () {
        var self = this;
        //Set status
        var nextBtn = self.options.buttonnext;
        var prevBtn = self.options.buttonprev;
        //Next Button
        if (Math.abs(self.pos) < self.element.clientWidth - self.viewzone.width) {
            if ((/Disable/).test(nextBtn.parentNode.className)) {
                nextBtn.parentNode.className = nextBtn.parentNode.className.replace(/Disable/, "");
				if (/MSIE (5\.5|6\.)/.test(navigator.userAgent)) {
					nextBtn.style.filter = nextBtn.style.filter.replace("-inactive", "-active");
				}
            }
            nextBtn.onclick = function () {
                self.moveright();
                return false;
            }
			nextBtn.onmouseover= function () {    			
	            if (!(/Disable/).test(nextBtn.parentNode.className)) {
					if (/MSIE (5\.5|6\.)/.test(navigator.userAgent)) {
						nextBtn.style.filter = nextBtn.style.filter.replace("next-btn.png", "next-btn-hover.png");
					}
				}
				else {
					if (/MSIE (5\.5|6\.)/.test(navigator.userAgent)) {
						nextBtn.style.filter = nextBtn.style.filter.replace("next-btn-hover.png", "next-btn.png");
					}
				}
				
            }
			nextBtn.onmouseout= function () {
				if (!(/Disable/).test(nextBtn.parentNode.className)) {
					if (/MSIE (5\.5|6\.)/.test(navigator.userAgent)) {
						nextBtn.style.filter = nextBtn.style.filter.replace("next-btn-hover.png", "next-btn.png");
					}
				}
				else {
					if (/MSIE (5\.5|6\.)/.test(navigator.userAgent)) {
						nextBtn.style.filter = nextBtn.style.filter.replace("next-btn-hover.png", "next-btn.png");
					}
				}
            }
			
        }
        else {
            self.disable();
            if (!(/Disable/).test(nextBtn.parentNode.className)) {
                nextBtn.parentNode.className += " Disable";
				if (/MSIE (5\.5|6\.)/.test(navigator.userAgent)) {
					nextBtn.style.filter = nextBtn.style.filter.replace("-active", "-inactive");
				}
			}
        }
        //Previous Button
        if (Math.abs(self.pos) > 0) {
            if ((/Disable/).test(prevBtn.parentNode.className)) {
                prevBtn.parentNode.className = prevBtn.parentNode.className.replace(/Disable/, "");
				if (/MSIE (5\.5|6\.)/.test(navigator.userAgent)) {
					prevBtn.style.filter = prevBtn.style.filter.replace("-inactive", "-active");
				}
            }
            prevBtn.onclick = function () {
                self.moveleft();
                return false;
            }
			prevBtn.onmouseover= function () {                
				if (!(/Disable/).test(prevBtn.parentNode.className)) {
					if (/MSIE (5\.5|6\.)/.test(navigator.userAgent)) {
					prevBtn.style.filter = prevBtn.style.filter.replace("back-btn.png", "back-btn-hover.png");
					}
				}	
				else {
					if (/MSIE (5\.5|6\.)/.test(navigator.userAgent)) {
					prevBtn.style.filter = prevBtn.style.filter.replace("back-btn-hover.png", "back-btn.png");
					}
				}
				
            }
			prevBtn.onmouseout= function () {                
				if (!(/Disable/).test(prevBtn.parentNode.className)) {
					if (/MSIE (5\.5|6\.)/.test(navigator.userAgent)) {
					prevBtn.style.filter = prevBtn.style.filter.replace("back-btn-hover.png", "back-btn.png");
					}
				}
				else {
					if (/MSIE (5\.5|6\.)/.test(navigator.userAgent)) {
					prevBtn.style.filter = prevBtn.style.filter.replace("back-btn-hover.png", "back-btn.png");
					}
				}
            }
        }
        else {
            self.disable();
            if (!(/Disable/).test(prevBtn.parentNode.className)) {
                prevBtn.parentNode.className += " Disable";
				if (/MSIE (5\.5|6\.)/.test(navigator.userAgent)) {
					prevBtn.style.filter = prevBtn.style.filter.replace("-active", "-inactive");
				}
            }
        }
    }
        
    Carousel.prototype.moveleft = function () {
        var self = this;
        if (Math.abs(this.pos) > 0) {
            this.options.buttonnext.onclick = function () {
                self.disable();
            }
            this.options.buttonprev.onclick = function () {
                self.disable();
            }
            this.count -= this.options.offset;
            if (this.hasTail) {
                //this.pos += this.tail;
				this.pos += this.offset;
                this.scrollEffect.start(this.pos);
                this.hasTail = false;
            }
            else {
                this.pos += this.offset;
                this.scrollEffect.start(this.pos);
                this.tail += this.offset;
            }
        }
        else {
            return false;
        }
        return false;
    }
        
    Carousel.prototype.moveright = function () {
        var self = this;
        if (Math.abs(this.pos) < this.element.clientWidth - this.viewzone.width) {
            this.options.buttonnext.onclick = function () {
                self.disable();
            }
            this.options.buttonprev.onclick = function () {
                self.disable();
            }
            if (this.tail >= this.offset) {
                this.pos -= this.offset;
                this.scrollEffect.start(this.pos);
                this.tail -= this.offset;
                this.hasTail = false;
            }
            else {
                //this.pos -= this.tail;
				this.pos -= this.offset;
                this.scrollEffect.start(this.pos)
                this.hasTail = true;
            }
        }
        else {
            return false;
        }
        return false;
    }
	
    Carousel.prototype.disable = function () {
        return false;
    }