//dmMode main catalog mode obj
//in dmModemodes - all catalog modes
var dmMode = {
    state:null,
    subState:null,
    prevSubState:null,
    prevState:null,
    idToMode:{
        artist:'artists',
        song:'songs',
        lyric:'lyrics'
    },
    modes:{ 
        artists:{
            name:'ARTISTS',
            hName:'ARTISTS',
            value:'artists',
            idPrefix:'artist',
            selectId:null,
            loadedData:false,
            sortRank:false,
            container:'container',

            filter:{
                alpha:{
                    view:'',
                    req:''
                },
                genre:{
                    view:'All Genres',
                    req:'0'
                },
                years:{
                    view:'All Years',
                    req:'0'
                }
            }
        },
        songs:{
            name:'SONGS',
            hName:'SONGS',
            value:'songs',
            idPrefix:'song',
            selectId:null,
            loadedData:false,
            sortRank:false,
            container:'song_container',
            filter:{
                alpha:{
                    view:'',
                    req:''
                },
                genre:{
                    view:'All Genres',
                    req:'0'
                },
                years:{
                    view:'All Years',
                    req:'0'
                }
            }
        }    ,
        lyrics:{
            name:'LYRICS',
            hName:'SONGS',
            value:'lyrics',
            idPrefix:'lyric',
            selectId:null,
            loadedData:false,
            sortRank:false,
            container:'lyric_container',
            filter:{
                alpha:{
                    view:'',
                    req:''
                },
                genre:{
                    view:'All Genres',
                    req:'0'
                },
                years:{
                    view:'All Years',
                    req:'0'
                }
            }
        }/*
,
        labels:{
            name:'LABELS',
            hName:'LABELS',
            value:'labels',
            idPrefix:'label',
            selectId:null,
            container:null,
            filter:{
                alpha:null,
                genre:null,
                years:null
            }
        }
        */
    },
    start:function(){
        this.setMode($('amode').rel);
        
        this.setModeContainerOn();
        this.getSelectedIdOnTab();
        this.modes[this.state].loadedData = true;
        this.showModeTabHeader(this.state);
        setRankOn();
        catalogFilter.reqObj = Ajax.getTransport();
    },
    setMode: function(mode){
        this.prevState = this.state;
        
        this.state = this.modes[mode].value;
        this.setSubMode(mode);


    },
    setSubMode: function(mode){
        this.prevSubState = this.state;
        
        this.subState = this.modes[mode].value;
        $('dm_mode').update(this.modes[this.subState].name);
        $('amode').href = "/index/catalog/?display=" + this.modes[this.subState].value;
        for (var d in this.modes)
            $('display_' + this.modes[d].value).setStyle({
                "color":"#f2f2f2"
            });
      
        $('display_' + this.modes[this.subState].value).setStyle({
            "color":"#0E9DFC",
            "font-weight":"bold"
        });

    },
    setActiveId:function(mode,id){
        this.setMode(mode);
        for (var m in this.modes) {
            this.modes[m].selectId = null;
        }
        this.modes[mode].selectId = id;
    },
    resetActiveId:function(){
        for (var m in this.modes) {
            this.modes[m].selectId = null;
        }
    },
    resetSortRank:function(){
        for (var m in this.modes) {
            this.modes[m].sortRank = false;
        }
    },
    resetFiltersFields: function(){
        for (var m in this.modes){
            this.modes[m].filter.alpha.view = "";
            this.modes[m].filter.genre.view = "All Genres";
            this.modes[m].filter.years.view = "All Years";

            this.modes[m].filter.alpha.req = "";
            this.modes[m].filter.genre.reg = "0";
            this.modes[m].filter.years.req = "0";
        }
        
    },
    setModeContainerOn:function(){

        for(var m in this.modes){
           $(this.modes[m].container).setStyle({ 'display':'none' });
        }

        $(this.modes[this.state].container).setStyle({
            'display':'block'
        });
    },
    getSelectedIdOnTab: function(){
        var A = $(this.modes[this.state].container).getElementsByClassName('normal-item');
        this.modes[this.state].selectId = A[0].id.split('_')[1];

        A[0].className = 'current-item';


    },
    attachEvent: function(e,K) {
        this.reqLink.call(this,e,K);
    },
    reqLink: function(e,K){
        

        if(this.modes[K].loadedData == false){
            var url = headLinkConfig[this.state][K].url + '?' + headLinkConfig[this.state][K].params.name + '=' + this.modes[this.state].selectId;
            new Ajax.Request(url, {
                method: 'get',
                onLoading:function(request){

                    loadingInfo2(dmMode.modes[dmMode.state].container);
                },
                onComplete:function(request){
                    finishLoad();
                },
                onSuccess: function() {

                    dmMode.showContainer(K);
                    catalogFilter.loadData();
                    

                }
            });
        } else {
            dmMode.showContainer(K);

            catalogFilter.loadData();

        }



    },
    showContainer: function(K){

        for ( var m in this.modes)  {
            if (m == K){
                $(this.modes[m].container).setStyle({
                    'display' : 'block'
                });
                this.setSubMode(K);
                this.modes[K].loadedData = true;
                this.showModeTabHeader(K);
            } else {
                if($(this.modes[m].container))
                    $(this.modes[m].container).setStyle({
                        'display':'none'
                    });
            }


          
        }
        trigRank();

      
    },
    showModeTabHeader: function(M){


        var I = new Element('img',{
            'class':'h-img',
            src:"/images/arrow.gif"
        });
        var sE1;

        if(this.state === this.subState){
            sE1 = new Element('span', {
                'class': M === this.state ? 'modeOn':'modeOff'                
            }).update(this.modes[this.state].hName);
        } else {

            sE1 = new Element('a', {
                'class': M === this.state ? 'modeOn':'modeOff',
                href: 'javascript:void(0);'
            }).update(this.modes[this.state].hName);
            sE1.observe('click', this.attachEvent.bindAsEventListener(this,this.state));
        }


        var C = $(catalogConfig.mainLeftTabHeaderId);
        C.update(I);
        C.insert(sE1);
        var A;
        if(this.modes[this.state].selectId != null){

            for (var K in headLinkConfig[this.state]){
                C.insert("<span class='modeOff'> | </span>");

                if(this.subState === K){
                    A = new Element('span', {
                        'class': M === K ? 'modeOn':'modeOff'
                    }).update(headLinkConfig[this.state][K].name);

                } else {
                    A = new Element('a', {
                        'class': M === K ? 'modeOn':'modeOff',
                        href: 'javascript:void(0);'
                    }).update(headLinkConfig[this.state][K].name);
                    A.observe('click', this.attachEvent.bindAsEventListener(this,K));
 
                }
                C.insert(A);               

            }
        }

       
    },
    setActiveItemLink: function(el){
        $(el.id).removeClassName('normal-item');
        $(el.id).addClassName('current-item');
        if($(this.modes[this.state].idPrefix + "_" + this.modes[this.state].selectId)){
            $(this.modes[this.state].idPrefix + "_" + this.modes[this.state].selectId).removeClassName('current-item');
            $(this.modes[this.state].idPrefix + "_" + this.modes[this.state].selectId).addClassName('normal-item');
             
        }
        

        var newMode = this.idToMode[el.id.split('_')[0]];
        this.setMode(newMode);
        this.modes[this.state].selectId = el.id.split('_')[1];

        for (var m in this.modes){
            if(m != newMode){
                this.modes[m].loadedData = false;
                this.modes[m].selectId = null;
            }
        }

    },
    finishLoad: function(){
        this.showModeTabHeader(this.state);
    }
    

}

var catalogConfig = {

    filterId:{
        alpha:'search_artist',
        genre:'search_genre',
        years:'search_years'
    },

    mainLeftTabHeaderId:'as_link'
}

//catalog filter Obj
// catalogFilter.reqObj - singleteon ajax request obj
var catalogFilter = {
    reqObj:{},
    reqSend:function(url){
        loadingInfo2(dmMode.modes[dmMode.subState].container);

        this.reqObj.open("GET",url,true);
        this.reqObj.onreadystatechange = this.reqFinish.bind(this);
        this.reqObj.setRequestHeader("X-Requested-With","XMLHttpRequest");
        this.reqObj.setRequestHeader("X-Prototype-Version",Prototype.Version);
        this.reqObj.setRequestHeader("Accept","text/javascript, text/html, application/xml, text/xml, */*");
        this.reqObj.send(null);
    },
    reqFinish:function(){

        if(this.reqObj.readyState == 4){
            if(this.reqObj.status == 200){
                $(dmMode.modes[dmMode.subState].container).update(this.reqObj.responseText);
                finishLoad();

            }
        } 


    },    
    obsrv:null,
    modes:{
        artists:{
            url:'/index/artist_search'
        },
        songs:{
            url:'/index/song_search'
        },
        lyrics:{
            url:'/index/lyric_search'
        }
    },
    make:function(){
        dmMode.resetSortRank();
        setRankOff();
        this.makeReq();
    },
    makeReq: function(){
        if(dmMode.state === dmMode.subState){
            dmMode.resetFiltersFields();
            dmMode.resetActiveId();
            this.saveData();            
        } else {
            this.saveData();            
        }
         
        if(catalogFilter.check()){
            this.send();
            dmMode.showModeTabHeader(dmMode.subState);
            return true;
        } else {
            return false;
        }
       
    },
    check : function(){
        if(dmMode.subState == 'lyrics'){
            if(dmMode.modes[dmMode.subState].filter.alpha.req.length > 5){
                return true;
            } else {
                //return false;
                return true;
            }
        } else {

            return true;

        }

        
        
    },
    saveData: function(){
        dmMode.modes[dmMode.subState].filter.alpha.view = $(catalogConfig.filterId.alpha).value;
        dmMode.modes[dmMode.subState].filter.alpha.req = $(catalogConfig.filterId.alpha).value;


        dmMode.modes[dmMode.subState].filter.genre.req = this.selectGenre();
        dmMode.modes[dmMode.subState].filter.genre.view = $(catalogConfig.filterId.genre).value;

        dmMode.modes[dmMode.subState].filter.years.req = this.selectYears();
        dmMode.modes[dmMode.subState].filter.years.view = $(catalogConfig.filterId.years).value;

    },
    loadData: function(){
        $(catalogConfig.filterId.alpha).value = dmMode.modes[dmMode.subState].filter.alpha.view;

        this.setGenreCombo(dmMode.modes[dmMode.subState].filter.genre.req);
        $(catalogConfig.filterId.genre).value = dmMode.modes[dmMode.subState].filter.genre.view;


        this.setYearsCombo(dmMode.modes[dmMode.subState].filter.years.req);
        $(catalogConfig.filterId.years).value = dmMode.modes[dmMode.subState].filter.years.view;

    },
    selectYears:function(){
        var years_item = document.getElementsByName('dm-years');

        var res = "";
        var resId = "";
        var first_el = true;
        var checkYearsCount = 0;
        var yearsCount = years_item.length;
        for (var i=0;i<years_item.length;i++){

            if(years_item[i].checked == true){
                checkYearsCount ++;
                if(first_el == true){
                    res += years_array[years_item[i].value];
                    resId += years_item[i].value;
                    first_el = false;
                } else {
                    res += "," + years_array[years_item[i].value];
                    resId += "-" + years_item[i].value;
                }

            }

        }


        if(yearsCount == checkYearsCount || checkYearsCount == 0){
            $('search_years').value = 'All Years';
            resId = 0;
        } else {
            $('search_years').value = res;
        }
        hideYearsType();
        return resId;
  


    },

    selectGenre: function(){
        var genre_item = document.getElementsByName('dm-genre');

        var res = "";
        var resId = "";
        var first_el = true;
        var checkGenreCount = 0;
        var genreCount = genre_item.length;
        for (i=0;i<genre_item.length;i++){

            if(genre_item[i].checked == true){
                checkGenreCount ++;
                if(first_el == true){
                    res += genre_array[genre_item[i].value];
                    resId += genre_item[i].value;
                    first_el = false;
                } else {
                    res += "," + genre_array[genre_item[i].value];
                    resId += "-" + genre_item[i].value;
                }

            }

        }


        if(genreCount == checkGenreCount || checkGenreCount == 0){
            $('search_genre').value = 'All Genres';
            resId = 0;
        } else {
            $('search_genre').value = res;
        }


        hideGenreType();
        return resId;


    },

    setGenreCombo: function(str){

        var genre_item = document.getElementsByName('dm-genre');
        //var genre_arr = str.split('-');
        var genre_arr = [];
        var res = "";
        var resId = "";
        var first_el = true;
        var genreCount = genre_item.length;
        if(str.length>2){
            genre_arr = str.split('-');
            for (var i=0;i<genre_item.length;i++){
                genre_item[i].checked = false;

                for(var j=0;j<genre_arr.length;j++){
                    if(genre_item[i].value == genre_arr[j]){
                        genre_item[i].checked = true;
                    }
                }
            }

            return str;
        } else {
            for (var i=0;i<genre_item.length;i++){

                genre_item[i].checked = false;


            }
            return 0;
        }


    },
    setYearsCombo: function(str){

        var years_item = document.getElementsByName('dm-years');
        var years_arr = [];
        if(str.length>2){
            years_arr = str.split('-');
        }
        var res = "";
        var resId = "";
        var first_el = true;
        var yearsCount = years_item.length;
        for (var i=0;i<years_item.length;i++){

            years_item[i].checked = false;

            for(var j=0;j<years_arr.length;j++){

                if(years_item[i].value == years_arr[j]){
                    years_item[i].checked = true;
                }
            }
        }

        for(j=0;j<years_arr.length;j++){
            if(first_el == true){
                res += years_arr[j];
      
                first_el = false;
            } else {
                res += "," + years_arr[j];

            }
        }

        return res;

    },
    send: function(){
        //var url = dmMode.modes[dmMode.subState].filter.alpha.req + "&" +  dmMode.modes[dmMode.subState].filter.genre.req + "&" + dmMode.modes[dmMode.subState].filter.years.req;

        //alert(url);
        var url = this.modes[dmMode.subState].url + '?search=' + dmMode.modes[dmMode.subState].filter.alpha.req + "&genre=" +  dmMode.modes[dmMode.subState].filter.genre.req + "&years=" + dmMode.modes[dmMode.subState].filter.years.req;
        if(dmMode.modes[dmMode.state].selectId != null && dmMode.state != dmMode.subState){
            url = url + "&search_" + dmMode.modes[dmMode.state].idPrefix + "_id=" + dmMode.modes[dmMode.state].selectId;
        }

        if( dmMode.modes[dmMode.subState].sortRank){
            url = url + "&order_by=rank&order_sort=desc";
        }


        url = url + "&hash=" + Math.random();

        if(this.obsrv) clearTimeout(this.obsrv);
        this.obsrv = setTimeout(this.reqSend.bind(this,url),300);


    /*    this.obsrv = setTimeout(function(){
            
            new Ajax.Request(url, {
                method: 'get',
                onLoading:function(request){
                    // alert(this.modes[this.state].container);
                    loadingInfo2(dmMode.modes[dmMode.subState].container);
                },
                onComplete:function(request){
                    finishLoad();
                },
                onSuccess: function(transport) {


                    $(dmMode.modes[dmMode.subState].container).update(transport.responseText);
                //    dmMode.resetSortRank();
                //    sortRankOff();
                }
            });
            
        },300);
*/

    }
}

var headLinkConfig = {

    artists:{
        songs:{
            name:'SONGS',
            url:'/index/find_song_by_artists',
            params:{
                name:'artist',
                artist:null
            },
            loadedData:false,
            container:'song_container'
        }
    },
    songs:{
        artists:{
            name:'ARTISTS',
            url:'/index/find_artists_by_song',
            params:{
                name:'song',
                song:null
            },
            loadedData:false,
            container:'container'
        }
    },
    lyrics:{
        artists:{
            name:'ARTISTS',
            url:'/index/find_artists_by_song',
            params:{
                name:'song',
                song:null
            },
            loadedData:false,
            container:'container'
        }
    }
}

// FIND SONGS IF WE HAVE ARTIST ID
//<a onclick=" new Ajax.Request('/index/find_song_by_artists?artist=2327', \n\
//            {
//             asynchronous:true, evalScripts:true,
//             onComplete:function(request){finishLoad(); },
//             onLoading:function(request){loadingInfo2("container");
//             },
//             parameters:'authenticity_token=' + encodeURIComponent('eecf47b34e5b8538b0079ccc07c00c35d72f636b')});
//         return false;" href="#">
//SONG ID
//<a onclick="new Ajax.Request('/index/find_artists_by_song?song=85', {asynchronous:true, evalScripts:true, onComplete:function(request){finishLoad();}, onLoading:function(request){loadingInfo2("artist_info");}, parameters:'authenticity_token=' + encodeURIComponent('eecf47b34e5b8538b0079ccc07c00c35d72f636b')}); return false;" href="#">
//

//------------------------------------------------
var active_artist = null;
var active_song = null;
var alpha = null;
var genre_combo = true;
var years_combo = true;
var genre_array = [];
var genre_selected = null;
var artist_selected = null;
var years_selected = null;
var vmenu = true;
var alpha_arr = [];
var display = null;
var song_page = false;
var search_song_id = null;
var search_artist_id = null;
var filter_song1 = null;
var filter_song2 = null;
var filter_song3 = null;
var filter_song4 = null;
var filter_artist1 = null;
var filter_artist2 = null;
var filter_artist3 = null;
var filter_artist4 = null;
var chkGnr = false;
var chkYrs = false;
var artist_sort_by_rank = true;
var song_sort_by_rank = true;

var sort_by_rank = true;

var years_array = []


years_array['16c'] = '17th century';
years_array['17c'] = '18th century';
years_array['18c'] = '19th century';
years_array['1900s'] = '1900s';
years_array['1910s'] = '1910s';
years_array['1920s'] = '1920s';
years_array['1930s'] = '1930s';
years_array['1940s'] = '1940s';
years_array['1950s'] = '1950s';
years_array['1960s'] = '1960s';
years_array['1970s'] = '1970s';
years_array['1980s'] = '1980s';
years_array['1990s'] = '1990s';
years_array['2000s'] = '2000s';


alpha_arr[1] = 'A';
alpha_arr[2] = 'B';
alpha_arr[3] = 'C';
alpha_arr[4] = 'D';
alpha_arr[5] = 'E';
alpha_arr[6] = 'F';
alpha_arr[7] = 'G';
alpha_arr[8] = 'H';
alpha_arr[9] = 'I';
alpha_arr[10] = 'J';
alpha_arr[11] = 'K';
alpha_arr[12] = 'L';
alpha_arr[13] = 'M';
alpha_arr[14] = 'N';
alpha_arr[15] = 'O';
alpha_arr[16] = 'P';
alpha_arr[17] = 'Q';
alpha_arr[18] = 'R';
alpha_arr[19] = 'S';
alpha_arr[20] = 'T';
alpha_arr[21] = 'U';
alpha_arr[22] = 'V';
alpha_arr[23] = 'W';
alpha_arr[24] = 'X';
alpha_arr[25] = 'Y';
alpha_arr[26] = 'Z';
alpha_arr[26] = '1';

function setActiveArtistLink(el){
    $(el.id).setStyle({
        color: '#0E9DFC',
        fontWeight: 'bold'
    });
    if(active_artist != el.id){
        if(active_artist && $(active_artist)){
            $(active_artist).setStyle({
                color: '#666666',
                fontWeight: 'normal'
            });
        }
    }
    active_artist = el.id;
}

function addGenre(n){
    Element.show('genre'+n);
    if($("g"+(n-1)+"p")){
        Element.hide("g"+(n-1)+"p");
    }
    if($("g"+(n-1)+"m")){
        Element.hide("g"+(n-1)+"m");
    }
    
}

function remGenre(n){
    Element.hide('genre'+n);
    $('genre_'+n).value = ""
       
    if($("g"+(n-1)+"p")){
        Element.show("g"+(n-1)+"p");
    }
    if($("g"+(n-1)+"m")){
        Element.show("g"+(n-1)+"m");
    }
}

function loadingInfo(eId){
    var height = Element.getHeight(eId);
    var width = Element.getWidth(eId);
    width -=10;
    var cont = "<div style='height:"+height+"px; width:"+width+"px;'><img src=\'/images/ajax-loader.gif\' /> loading...</div>";
    Element.update(eId,cont)
 
}

function loadingInfo2(eId){

    var parent =  $(eId);
    var p = Array();

    p.x = parent.offsetLeft;

    p.y = parent.offsetTop - 20;
        
    while (parent.offsetParent)	{

        parent = parent.offsetParent;

        p.x += parent.offsetLeft;

        p.y += parent.offsetTop;

    }
    var height = Element.getHeight(eId);
    var width = Element.getWidth(eId);
        
    $('loadDiv').setStyle({
        position: 'absolute',
        top: p.y + "px",
        left: p.x + "px",
        display: "",
        width: width + "px",
        height: height + "px",
        opacity: ".50",
        backgroundColor:'#ffffff',
        textAlign:"center",
        verticalAlign: "middle"
    });

   
}

function finishLoad(){
    $('loadDiv').setStyle({
        position: 'relative',
        display:"none"
    });
}


function loadArtistInfo(artist_id){
    if($('mdai').getStyle('display') == 'none'){
        new Effect.SlideDown('mdai');
    } else {
        new Effect.Opacity('mdai', {
            from: 1,
            to: 0
        });

        new Effect.Opacity('mdai', {
            from: 0,
            to: 1
        });
    }
    var cont = "Artist Id "+artist_id;
    Element.update("cdai",cont)
}

function setAlbumsLink(){
    $('albums_link').setStyle({
        color: '#0E9DFC'
    });
    $('tracks_link').setStyle({
        color: '#999999'
    });

}
function setTracksLink(){
    $('tracks_link').setStyle({
        color: '#0E9DFC'
    });
    $('albums_link').setStyle({
        color: '#999999'
    });
  
}
function setTracksLink(){
    $('tracks_link').setStyle({
        color: '#0E9DFC'
    });
    $('albums_link').setStyle({
        color: '#999999'
    });

}


function setAlbumsLyricLink(){
    $('albums_link').removeClassName('modeOff');
    $('albums_link').addClassName('modeOn');

    $('tracks_link').removeClassName('modeOn');
    $('tracks_link').addClassName('modeOff');

    $('lyrics_link').removeClassName('modeOn');
    $('lyrics_link').addClassName('modeOff');

}
function setTracksLyricLink(){
    $('albums_link').removeClassName('modeOn');
    $('albums_link').addClassName('modeOff');

    $('tracks_link').removeClassName('modeOff');
    $('tracks_link').addClassName('modeOn');

    $('lyrics_link').removeClassName('modeOn');
    $('lyrics_link').addClassName('modeOff');

}


function setLyricLink(){
    $('albums_link').removeClassName('modeOn');
    $('albums_link').addClassName('modeOff');

    $('tracks_link').removeClassName('modeOn');
    $('tracks_link').addClassName('modeOff');

    $('lyrics_link').removeClassName('modeOff');
    $('lyrics_link').addClassName('modeOn');

}



function showGenreType(){

    hideYearsType()
  
    var parent2 =  $("search_genre");
    var p2 = Array();
    p2.x = 0;

    p2.y = 0;

    p2.x = parent2.offsetLeft;

    p2.y = parent2.offsetTop;
        
    while (parent2.offsetParent)	{

        parent2 = parent2.offsetParent;

        p2.x += parent2.offsetLeft;

        p2.y += parent2.offsetTop;

    }

    p2.y += 22;
    p2.x += 1;
        
    var height = Element.getHeight('genre_type');
    var width = Element.getWidth('genre_type');
        
          
    
    $('genre_type').setStyle({
        position: 'absolute',
        top: p2.y + "px",
        left: p2.x + "px",
        display: "",
        width:"360px",
        //146
        //  height: height + "px",
        height: "200px",
        color:"#6F6F6F",
        backgroundColor:'#FDFDFD',
        textAlign:"left",
        verticalAlign: "top",
        paddingLeft: "0px",
        paddingBottom:"0px",
        borderLeft:" 1px solid #EFEFEF",
        borderBottom:" 1px solid #EFEFEF",
        borderRight:" 1px solid #EFEFEF"
    });
    genre_combo = false;
}


function showYearsType(){

    hideGenreType();

    var parent2 =  $("search_years");
    var p2 = Array();
    p2.x = 0;

    p2.y = 0;

    p2.x = parent2.offsetLeft;

    p2.y = parent2.offsetTop;

    while (parent2.offsetParent)	{

        parent2 = parent2.offsetParent;

        p2.x += parent2.offsetLeft;

        p2.y += parent2.offsetTop;

    }

    p2.y += 22;
    p2.x += 1;

    var height = Element.getHeight('years_type');
    var width = Element.getWidth('years_type');



    $('years_type').setStyle({
        position: 'absolute',
        top: p2.y + "px",
        left: p2.x + "px",
        display: "",
        width:"146px",
        height: height + "px",
        color:"#6F6F6F",
        backgroundColor:'#FDFDFD',
        textAlign:"left",
        verticalAlign: "top",
        paddingLeft: "0px",
        paddingBottom:"0px",
        borderLeft:" 1px solid #EFEFEF",
        borderBottom:" 1px solid #EFEFEF",
        borderRight:" 1px solid #EFEFEF"
    });
    years_combo = false;
}


function showVmenu(){
  
    var parent3 =  $("pv");
    var p3 = Array();

    p3.x = parent3.offsetLeft;

    p3.y = parent3.offsetTop;
        
    while (parent3.offsetParent)	{

        parent3 = parent3.offsetParent;

        p3.x += parent3.offsetLeft;

        p3.y += parent3.offsetTop;

    }

    p3.y = 69;
    var height = Element.getHeight('vmenu');
    var width = Element.getWidth('vmenu');
        
         
    
    $('vmenu').setStyle({
        position: 'absolute',
        top: p3.y + "px",
        left: p3.x + "px",
        display: "",
        width:"218px",
        height: height + "px",
        backgroundColor:'#FDFDFD',
        textAlign:"left",
        verticalAlign: "top"
    });
    vmenu = false;
}

function hideVmenu(){
    $('vmenu').setStyle({
        display: "none"
    });
    vmenu = true;
}
 
function hideGenreType(){
    $('genre_type').setStyle({
        display: "none"
    });
    genre_combo = true;
}

function hideYearsType(){
    $('years_type').setStyle({
        display: "none"
    });
    years_combo = true;
}

function genreMouseOver(id){
    if($(id)){
        $(id).setStyle({
            backgroundColor:"#336666",
            color:"#f2f2f2"
        });
    }

    
}

function genreMouseOut(id){
    if($(id)){
        $(id).setStyle({
            backgroundColor:"#fdfdfd",
            color:"#6F6F6F"
        });
    }

    
}

function genreClick(id){
    if(id != 0){
        $('search_genre').value = genre_array[id];
     
    }
    else {
        $('search_genre').value = 'All Genres';
    }
    
    hideGenreType(); 
    genre_selected = id;
    filterRequest(artist_selected, genre_selected, years_selected);
}

function filterRequest(a,g,y,order_by,order_sort){


    if(a == null){
        a ='';
    }

    if(g == null){
        g = '0';
    }

    if(y == null){
        y = '0';
    }
    // alert(display);

    var url = "";
    var to_do = 'setRankOff();'
    if(display == 'artists'){
        if(search_song_id != null){
            if(order_by != null && order_sort != null){
                url = '/index/artist_search?search=' + a + "&genre=" + g + "&years=" + y + "&order_by="+order_by+"&order_sort="+order_sort+ "&search_song_id="+search_song_id;
                to_do = 'setRankOn();'
            }
            else {
                url = '/index/artist_search?search=' + a + "&genre=" + g + "&years=" + y + "&search_song_id="+search_song_id;
            }
        //            url = '/index/artist_search?search=' + a + "&genre=" + g + "&years=" + y + "&search_song_id="+search_song_id;


        } else if(order_by != null && order_sort != null){
            url = '/index/artist_search?search='+ a +"&genre="+g+"&years="+y+"&order_by="+order_by+"&order_sort="+order_sort;
            to_do = 'setRankOn();'
        }
        else {
            url = '/index/artist_search?search='+ a +"&genre="+g+"&years="+y;
        }

        if(search_song_id == null){
            filter_song1 = null;
            filter_song2 = null;
            filter_song3 = null;
            filter_song4 = null
            filter_artist1 = null;
            filter_artist2 = null;
            filter_artist3 = null;
            filter_artist4 = null;
    
            //$('as_link').update('&nbsp;<img src="/images/arrow.gif">&nbsp;<span id="artists_link" style="color:#0E9DFC;font-size:14px;font-weight:bold;">ARTISTS</span><span style="color:#999999;font-size:14px;">|</span><span id="artists_link" style="color:#999999;font-size:14px;font-weight:bold;">SONGS</span><a href="javascript:;" style="float:right;" id="sort_by_rank" ><img id="top-star-img" src="/images/top-star.png"/></a>');
            $('as_link').update('&nbsp;<img src="/images/arrow.gif">&nbsp;<span id="artists_link" style="color:#0E9DFC;font-size:14px;font-weight:bold;">ARTISTS</span>');

        }
        
    }

    if(display == 'songs'){
        // alert('1');
        if(search_artist_id != null){
            //    alert('2');
            if(order_by != null && order_sort != null){
                url = '/index/song_search?search=' + a + "&genre=" + g + "&years=" + y + "&order_by="+order_by+"&order_sort="+order_sort+ "&search_song_id="+search_artist_id;
                to_do = 'setRankOn();'
            } else {
                url = '/index/song_search?search=' + a + "&genre=" + g + "&years=" + y + "&search_song_id="+search_artist_id;
            }
        //url = '/index/song_search?search='+ a +"&genre="+g+"&years="+y+"&search_artist_id="+search_artist_id;
        } else if(order_by != null && order_sort != null){
            //   alert('3');
            url = '/index/song_search?search='+ a +"&genre="+g+"&years="+y+"&order_by="+order_by+"&order_sort="+order_sort;
            to_do = 'setRankOn();'
        } else {
            //   alert('4');
            url = '/index/song_search?search='+ a +"&genre="+g+"&years="+y;
        }
  
        if(search_artist_id == null){
            filter_song1 = null;
            filter_song2 = null;
            filter_song3 = null;
            filter_song4 = null
            filter_artist1 = null;
            filter_artist2 = null;
            filter_artist3 = null;
            filter_artist4 = null;
    
            $('as_link').update('&nbsp;<img src="/images/arrow.gif">&nbsp;<span id="artists_link" style="color:#999999;font-size:14px;font-weight:bold;">ARTISTS</span><span style="color:#999999;font-size:14px;">|</span><span id="artists_link" style="color:#0E9DFC;font-size:14px;font-weight:bold;">SONGS</span>');
        }
       

    }

    if(display == null){
        return false;
    }

    new Ajax.Request(url, {
        method: 'get',
        onSuccess: function(transport) {
            if(display == 'songs'){
                var notice = $('song_container');
                $('container').setStyle({
                    display:'none'
                });
                $('song_container').setStyle({
                    display:'block'
                });
            }
            if(display == 'artists'){
                var notice = $('container');
                $('container').setStyle({
                    display:'block'
                });
                $('song_container').setStyle({
                    display:'none'
                });
            }

            if(to_do){
                eval(to_do);
            }
    
            notice.update(transport.responseText);
        },
        onComplete:function(request){
            finishLoad()
        },
        onLoading:function(request){
            loadingInfo2("main_left");
        }
    });
    
}

function alphaClick(a){

    //    search_artist_id = null;
    //    search_song_id = null;
    
    

    $('search_artist').value = a;

    catalogFilter.make();

    //  filterRequest(a, genre_selected, years_selected);
    
    if($(alpha)){
        $(alpha).removeClassName('current');
    }
        
    if($(a)){
        $(a).addClassName('current');
        alpha = a;
        artist_selected = a;
    }
}


function alphaOver(a){
    $(a).addClassName('current');

}

function alphaOut(a){

    if(alpha != a){
        $(a).removeClassName('current');
    }
}

function setContainerOn(el,fload,dsp){
    
    if(el == 'song_container'){
        $('container').setStyle({
            display:'none'
        });
        $('song_container').setStyle({
            display:'block'
        });
        if(!fload){
            $('as_link').update('<img src="/images/arrow.gif"/>&nbsp;<a onclick=" setContainerOn(\'container\');cleanFilter(); return false;" href="#"><span id="artists_link" style="color: rgb(153, 153, 153); font-size: 14px; font-weight: bold;">ARTISTS</span></a><span style="color: rgb(153, 153, 153); font-size: 14px;">&nbsp;|&nbsp;</span><span id="artists_link" style="color: rgb(14, 157, 252); font-size: 14px; font-weight: bold;">SONGS</span>');
        }
       
        display = dsp;
        //  alert(display + "-" + dsp);

        $('dm_mode').update(dsp.toUpperCase());
    }
    
    if(el == 'container'){
        $('container').setStyle({
            display:'block'
        });
        $('song_container').setStyle({
            display:'none'
        });
        $('as_link').update('<img src="/images/arrow.gif"/>&nbsp;<span id="artists_link" style="color: rgb(14, 157, 252); font-size: 14px; font-weight: bold;">ARTISTS</span><a onclick=" setContainerOn(\'song_container\');cleanFilter(); return false;" href="#"><span style="color: rgb(153, 153, 153); font-size: 14px;">&nbsp;|&nbsp;</span><span id="artists_link" style="color: rgb(153, 153, 153); font-size: 14px; font-weight: bold;">SONGS</span></a>');
        display = 'artists';
        $('dm_mode').update('ARTISTS');

    }

    setRankOff();
    
}


function sortByRank(){
    if(dmMode.modes[dmMode.subState].sortRank){
        setRankOff();
        catalogFilter.makeReq();

    } else {
        setRankOn();
        catalogFilter.makeReq();

    }
    

}

function trigRank(){
    if(dmMode.modes[dmMode.subState].sortRank){
        setRankOn();


    } else {
        setRankOff();


    }


}

function setRankOn(){
    dmMode.modes[dmMode.subState].sortRank = true;
    $('top-star-img').src = '/images/top-star-over.png';
}

function setRankOff(){

    if(dmMode.state == dmMode.subState){
        dmMode.resetSortRank();
    }

    dmMode.modes[dmMode.subState].sortRank = false;
    $('top-star-img').src = '/images/top-star.png';
}


function setContainerOnStart(el){
    
    if(el == 'song_container'){
        $('container').setStyle({
            display:'none'
        });
        $('song_container').setStyle({
            display:'block'
        });

        
       
    }
    
    if(el == 'container'){
        $('container').setStyle({
            display:'block'
        });
        $('song_container').setStyle({
            display:'none'
        });
      
    }
    
}

function resetFilter(){
    $('search_genre').value = 'All Genres';
    $('search_years').value = 'Years';
    $('search_artist').value = '';
}

function cleanFilter(){
    
    if(display == 'songs'){
        
        //filter_artist1 = $('search_artist').value;
        filter_artist1 = artist_selected;
        filter_artist2 = $('search_genre').value;
        filter_artist3 = genre_selected;
        filter_artist4 = years_selected;
     
        if(filter_song1 != null){
            artist_selected = filter_song1;
            $('search_artist').value = filter_song1;

        } else {
            artist_selected = null;
            $('search_artist').value = '';

        }
        
        if(filter_song2 != null){
            $('search_genre').value = filter_song2;
            genre_selected = setGenreCombo(filter_song3);

        } else {
            $('search_genre').value = 'All Genres';
            genre_selected = null;
            setGenreCombo(null);

        }

        if(filter_song4 != null){
            $('search_years').value = setYearsCombo(filter_song4);
            //alert(filter_song4);
            years_selected = filter_song4;
        } else {
            $('search_years').value = 'Years';
            years_selected = null;
            setYearsCombo('');
        }
        
    }
    
    if(display == 'artists'){
        
        //filter_song1 = $('search_artist').value;
        filter_song1 = artist_selected;
        filter_song2 = $('search_genre').value;
        filter_song3 = genre_selected;
        filter_song4 = years_selected;
     
        if(filter_artist1 != null){
            artist_selected = filter_artist1;
            $('search_artist').value = filter_artist1;
            genre_selected = filter_artist3;
        } else {
            artist_selected = null;
            $('search_artist').value = '';
        }
        
        if(filter_artist2 != null){
            $('search_genre').value = filter_artist2;
            genre_selected = setGenreCombo(filter_artist3);
        } else {
            $('search_genre').value = 'All Genres';
            genre_selected = null;
            setGenreCombo('');

        }


        if(filter_artist4 != null){
            $('search_years').value = setYearsCombo(filter_artist4);
            years_selected = filter_artist4;
        } else {
            $('search_years').value = 'Years';
            years_selected = null;
            setYearsCombo('');
        }
        
    }
    
// $('search_genre').value = 'All Genres';
// $('search_artist').value = '';
}




function setGenreCombo(str){
    //  alert(str);
    var genre_item = document.getElementsByName('dm-genre');
    //var genre_arr = str.split('-');
    var genre_arr = [];
    var res = "";
    var resId = "";
    var first_el = true;
    var genreCount = genre_item.length;
    if(str){
        genre_arr = str.split('-');
        for (var i=0;i<genre_item.length;i++){
            genre_item[i].checked = false;

            for(var j=0;j<genre_arr.length;j++){
                //  years_item[i].checked = true;
                if(genre_item[i].value == genre_arr[j]){
                    genre_item[i].checked = true;
                }
            }
        }


        
        return str;
    } else {
        for (var i=0;i<genre_item.length;i++){

            genre_item[i].checked = false;
                

        }
        return 0;
    }


}



function getPosition(ep){
    var left = 0
    var top  = 0

    while (ep.offsetParent){
        left += ep.offsetLeft
        top  += ep.offsetTop
        ep     = ep.offsetParent
    }

    left += ep.offsetLeft
    top  += ep.offsetTop

    return {
        x:left,
        y:top
    }
}




function getClientWidth()
{
    return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientWidth:document.body.clientWidth;
}

function getClientHeight()
{
    return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientHeight:document.body.clientHeight;
}

window.screenParams = (function() {
    var srcw = getClientWidth();
    var srch = getClientHeight();
    // alert(srcw);
    return {
        width: srcw,
        height: srch
    }
}())



function showRecordMethodWin(transcription_text){

    if($('dmW_1')){
        //    var dmWdiv = new Element('div',{ id:'dmW_1'      });
        var dmWdiv = $('dmW_1');

        if(dmWdiv.childNodes.length < 2){
            var dmWcdiv1 = new Element('div',{
                id:'dmW_11'
            });
            var dmWcdiv2 = new Element('div',{
                id:'dmW_12'
            });



            dmWcdiv1.setStyle({
                backgroundImage: 'url(/images/wif-top-bg.gif)',
                backgroundRepeat:'repeat-x',
                width:'648px',
                height:'24px',
                zIndex:'99999'
            });
            dmWcdiv2.setStyle({
                backgroundColor: '#757575',
                width:'648px',
                height:'428px'

            });


            dmWcdiv1.innerHTML = "<img style='float:left;' src='/images/wif-top-left.gif'><img id='dm-x-close' style='cursor:hand;float:right;' src='/images/wif-top-boff.gif'>";
            //  alert(window.screenParams.width);
            dmWdiv.setStyle({
                backgroundColor: '#000000',
                width:'648px',
                height:'428px',
                position:'absolute',
                'margin':'0px',
                'padding':'0px',
                textAlign:'left',
                verticalAlign:'top',
                top:'0px',
                // left: ((window.screenParams.width - 648)/2)+'px',
                left:'0px',
                display:''
            });
            var dmIf = new Element('iframe');
            dmIf.src = '/recordflash/index?transcription_text=' + transcription_text;
            dmIf.style.width = "648px";
            dmIf.style.height = "428px";
            //    dmIf.setStyle({padding:'0px',margin:'0px'});
            dmIf.setAttribute('frameborder','no');
            dmIf.setAttribute('scrolling','no');
            //  dmWcdiv2.style.textAlign='center';
            // dmWcdiv2.appendChild(dmIf);
            //    document.body.appendChild(dmWdiv);
            dmWdiv.appendChild(dmWcdiv1);
            //   dmWdiv.appendChild(dmWcdiv2);
            dmWdiv.appendChild(dmIf);
            

            Event.observe('dm-x-close', 'click', function(event){
                //Element.remove(dmWdiv);
                //Oleg it's Vitalik :), we need to reload the flash and scrip bellow allow to do this
                document.getElementById('dmW_1').innerHTML = '';
                dmWdiv.setStyle({

                    display:'none'
                });

                $('overlay').setStyle({

                    display:'none'
                });
            });

            Event.observe('dm-x-close', 'mouseover', function(event){
                var element = Event.element(event);
                element.src = '/images/wif-top-bon.gif';

            });
            Event.observe('dm-x-close', 'mouseout', function(event){
                var element = Event.element(event);
                element.src = '/images/wif-top-boff.gif';
            });
        }    else {


            dmWdiv.setStyle({
                backgroundColor: '#000000',
                width:'648px',
                height:'428px',
                position:'absolute',
                'margin':'0px',
                'padding':'0px',
                textAlign:'left',
                verticalAlign:'top',
                top:'0px',
                // left: ((window.screenParams.width - 648)/2)+'px',
                left: '0px',
                display:''
            });

        }

    }
    else
        alert("fawfaew");

}

function closeRecordWin(){
    Element.remove(document.getElementById('dmW_1'));
}

function selectGenre(){
    var genre_item = document.getElementsByName('dm-genre');
    //alert(genre_item.length);
    var res = "";
    var resId = "";
    var first_el = true;
    var checkGenreCount = 0;
    var genreCount = genre_item.length;
    for (i=0;i<genre_item.length;i++){
        
        if(genre_item[i].checked == true){
            checkGenreCount ++;
            if(first_el == true){
                res += genre_array[genre_item[i].value];
                resId += genre_item[i].value;
                first_el = false;
            } else {
                res += "," + genre_array[genre_item[i].value];
                resId += "-" + genre_item[i].value;
            }

        }

    }

    

    if(genreCount == checkGenreCount || checkGenreCount == 0){
        $('search_genre').value = 'All Genres';
        resId = 0;
    } else {
        $('search_genre').value = res;
    }
    //   if(id != 0){
    //      $('search_genre').value = genre_array[id];
     
    //  }
    //   else {
    //      $('search_genre').value = 'All Genres';
    //  }
    
    hideGenreType(); 
    genre_selected = resId;
    filterRequest(artist_selected, genre_selected, years_selected);

}


function chkGenre(){
    var genre_item = document.getElementsByName('dm-genre');

    for (i=0;i<genre_item.length;i++){

        genre_item[i].checked = !chkGnr;


    }
    
    chkGnr = !chkGnr;    
    if(chkGnr){
        $('chkall').update('UnCheck All');
    } else {
        $('chkall').update('Check All');
    }


//  filterRequest(artist_selected, genre_selected, years_selected);


}


function selectYears(){
    var years_item = document.getElementsByName('dm-years');
    
    var res = "";
    var resId = "";
    var first_el = true;
    var checkYearsCount = 0;
    var yearsCount = years_item.length;
    for (var i=0;i<years_item.length;i++){

        if(years_item[i].checked == true){
            checkYearsCount ++;
            if(first_el == true){
                res += years_array[years_item[i].value];
                resId += years_item[i].value;
                first_el = false;
            } else {
                res += "," + years_array[years_item[i].value];
                resId += "-" + years_item[i].value;
            }

        }

    }

    

    if(yearsCount == checkYearsCount || checkYearsCount == 0){
        $('search_years').value = 'Years';
        resId = 0;
    } else {
        $('search_years').value = res;
    }
    hideYearsType();
    years_selected = resId;

    filterRequest(artist_selected, genre_selected, years_selected);


}

function chkYears(){
    var years_item = document.getElementsByName('dm-years');

    for (var i=0;i<years_item.length;i++){

        years_item[i].checked = !chkYrs;


    }
    
    chkYrs = !chkYrs;
    if(chkYrs){
        $('ychkall').update('UnCheck All');
    } else {
        $('ychkall').update('Check All');
    }


//filterRequest(artist_selected, genre_selected, years_selected);


}

document.observe('dom:loaded', function() {
    /*
  new Ajax.Autocompleter('search_artist', 'pick_artist', '/index/artist_auto_complete', {
     method: 'get',
    minChars: 3
   });
   
     */
   
    if($('clicker2')){
        Event.observe('clicker2', 'click', function(event){
       
            if(vmenu){
                showVmenu();
            } else {
                hideVmenu();
            }
       
        
        });
    }


    if($('clicker')){
        Event.observe('clicker', 'click', function(event){
            if(genre_combo){
                showGenreType();
          
            } else {
                hideGenreType();
                   
            }
        });
    }

    if($('search_genre')){
        Event.observe('search_genre', 'click', function(event){
            if(genre_combo){
                showGenreType();
          
            } else {
                hideGenreType();
                   
            }
        });
    }

    if($('search_years')){
        Event.observe('search_years', 'click', function(event){
          
            if(years_combo){
                showYearsType();

            } else {
                hideYearsType();

            }
        });
    }

    
    if($('search_genre')){
    
        var arr = [];
        var i;
        for(i=0; i<$('genre_types').childNodes.length; i++){
            arr[i] = function(x){
                return x;
            }($('genre_types').childNodes[i].id);
        }
    
        for(i=0;i<arr.length;i++){
            //  alert(arr[i]);
            Event.observe(arr[i], 'mouseover', function(event){
                genreMouseOver(Event.element(event).id);
            });
            Event.observe(arr[i], 'mouseout', function(event){
                genreMouseOut(Event.element(event).id);
            });
        //     Event.observe(arr[i], 'click', function(event){
        //         genreClick(Event.element(event).id);
        //    });
         
        }

  
        /*        Event.observe('search_artist', 'keyup', function(event) {
        
            var search_str = $('search_artist').value;
        
            var s1 = search_str.substr(0, 1);
            s1 = s1.toUpperCase();
      
       
            if($(alpha)){
                $(alpha).removeClassName('current');
            }
        
            if($(s1)){
                $(s1).addClassName('current');
                alpha = s1;
            }
        
            artist_selected = search_str;
            filterRequest(artist_selected,genre_selected, years_selected);
              
        });
*/


        Event.observe('search_artist', 'keyup', function(event) {
            catalogFilter.make();

        });


    
        for(var j=1; j<alpha_arr.length; j++){
            $(alpha_arr[j]).setAttribute('href','javascript:;');
    
            Event.observe(alpha_arr[j], 'click', function(event){
                alphaClick(Event.element(event).id);
            });


            Event.observe(alpha_arr[j], 'mouseover', function(event){
                alphaOver(Event.element(event).id);
            //alert(Event.element(event).id);
            });

            Event.observe(alpha_arr[j], 'mouseout', function(event){
                alphaOut(Event.element(event).id);
            });
        }

    } else {

        for(var j=1; j<alpha_arr.length; j++){


            Event.observe(alpha_arr[j], 'mouseover', function(event){
                alphaOver(Event.element(event).id);
            //alert(Event.element(event).id);
            });

            Event.observe(alpha_arr[j], 'mouseout', function(event){
                alphaOut(Event.element(event).id);
            });
        }

    }



    Event.observe('dm-img-1', 'click', function(event){
        showRecordMethodWin('');
    });


    Event.observe('dm-img-1','mouseover', function(event){
        var element = Event.element(event);
        element.src = '/images/top-center-g.gif';
    });

    Event.observe('dm-img-1','mouseout', function(event){
        var element = Event.element(event);
        element.src = '/images/top-center-b.gif';
    });

    Event.observe('dm-singup','mouseover', function(event){
        var element = Event.element(event);
        element.src = '/images/sign-up2.gif';
    });

    Event.observe('dm-singup','mouseout', function(event){
        var element = Event.element(event);
        element.src = '/images/sign-up1.gif';
    });



    if($('search_genre')){
        

        Event.observe('select_genre_button','click', function(event){
            catalogFilter.make();
        });

        Event.observe('chkg','click', function(event){
            
            chkGenre();
        });



        //    Event.observe('select_years_button','click', function(event){
        //      selectYears();
        //  });


        //-----------
        Event.observe('select_years_button','click', function(event){
            catalogFilter.make();
        });

        Event.observe('chky','click', function(event){
            
            chkYears();
        });




        $('search_genre').value = 'All Genres';
        $('search_years').value = 'Years';
        dmMode.start();
    }




    if($('sort_by_rank')){
        Event.observe('sort_by_rank','click', function(event){
            
            sortByRank();

        })
    // setRankOn();
    }

    if($('catalog-banner')){
        var catBanner = $('catalog-banner');
        Position.absolutize($('rekpos'));
        var bannerTd = $("banner-td");
        var p = Position.positionedOffset(catBanner);
        
        var isReklamaOpen = false;
        var frm = parseInt($('rekpos').style.left);
        var tto = frm - 240;
        catBanner.observe('click',function(){
            Position.absolutize(catBanner);
            
            
            if(!isReklamaOpen){
                var banner_ico = new Element('img');

                banner_ico.src="/images/dm-catalog-right-banner.gif";
                var banner_img = new Element('img');
                banner_img.src = "/images/reklama-left-artist.jpg";
                var element = this;
                //  var from = parseInt(element.style.left);
                var from = frm;
                var to = from - 220; 
                
                var duration = 200;
                var start = new Date().getTime();
                var cls_div = new Element('div');
                cls_div.setStyle({
                    textAlign:'left',
                    width:'309px'
                });

                cls_div.update('<a href="javascript:void(0);" style="font-size:12px;">x</a>');

                cls_div.observe('click',function(){

                    var banner_ico = new Element('img');

                    banner_ico.src="/images/dm-catalog-right-banner.gif";
                    var banner_img = new Element('img');
                    banner_img.src = "/images/reklama-left-artist.jpg";
                    var element = $('catalog-banner');

                    
                    var from = frm ;
                    var to = from ;
                    var duration = 200;
                    var start = new Date().getTime();

                    
                    setTimeout(function() {
                        $("banner-td").update($('catalog-banner').update(banner_ico));
                        $('catalog-banner').style.width = '88px';
                        var now = (new Date().getTime()) - start;
                        var progress = now / duration;

                        var result = (to - from) * delta(progress) + from;


                        
                        element.style.left = result + "px";

                        if (progress < 1){
                            setTimeout(arguments.callee, 10);
                        } else {
                            $('catalog-banner').setStyle({
                                position:'relative',
                                top:'0px',
                                left:'0px'
                            });


                            isReklamaOpen = false;

                        }


                    }, 10)
                });



                setTimeout(function() {
                    var now = (new Date().getTime()) - start; 
                    var progress = now / duration;

                    var result = (to - from) * delta(progress) + from;


                    var w = (from-result) + 88;
                    element.style.left = result + "px";
                    element.style.width = w + "px";

                    if (progress < 1){
                        setTimeout(arguments.callee, 10);
                    } else {
                        $('catalog-banner').setStyle({
                            left:tto+"px",
                            width:'309px'
                        });
                        $('catalog-banner').update(cls_div);
                        $('catalog-banner').insert(banner_img);
                        isReklamaOpen = true;
                    
                    }
                    
                
                }, 10);

            }
            
           
        });

        function delta(progress) {
            return progress;
        }

        catBanner.observe('mouseout',function(){
            
            });

    }



});