<?php
/**
 * Marketplace - Component Marketplace 
 * ******************************************************************
 *
 * PHP version 7.0
 *
 * @category   Component
 * @package    Joomla
 * @author     WebKul software private limited <support@webkul.com>
 * @copyright  2010 WebKul software private limited
 * @license    http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL
 * @version    GIT:5.2
 * @filesource http://store.webkul.com
 * @link       Technical Support:  webkul.uvdesk.com
 * ******************************************************************
 */
// no direct access
defined('_JEXEC') or die('Restricted access');
JHTML::_('behavior.tooltip');
JHtml::_('bootstrap.tooltip');
JHtml::_('behavior.multiselect');
JHtml::_('dropdown.init');
JHtml::_('formbehavior.chosen', 'select');
$doc=JFactory::getDocument();
$doc->addStyleSheet(JURI::root().'administrator/components/com_marketplace/assets/newdesign/admin-dashboard.css');
$doc->addStyleSheet(
    '//ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css'
);
$doc->addScript(
    "//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"
);
$style="
.icon-addons {
    background-image: url('components/com_marketplace/assets/images/sprite-icon.png');
    background-repeat: no-repeat;
    background-position: -39px -12px !important;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    margin-right: 0px!important;
}
";
$doc->addStyleDeclaration($style);
$url ='http://joomla30.webkul.com/marketplace_addons_image/addons.xml';
$xml = JFactory::getXML($url);//JXMLElement
?>

<script type="text/javascript">
jQuery(function () {
    var timer;
    jQuery('.webkul_product').on('mouseenter', function () {
        var that = this;
        timer = setTimeout(function () {
            var cls = jQuery(that).attr('class');
            var ind = jQuery(that).index();
            jQuery('.description_layer:eq(' + ind + ')').show("scale", {
                percent: 100,
                direction: 'vertical'
            }, 500);

        }, 500);
    }).mouseleave(function () {
        clearTimeout(timer);
    });
    jQuery('.webkul_product').on('mouseleave', function () {
        var ind = jQuery(this).index();
        jQuery('.description_layer:eq(' + ind + ')').hide("scale", {
            to: {
                width: 100,
                height: 100
            }
        }, 500);
    });
    /*====================AutoComplete============================*/
    var data = new Array();
    var i = 0;
    jQuery('.webkul_product .product_name').each(function () {
        data[i++] = jQuery(this).text();

    });

    jQuery(".searchaddon").autocomplete({
        source: data
    });
    /*=============Event===============================*/
    jQuery(".searchaddon").on("autocompleteselect", function (event, ui) {

        jQuery('.webkul_product .product_name').each(function () {
            if (ui.item.value == jQuery(this).text()) {
                jQuery('.webkul_product').css("display", 'none');
                jQuery(this).parent().parent().css('display', 'block');
            }

        });
    });
    jQuery('.plugin_cross').on('click', function () {
        jQuery('.searchaddon').val('');
        jQuery('.webkul_product').css("display", 'block');
        jQuery(this).css('display', 'none');
        jQuery('.head-textbox').css('width', '248px');
    });
    jQuery('.plugin_search').on('click', function () {
        jQuery('.webkul_product').css("display", 'none');
        jQuery('.webkul_product .product_name').each(function () {

            if (jQuery(this).text().toLowerCase().indexOf(jQuery('.searchaddon').val().toLowerCase()) > -1) {
                jQuery(this).parent().parent().css('display', 'block');
            }
        });
    });
    jQuery('.searchaddon').on('keyup', function (e) {

        var mystring = jQuery('.searchaddon').val();
        if (mystring.match(/\S/)) {
            jQuery('.plugin_cross').css('display', 'block');
            jQuery('.head-textbox').css('width', '267px');
        } else {
            jQuery('.plugin_cross').css('display', 'none');
            jQuery('.head-textbox').css('width', '248px');
        }
        if (e.keyCode == 13) {
            jQuery('.webkul_product').css("display", 'none');
            jQuery('.webkul_product .product_name').each(function () {

                if (jQuery(this).text().toLowerCase().indexOf(jQuery('.searchaddon').val().toLowerCase()) > -1) {
                    jQuery(this).parent().parent().css('display', 'block');
                }
            });
        } else {
            jQuery('.webkul_product').css("display", 'block');
        }
    });
});
</script>
<div id="j-sidebar-container" class="span2">
    <?php echo $this->sidebar; ?>
</div>
<?php
if ($xml != false) {
?>
<div id="j-main-container" class="span10">
    <div class="container">
        <div class="top-head">
            <div class="head-text">Plugins for Every Need</div>
            <div class="head-textbox"><input class="form-control searchaddon glyphicon glyphicon-search" size="10" type="text" placeholder="Search Add-ons" >
                <span class="plugin_search"><i class="icon-search"></i></span>
                <span class="plugin_cross_before"></span>
                <span class="plugin_cross"><i class="icon-remove"></i></span>
            </div>
        </div>
        <div class="row-wrapper">
        <?php
        foreach ($xml->addon as $key=>$value) {
        ?>
            <div class="webkul_product">
                <a target="_blank" href="<?php echo current($value->storeUrl);?>">
                    <div class="product_image" style="background-position:<?php echo current($value->x);?> <?php echo current($value->y);?>">
                    </div>
                    <div class="product_name"><strong><?php echo current($value->name);?></strong></div>
                    <div class="product_price"><strong><?php echo current($value->price);?></strong></div>
                    <div class="description_layer"><?php echo current($value->description);?></div>
                </a>
            </div>

            <?php
        }
            ?>
        </div>

    </div>
</div>
<style type="text/css">
#j-main-container>* {
    margin: 0px;
    padding: 0px;
    color: #5D6D6D !important;
}

.webkul_product {
    height: 150px;
    width: 300px;
    margin-left: 15px;
    margin-right: 15px;
    border: 1px solid #CCCCCC;
    float: left;
    position: relative;
    margin-bottom: 30px;
    padding-top: 10px;
}

.row-wrapper {
    margin-bottom: 30px;
    height: 150px;
}

.head-text {
    position: absolute;
    top: 5px;
    left: 5px;
}

.head-textbox {
    background-color: #FDFDFD;
    height: 28px;
    position: absolute;
    right: 28px;
    top: 3px;
    width: 248px;
    border-radius: 10px;
}

.top-head {
    max-width: 100%;
    position: relative;
    height: 35px;
    font-size: 14px;
    background-color: #6994c4;
    margin-bottom: 30px;
    color: #FFFFFF;
}

.container {
    max-width: 100%;
    min-width: 365px;
    box-shadow: 1px 4px 12px #E8E2DC;
    border-radius: 4px;
    border: 2px solid #6994c4;
    min-height: 500px;
}

.description_layer {
    display: none;
    height: 160px;
    width: 300px;
    background-color: #6994C4;
    color: #FFFFFF;
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 0.9;
    z-index: 9999;
    padding: 5px;
    box-sizing: border-box;
}

.product_image {
    width: 280px;
    height: 100px;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-image: url('<?php echo current($xml->imagelocation);?>');
    border: 1px solid #CCCCCC;
}

.plugin_search {
    position: absolute;
    right: 0px;
    top: 0px;
    background-color: #E6E6E6;
    cursor: pointer;
    height: 28px;
    width: 30px;
}

.icon-search {
    margin-top: 5px;
    margin-left: 8px;
    color: #333;
}

.icon-remove {
    color: #353333 !important;
    margin-top: 6px;
    margin-left: 3px;
}

.plugin_cross {
    position: absolute;
    right: 31px;
    background-color: #e6e6e6;
    cursor: pointer;
    display: none;
    z-index: 999;
    height: 27px;
    top: 0;
    width: 20px;
}

.product_name {
    text-align: center;
}

.product_price {
    text-align: center;
    margin-top: 5px;
}

.form-control {
    border-right: 0px!important;
}

@media screen and (max-width:500px) {
    .top-head {
        height: 70px;
    }
    .head-textbox {
        top: 25px;
        left: 0px;
    }
}
</style>
<?php
} else {
    JFactory::getApplication()->enqueueMessage(JText::_("FAILED_PRO_XML"), 'error');
}
