// DynaScroll
var currentItem = "";
var delimiter = 0;
function DynaScroll(id)
{
    this.items = new DynaScrollItems();
    this.id = id;
    this.leftButtonImage = "";
    this.rightButtonImage = "";
    this.disabledLeftButtonImage = "";
    this.disabledRightButtonImage = "";
    this.delimiterImage = "";
    this.scrollDirection = "None";
    this.actionEvent = "MouseClick";
    this.scrollSpeed = 5;
    this.scrollTimeOut = 8;
    this.fixedHeight = 80;
    this.fixedWidth = 440;
    this.scrollerWidth = 36;
    this.scrollerHeight = 80;
    this.delimiterWidth = 3;
    this.cssClass = "";
    this.cssItemClass = "scrollItem";
    this.cssScrollClass = "";
    this.drawScrollers = true;
    this.useHints = false;
    this.hintBlockColor = "white";
    this.hintPadding = "0px";
    
    this.isScrolling = false;
    this.selectedItem = 0;
    
    this.Select = null;
    
    this.target = null;
    this.scrollState = 1;
    
    this.leftX = 0;
    this.rightX = 0;
    this.stack = new Array();
}

DynaScroll.prototype.AttachTo = function(id)    
{
    delimiter = (Prototype.Browser.IE) ? 3 : -3;
        
    var _div = $(id);
    _div.className = this.cssClass;
    _div.setStyle({ padding: "0px", overflow: "hidden" });
    attachEcmaClass(_div, this);
    var parentEl = $c("div" , this.id + "_div", _div);
    parentEl.className = this.cssClass;
    parentEl.setStyle({ padding: "0px", margin: "0px", overflow: "hidden", position: "absolute" });
    var coords = _div.cumulativeOffset();
    parentEl.setStyle({ left: coords.left + "px", height: _div.getHeight() + "px", width: _div.getWidth() + "px" });
    
    if (Prototype.Browser.IE)
        parentEl.setStyle({ height: this.fixedHeight, width: this.fixedWidth });
    
    attachEcmaClass(parentEl, this);
    
    var el = null;
    var tableEl = null;
    var cellEl = null;
    var imgEl = null;
    var delim = null;
    var maxHeight = 0;
    var dx = 0;
    
    var evActivate = "";
    var evDeactivate = "";
    if (this.actionEvent == "MouseClick")
    {
        evActivate = "mousedown";
        evDeactivate = "mouseup";
    }
    else
    {
        evActivate = "mouseover";
        evDeactivate = "mouseout";
    }
    //  Добавление скроллеров
    if (this.leftButtonImage != "")
    {
        el = $c("div" , this.id + "_left", parentEl);
        el.className = this.cssScrollClass;
        el.setStyle({ padding: "0px", margin: "0px", position: "absolute", cursor: "pointer", zIndex: "1" });
        el.direction = "left";
        imgEl = $c("img", this.id + "_scroll_img_l", el);
        imgEl.src = this.leftButtonImage;
        if (this.disabledLeftButtonImage != "")
            imgEl.src = this.disabledLeftButtonImage;
        imgEl.direction = "left";
        
        el.setStyle({ width: this.scrollerWidth + "px", height: this.scrollerHeight + "px", top: "0px", left: "0px" });
        attachEcmaClass(el, this);
        el.observe(evActivate, this.ScrollDown); 
        el.observe(evDeactivate, this.ScrollUp); 
        el.observe("click", SelectPrevious);
        dx = el.offsetWidth;
    }
    if (this.rightButtonImage != "")
    {
        el = $c("div" , this.id + "_right", parentEl);
        el.className = this.cssScrollClass;
        el.setStyle({ padding: "0px", margin: "0px", position: "absolute", cursor: "pointer", zIndex: "1" });
        el.direction = "right";
        imgEl = $c("img", this.id + "_scroll_img_r", el);
        imgEl.src = this.disabledRightButtonImage;
        imgEl.src = this.rightButtonImage;
        imgEl.direction = "right";
        
        el.setStyle({ width: this.scrollerWidth + "px", height: this.scrollerHeight + "px", top: "0px", left: "404px" });
        attachEcmaClass(el, this); 
        el.observe(evActivate, this.ScrollDown); 
        el.observe(evDeactivate, this.ScrollUp);
        el.observe("click", SelectNext);
    }
    //
    var _divEl = $(this.id + "_div");
    var _leftEl = $(this.id + "_left");
    var _rightEl = $(this.id + "_right");
    this.leftX = 0;
    if (_leftEl != null)
        this.leftX += _leftEl.offsetWidth;        
    this.rightX = _divEl.offsetWidth;
    if (_rightEl != null)
        this.rightX = _rightEl.offsetLeft; 
    //
    for (var i = 0; i < this.items.count; ++i)
    {
        el = $c("div" , this.id + "_item_" + i, parentEl);
        el.value = i;
        el.setStyle({ padding: "1px 0px 0px 0px", margin: "0px", position: "absolute", cursor: "pointer", zIndex: "0" });
        //---
        tableEl = $c("table", this.id + "_item_t_" + i, el);
        tableEl.cellpadding = "0px";
        tableEl.cellspacing = "0px";
        tableEl.setStyle({ padding: "0px", margin: "0px" });
        tableEl = $c("tbody", "", tableEl);
        tableEl.setStyle({ padding: "0px", margin: "0px" });
        tableEl = $c("tr", "", tableEl);
        tableEl.setStyle({ padding: "0px", margin: "0px" });
        if (this.items.items[i].image != "")
        {
            cellEl = $c("td", this.id + "_item_img_" + i, tableEl);
            cellEl.setStyle({ padding: "0px", margin: "0px" });
            cellEl.value = i;
            imgEl = $c("img", "", cellEl);
            imgEl.className = this.cssItemClass;
            imgEl.setStyle({ padding: "0px", margin: "0px" });
            imgEl.src = this.items.items[i].image;
            imgEl.value = i;
            if (this.useHints)
            {
                imgEl.observe("mouseover", this.ImageMouseOver);
                imgEl.observe("mouseout", this.ImageMouseOut);
            }    
        }
        if (this.items.items[i].text != "")
        {    
            cellEl = $c("td", this.id + "_item_txt_" + i, tableEl);
            cellEl.value = i;
            cellEl.Update(this.items.items[i].text);
        }
        if (maxHeight < el.clientHeight)
            maxHeight = el.clientHeight;   
        if (this.items.items[i].fixedWidth != "0px")
            el.style.width = this.items.items[i].fixedWidth; 
        else
        {
            tableEl = $(this.id + "_item_t_" + i);
            el.style.width = tableEl.offsetWidth + "px";
        }      
        if (this.items.fixedHeight != 0)
            el.style.height = this.items.fixedHeight + "px";
        el.style.cursor = "pointer";
        attachEcmaClass(el, this);    
        el.observe("click", this.Click);
        //---
        el.style.top = "-4px";

        el.style.left = getXPosition(i, this) - 1 + dx + "px"; 
        
        if (el.offsetLeft > this.rightX)
            el.style.left = this.rightX + 2 + "px";
        else
            this.stack[this.stack.length] = i;    
        //---
        if (i != (this.items.count - 1))
        {
            delim = $c("div", "", parentEl);
            delim.setStyle({ padding: "0px", margin: "0px", position: "absolute", zIndex: "0", top: "0px", left: getXPosition(i + 1, this) + dx + "px" });
            if (this.delimiterImage != "")
            {
                imgEl = $c("img", this.id + "_d_" + i, delim);
                imgEl.src = this.delimiterImage;
                delim.setStyle({ width: imgEl.offsetWidth + "px" });
                dx += imgEl.offsetWidth - 6;  
            }
            else
            {
                delim.setStyle({ width: this.delimiterWidth + "px" });
                dx += this.delimiterWidth;
            }
            delim.setStyle({ height: parentEl.style.height });
        }  
        //---
    }
    if (currentItem != "")
    {
        for (var i = 0; this.items.count; ++i)
            if (this.items.items[i].pId == currentItem)
            {
                currentItem = i;
                break;
            }
    }
    else
        currentItem = 0;  
    this.SelectItem(currentItem);
    
    if (this.useHints == true)
    {
        var parentEl = $(id).parentNode;
        var _div = $c("div", this.id + "_hint", parentEl);
        _div.setStyle({ padding: "2px", margin: "0px", position: "absolute", zIndex: "0", visibility: "hidden", border: "solid gray 1px", cursor: "default", whiteSpace: "nowrap", backgroundColor: "rgb(" + this.hintBlockColor + ")" });
    }
}

DynaScroll.prototype.Click = function(ev)
{
    var ev = (ev) ? ev : ((window.event) ? event: null);
    var el = getCurrentEventTarget(ev);
    var ctx = getEcmaClass(ev);
    if (el._ecmaClass != ctx) 
        el = getParentNode(el,ctx);
     
    ctx.OnSelect(el.value);
}  

DynaScroll.prototype.ImageMouseOver = function(ev)
{
    var ev = (ev) ? ev : ((window.event) ? event: null);
    var el = getCurrentEventTarget(ev);
    var ctx = getEcmaClass(ev);
    
    var index = el.parentNode.value;
    
    if (ctx.items.items[index].hint == "")
        return;
        
    var component = $(ctx.id);
    var parentEl = $(ctx.id + "_item_" + index); 
    var _div = $(ctx.id + "_hint");
    _div.innerHTML = "";
    _div.innerHTML = ctx.items.items[index].hint;
    _div.style.visibility = "visible";
    _div.style.zIndex = "100";
    if (iwGetPositionX(parentEl) - (_div.offsetWidth - el.offsetWidth)/2 + _div.offsetWidth < iwGetPositionX(component) + component.offsetWidth - evalCSSValue(ctx.hintPadding))
        _div.style.left = iwGetPositionX(parentEl) - (_div.offsetWidth - el.offsetWidth)/2 + 2 + "px";
    else
        _div.style.left = iwGetPositionX(component) + component.offsetWidth - _div.offsetWidth - evalCSSValue(ctx.hintPadding)  + "px";
        
    if ((iwGetPositionX(parentEl) - (_div.offsetWidth - el.offsetWidth)/2 + 2) < iwGetPositionX(component) + evalCSSValue(ctx.hintPadding))
        _div.style.left = iwGetPositionX(component) + evalCSSValue(ctx.hintPadding) + "px";
    
    if (ctx.hintVertAlign == "Middle")
        _div.style.top = iwGetPositionY(parentEl) + evalCSSValue(ctx.hintVertPadding) + el.offsetHeight/2 - 2 + "px";
    else
        if (ctx.hintVertAlign == "Top")
            _div.style.top = iwGetPositionY(parentEl) + evalCSSValue(ctx.hintVertPadding) + 6 + "px";
        else        
            _div.style.top = iwGetPositionY(parentEl) + el.offsetHeight - evalCSSValue(ctx.hintVertPadding) + 4 + "px";
}

DynaScroll.prototype.ImageMouseOut = function(ev)
{
    var ev = (ev) ? ev : ((window.event) ? event: null);
    var el = getCurrentEventTarget(ev);
    var ctx = getEcmaClass(ev);
    
    var index = el.parentNode.value;
    var parentEl = $(ctx.id + "_item_" + index); 
    
    if (ev.clientX < iwGetPositionX(el) || ev.clientX > (iwGetPositionX(el) + el.clientWidth - 3) || ev.clientY < iwGetPositionY(el) || ev.clientY > (iwGetPositionY(el) + el.clientHeight - 3))
    {
        var _div = $(ctx.id + "_hint");
        _div.style.visibility = "hidden";
    }    
}  

DynaScroll.prototype.ScrollDown = function(ev)
{
    var ev = (ev) ? ev : ((window.event) ? event: null);
    var el = getCurrentEventTarget(ev);
    var ctx = getEcmaClass(ev);
    if (el._ecmaClass != ctx) 
        el = getParentNode(el,ctx);  
    
    ctx.target = el;
    ctx.isScrolling = true; 
    tout = setTimeout(ctx.id + ".ScrollTimeOut()", ctx.scrollTimeOut);  
    
}
DynaScroll.prototype.ScrollUp = function(ev)
{
    var ev = (ev) ? ev : ((window.event) ? event: null);
    var el = getCurrentEventTarget(ev);
    var ctx = getEcmaClass(ev);
    if (el._ecmaClass != ctx) 
        el = getParentNode(el,ctx);  
    
    ctx.isScrolling = false;
    scrollItems(ctx);         
}

DynaScroll.prototype.ScrollTimeOut = function()
{
    if (this.isScrolling)
    {
        scrollItems(this);
        out = setTimeout(this.id + ".ScrollTimeOut()", this.scrollTimeOut);  
    }
}

DynaScroll.prototype.SelectItem = function(index)
{
    if (index < this.items.count)
    {
        this.selectedItem = index;
        this.OnSelect(index);
    }    
}

DynaScroll.prototype.OnSelect = function(index)
{
    if (this.Select != null)
        this.Select(this.items.items[index]);
}

// DynaScrollItems Object
function DynaScrollItems()
{
    this.items = new Array(); 
    this.count = 0;
    this.fixedHeight = 165;
}

DynaScrollItems.prototype.Add = function(text, href, image, hint, fixedWidth, pId)    
{
    this.items[this.count] = new DynaScrollItem;
    this.items[this.count].image = image;
    this.items[this.count].text = text;
    this.items[this.count].href = href;
    this.items[this.count].hint = hint;
    this.items[this.count].fixedWidth = fixedWidth;
    this.items[this.count].pId = pId;
    this.count = this.count + 1;
}

DynaScrollItems.prototype.Delete = function(index)    
{
    if ((index > -1) && (index < this.Count))
    {
        this.items.splice(index,1);
        this.count--;
    }
}

DynaScrollItems.prototype.Clear = function()    
{
    while (this.count > 0)
    {
        this.items.splice(0,1);
        this.count--;
    }
}

// DynaScrollItem
function DynaScrollItem()
{
    this.image = "";
    this.text = "";
    this.href = "";
    this.hint = "";
    this.pId = null;
    this.fixedWidth = null;
}

//  -----------------------------

function getXPosition(index, ctx)
{
    var x = 0;
    var el = null;
    for (var i = 0; i < index; ++i)
    {
        if (ctx.items.items[i].fixedWidth == "0px")
        {
            el = $(ctx.id + "_item_t_" + i);
            x += el.offsetWidth;
            x += 2; 
        }
        else
            x += evalCSSValue(ctx.items.items[i].fixedWidth);    
    }
    
    return x;
}
var i = 0;
function scrollItems(ctx)
{
    var el = ctx.target;
    if (ctx.items.count != 0)
    {         
        var nextEl = null;
        var dx = 0; 
        if (el.direction == "right" && ctx.scrollState != 2)
            dx = ctx.scrollSpeed;
        else
        if (el.direction == "left" && ctx.scrollState != 1)
            dx = - ctx.scrollSpeed;   
                 
        if (dx != 0)
            {
            var img = null;
            if (ctx.scrollState == 1)
            {
                img = $(ctx.id + "_scroll_img_l");
                img.src = ctx.leftButtonImage;
            } 
            if (ctx.scrollState == 2)
            {
                img = $(ctx.id + "_scroll_img_r");
                img.src = ctx.rightButtonImage;
            }   
            ctx.scrollState = 0;
            
            if (el.direction == "left" && ctx.stack[0] == 0 && $(ctx.id + "_item_0").offsetLeft >= ctx.leftX)
                return;
            var indent = (Prototype.Browser.IE) ? -5 : 2;    
            if (el.direction == "right" && ctx.stack[ctx.stack.length - 1] == (ctx.items.count - 1) && $(ctx.id + "_item_" + (ctx.items.count - 1)).offsetLeft + $(ctx.id + "_item_" + (ctx.items.count - 1)).offsetWidth + indent <= ctx.rightX)
                return;
                 
            for (var i = 0; i < ctx.stack.length; ++i)
            {
                nextEl = $(ctx.id + "_item_" + ctx.stack[i]);
                if (ctx.stack[i] == 0 && el.direction == "left")
                {
                    if (Math.abs(evalCSSValue(nextEl.style.left) - ctx.leftX + 1) < Math.abs(dx))
                        dx = - (Math.abs(evalCSSValue(nextEl.style.left) - ctx.leftX + 1)); 
                }    
                nextEl.style.left = evalCSSValue(nextEl.style.left) - dx + "px";
            }
            //
            if (evalCSSValue(nextEl.style.left) + nextEl.offsetWidth < ctx.rightX && nextEl.value < ctx.items.count - 1)
            {
                ctx.stack[ctx.stack.length] = nextEl.value + 1;   
                $(ctx.id + "_item_" + (nextEl.value + 1)).style.left = nextEl.offsetLeft + nextEl.offsetWidth - delimiter + "px"; 
            }
            //
            var firstInStackEl = $(ctx.id + "_item_" + ctx.stack[0]);
            if (firstInStackEl.offsetLeft + firstInStackEl.offsetWidth < ctx.leftX)
                ctx.stack.splice(0,1);
            //    
            if (firstInStackEl.offsetLeft > ctx.leftX && firstInStackEl.value > 0)
            {
                ctx.stack.unshift(firstInStackEl.value - 1);
                var prevEl = $(ctx.id + "_item_" + (firstInStackEl.value - 1));
                prevEl.style.left = firstInStackEl.offsetLeft - prevEl.offsetWidth +  delimiter + "px"; 
            }
            //
            if (evalCSSValue(nextEl.style.left) + nextEl.offsetWidth < ctx.rightX && nextEl.value == ctx.items.count - 1)
                dx = 0;
        }
    }
    if (dx == 0 && ctx.scrollState == 0)  
    {
        var img = null;
        if (ctx.scrollState == 0)
            if (el.direction == "right")
            {
                img = $(ctx.id + "_scroll_img_r");
                img.src = ctx.disabledRightButtonImage;
                ctx.scrollState = 2;
            }     
            else    
            {
                img = $(ctx.id + "_scroll_img_l");
                img.src = ctx.disabledLeftButtonImage;
                ctx.scrollState = 1;
            }  
    }
}
//  ----------------------
function Select(item)
{
    $("imgMain").src = item.href;
}
function SelectPrevious()
{
    if (scroll.selectedItem > 0)
    {
        $("imgMain").src = scroll.items.items[scroll.selectedItem - 1].href;
        scroll.selectedItem = scroll.selectedItem - 1;
    }    
    
}
function SelectNext()
{
    if (scroll.selectedItem < scroll.items.count)
    {
        $("imgMain").src = scroll.items.items[scroll.selectedItem + 1].href;
        scroll.selectedItem = scroll.selectedItem + 1;
    }
}