var loadedFullImages = [];
jQuery.fn.umihost_DesignList = function(options, handler, s_container, s_categoryList) {

    reloadCategoryList = (options.reloadCategoryList == undefined) ? /*true*/ true : options.reloadCategoryList;
    
    function getPreviewPosition(x,y) {
        var pad = 20;
        var ph = $("#" + previewId).height();
        var _yPos = y - Math.ceil(ph / 2);
        
        if($(window).height() - pad + $(window).scrollTop() < _yPos + ph){
            _yPos = $(window).height() - ph + $(window).scrollTop();
        }
        if(_yPos < $(window).scrollTop()) {
            _yPos = $(window).scrollTop();
        }
        
        var _xPos = x + pad;
        if($(document).width() < _xPos + $("#" + previewId).width()){
            _xPos = x - $("#" + previewId).width() - pad;
        }
        return {'x':_xPos, 'y':_yPos};
    }

    var _opt = options;
    
    var blankButtonImg = _opt.blankButtonImg ? _opt.blankButtonImg : '/adminzone/images/blank.gif';
    var preloaderImg = _opt.preloaderImg ? _opt.preloaderImg : '/adminzone/images/loader.gif';
    var previewId = _opt.previewId ? _opt.previewId : 'preview';
        
    var container = $(s_container);
    
    function loadDesigns(q_params) {
    	if(q_params.currentDesign){
            q_params.exceptDesign = q_params.currentDesign;
        }
        if(q_params.currentColor){
            q_params.exceptColor = q_params.currentColor;
        }
        
        q_params.limit = 20;
        
        container.html('');
        
        _api_call('design_by_category_plist', q_params, function(data){
            $('#designs_loader').remove();
            if (data.result){
                var lastId = 0;
                for(var i = 0; i < data.result.items.length; i++){
                    if(lastId != data.result.items[i].ID){
                        container.append('<div></div>');
                        var h2 = (data.result.items[i].Description == '') ? '' : '<h2>' + data.result.items[i].Description + '</h2>';
                        var cur = $('div:last', container);
                        cur.append('<img class="site" width="126" height="166" src="' + data.result.items[i].previewlink +
                            '" alt="' + data.result.items[i].Alt + '" title="' + data.result.items[i].Title + '" rel="' + data.result.items[i].link + '"/><ul class="colors"></ul><div class="title">' + h2 + '</div><a title="Выбрать" class="center" rel_d="' + data.result.items[i].ID + '" href="#" rel_c="' + data.result.items[i].colorID + '"><img alt="Выбрать" src="' + blankButtonImg + '" class="button b5"></a>');
                        $('h2', cur).css('margin-top', Math.ceil(($('h2', cur).parent().height() - $('h2', cur).height()) / 2) + 'px');
                        $('a', cur).click(function(){
                            handler(q_params.appId, $(this).attr('rel_d'), $(this).attr('rel_c'));
                            return false;
                        });
                    }
                    var ul = $('div:last > ul', container)
                    ul.append('<li><a href="#" style="background-color:#' + data.result.items[i].colorCode + '" rel_c="' + data.result.items[i].colorID + '" rel_l="' + data.result.items[i].link + '">&nbsp;</a></li>');
                    $('li:first', ul).addClass('act');
                    lastId = data.result.items[i].ID;
                }

                $("img.site", container).click(function(e){
	                
                    function hideBoard(){
                        $('#previewShadowBoard, #previewBoard').hide();
                    }
                    
                    function showBoard(img){
						if(loadedFullImages[img]) {
							$('#previewBoard .img').attr('src', img);
							$('#previewShadowBoard, #previewBoard').show();
							resizeBoard();
						} else {
							$('#previewBoard .img').attr('src', img).load( function() { 
								loadedFullImages[img] = true;
								$('#previewShadowBoard, #previewBoard').show();
								resizeBoard();
							});
						}
                    }
                    
                    function resizeBoard(){
                        $('#previewShadowBoard').css('height',$('body').height());
                        $('#previewBoard .actions').width($('#previewBoard .img').width());
                        $('#previewBoard').css({
                            'top':Math.ceil(($(window).height() - $('#previewBoard .img').height()) / 2) + $(document).scrollTop() - 50
                        });
                    }
                    
                    function createBoard(img){
                        $('body').append('<div id="previewShadowBoard" style="dispaly:none;"></div>\
							<div id="previewBoard" style="display:none;">\
								<div class="actions" style="margin:0px auto 5px;text-align:right;">\
									<img style="cursor:pointer" src="http://umi.ru/images/design/umiru_close.png" />\
								</div>\
								<img class="img" style="cursor:pointer;border:3px solid #fff" src="' + img + '"/>\
							</div>');
                        $('#previewShadowBoard').css({
                            'position':'absolute',
                            'background':'#000',
                            'opacity':'0.3',
                            'width':'100%',
                            'top':0,
                            'left':0,
							'z-index':9998
                        });
                        $('#previewBoard').css({
                            'position':'absolute',
                            'width':'100%',
                            'text-align':'center',
							'z-index':9999
                        });
                        $('#previewBoard .img, #previewBoard .actions img').click(hideBoard);
                        $(window).resize(resizeBoard);
                    }
                    
                    if(!($('#previewShadowBoard').length)){
                        createBoard($(this).attr('rel'));
                    }
					
					showBoard($(this).attr('rel'));
                    
                    /*
                    var self = this;
	                if(!$('#' + previewId).length){
	                    $("body").append("<p id='" + previewId + "'><img src='"+ this.src +"'/></p>");
	                    $('#' + previewId).click(function() {
							$(this).fadeOut("fast");
	                    });
	                }	                    
	                var ppos = getPreviewPosition(e.pageX, e.pageY);
	                $("#" + previewId).fadeOut("fast", function() {
						$('#' + previewId + ' > img').attr('src', self.src);
						$("#" + previewId).css("top",ppos.y + "px").css("left",ppos.x + "px").fadeIn("fast");
	                });
                    */
	            });
                
            }
            
            if(data.result.items.length < data.result.count_all){
                var parent = container.parent().eq(0);
                parent.append('<div class="pager"><ul><li class="back"><a href="#">назад</a></li><li class="forward"><a href="#">вперед</a></li></ul></div>');
                var pager_ul = $('.pager > ul', parent);
                
                var p = Math.ceil(data.result.count_all / q_params.limit);
                for(var i = 1; i <= p; i++){
                    pager_ul.append('<li><a href="#">' + i + '</a></li>');
                    if(q_params.page + 1 == i){
                        $('li:last > a', pager_ul).addClass('act');
                    }
                }
                
                var _prms = {
                    appId:_opt.appId,
                    categoryId:_opt.categoryId ? _opt.categoryId : 0,
                    limit:_opt.limit ? _opt.limit : 10
                };
                
                $('li:gt(1) > a', pager_ul).click(function(){
                    if(!$(this).hasClass('act')){
                        _prms.page = parseInt($(this).html()) - 1;
                        loadData(container, _prms, handler);
                    }
                    return false;
                });
                
                $('li:eq(0) > a', pager_ul).click(function(){
                    _prms.page = q_params.page - 1;
                    if(_prms.page >= 0){
                        loadData(container, _prms, handler);
                    }
                    return false;
                });

                $('li:eq(1) > a', pager_ul).click(function(){
                    _prms.page = q_params.page + 1;
                    if(_prms.page < $('li:gt(1)', pager_ul).length){
                        loadData(container, _prms, handler);
                    }
                    return false;
                });

            }          
        }, function() {
            $('#design_list').html('<img src="' + preloaderImg + '" id="designs_loader" />');
        });
    }
    
    
    function loadData(container, q_params, handler, reloadCategoryList){

        $('.pager', container.parent().eq(0)).remove();

        var send_prms = {
            'appId':q_params.appId
        };
        
        if(q_params.currentDesign){
            send_prms.exceptDesign = q_params.currentDesign;
        }
        if(q_params.currentColor){
            send_prms.exceptColor = q_params.currentColor;
        }
        
        if(reloadCategoryList){
            _api_call('dcat_plist', send_prms, function(data){
                $('#categories_loader').remove();
                if(data.result){
	                function appendCategoryInList(data, tree, parent, level) {
	
	                    function repeat(s, n){
	                        var a = [];
	                        while(a.length < n){
	                            a.push(s);
	                        }
	                        return a.join('');
	                    }
	
	                    var slev = repeat('-', level);
	
	                    for(var i in tree[parent]){
	                        $('#design_category').append('<option value="' + data[i].ID + '">' + slev + data[i].Name + '</option>');
	                        if(q_params.categoryId == data[i].ID){
	                            $('#design_category option:last').attr('selected', 'selected');
	                        }
	                        appendCategoryInList(data, tree, tree[parent][i], level ? (level + 2) : 2);
	                    }
	                }

	                $('#design_category option:not(:eq(0))').remove();

                    var _tree = {};
                    for(var i = 0; i < data.result.length; i++){
                      if(_tree[data.result[i].parentId] == undefined){
                          _tree[data.result[i].parentId] = {};
                      }
                      _tree[data.result[i].parentId][i] = data.result[i].ID;
                    }
                    appendCategoryInList(data.result, _tree, 0);
                    
                    loadDesigns(q_params);
                }                
            }, function() {
                if($('#categories_loader').size() == 0) {
                    $('#design_category').after('<img src="' + preloaderImg + '" id="categories_loader" />');
                }
            });
        }
        else {
            $('#categories_loader').remove();
        	loadDesigns(q_params);
        }
        
    }
    
    if(!options.categoryId){
        options.categoryId = 0;
    }
    if(!options.limit){
        options.limit = 10;
    }
    if(!options.page){
        options.page = 0;
    }

    this.each(function(){

        loadData(container, options, handler, reloadCategoryList);
        
    });
    
}